1

我有一个带有 Vuetify 的 Vue2 项目，我正在使用 Jest 对我的代码进行单元测试。我开始测试一些示例代码，但我无法让 Jest 确定 Vuetifyv-alert组件是否可见。我已经尝试过内置的 Jest 方法以及添加 Jest-dom 并使用该toBeVisible()方法，但到目前为止没有任何效果。

如果你看Test.vue组件，该v-alert组件默认是隐藏的。（它的样式设置为display:none;）

单元测试说明expect(alert).not.toBeVisible()哪个应该通过，但无论v-alert模型设置为什么，它总是失败。如果我将测试更改为expect(alert).toBeVisible()它通过，无论v-alert模型设置为真/假。

如果我将测试更改为expect(alert).toHaveStyle({ display: 'none' });失败，无论我是否将模型设置为真/假。

据我所知，Jest 单元测试根本无法确定v-alert组件的可见性。这些相同的测试在v-btn组件上运行良好，那么为什么会v-alert中断？这只是我的第一个单元测试样本，我已经尝试了 2 天。我有一个完整的应用程序来编写测试，到目前为止，Jest 不能很好地与 Vuetify 一起工作......有什么建议吗？

// Test.vue 组件

<template>
  <div>
    <v-btn ref="btn" depressed tile @click="showAlert">Show Alert</v-btn>
    <v-alert
      v-model="showError"
      ref="error-msg"
      type="error"
      transition="scale-transition"
      width="410"
      tile
      dense
      dismissible
      @input="clearError"
    >
      {{ errorText }}
    </v-alert>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showError: false,
      errorText: ''
    };
  },
  methods: {
    showAlert() {
      this.errorText = 'Test Error message';
      this.showError = true;
    },
    clearError() {
      this.errorText = '';
    }
  }
};
</script>

// Jest 单元测试

// Libraries
import Vue from 'vue';
import Vuetify from 'vuetify';

// Components
import Test from '@/components/Login/Test.vue';

// Utilities
import { createLocalVue, shallowMount } from '@vue/test-utils';

// Import Jest Dom test utils.
import '@testing-library/jest-dom';

const localVue = createLocalVue();

Vue.use(Vuetify);

describe('Test Page', () => {
  let vuetify;

  beforeEach(() => {
    vuetify = new Vuetify();
  });

  it('Check visibility of button', () => {
    const wrapper = shallowMount(Test, {
      localVue,
      vuetify
    });

    const btn = wrapper.findComponent({ ref: 'btn' }).element;

    expect(btn).toBeVisible();
  });

  it('Error Message hidden on page load', () => {
    const wrapper = shallowMount(Test, {
      localVue,
      vuetify
    });

    const alert = wrapper.findComponent({ ref: 'error-msg' }).element;

    expect(alert).not.toBeVisible();
  });
});

// 包.json

"dependencies": {
    "vue": "^2.6.11",
    "vue-click-outside": "^1.1.0",
    "vue-debounce": "^2.5.7",
    "vue-router": "^3.3.4",
    "vuetify": "^2.2.11",
    "vuex": "^3.4.0"
  },
  "devDependencies": {
    "@babel/plugin-transform-runtime": "^7.10.3",
    "@babel/polyfill": "^7.10.1",
    "@fortawesome/fontawesome-free": "^5.13.1",
    "@testing-library/jest-dom": "^5.10.1",
    "@vue/cli-plugin-babel": "^4.4.5",
    "@vue/cli-plugin-e2e-nightwatch": "^4.4.5",
    "@vue/cli-plugin-eslint": "^4.4.5",
    "@vue/cli-plugin-unit-jest": "^4.4.5",
    "@vue/cli-service": "^4.4.5",
    "@vue/eslint-config-prettier": "^4.0.1",
    "@vue/test-utils": "^1.0.3",
    "babel-eslint": "^10.0.3",
    "babel-jest": "^26.1.0",
    "eslint": "^5.16.0",
    "eslint-plugin-vue": "^6.2.2",
    "node-sass": "^4.14.1",
    "sass": "^1.26.9",
    "sass-loader": "^8.0.2",
    "vue-cli-plugin-vuetify": "^2.0.6",
    "vue-template-compiler": "^2.6.11",
    "vuetify-loader": "^1.5.0"
  }
4

1 回答 1

1

我遇到了类似的问题，所以我决定改用existsfrom @vue/test-utils。

文档exists：https ://vue-test-utils.vuejs.org/api/wrapper/#exists

我还决定在元素上使用v-if（而不是v-model）v-alert来隐藏/显示组件。

看起来如果v-if接收到 的值false，文档中的组件/元素将替换为<!---->，这对于检查您的组件/元素是隐藏还是显示非常有用。

参见v-if测试规范：https ://github.com/vuejs/vue/blob/52719ccab8fccffbdf497b96d3731dc86f04c1ce/test/unit/features/directives/if.spec.js

证监会

模板：

<template>
  <v-container>
    <v-btn
      @click='showError()'
      ref="showErrorButton">
      Show Error
    </v-btn>
    <v-alert
      v-if="errorEncountered"
      ref="errorAlert"
      colored-border
      type="error"
      elevation="2"
      >
      Oops! Something went wrong!
    </v-alert>
  <v-container>
<template>

Javascript：

export default {
  methods: {
    showError() {
      this.errorEncountered = true;
    }
  }
  data() {
    return {
      errorEncountered: false,
    };
  },
};

每当errorEncountered更新时，v-alert 组件将根据值是真/假来显示/隐藏。

测试

describe('Component', () => {
  let wrapper;

  beforeEach(() => {
    wrapper = mount(Component, {
      localVue,
      vuetify,
    });
  });

  describe('When component is mounted', () => {
    it('Then the default value for errorEncountered should be false', () => {
      expect(wrapper.vm.errorEncountered).toBeFalse();
    });
    
    it('Then the default state for the error alert should be hidden', async () => {
      const errorAlert = wrapper.find({ ref: 'errorAlert' });
      expect(errorAlert.exists()).toBeFalse();
    });

    describe('When an error is encountered', () => {
      it('Then errorEncountered should be set to true', async () => {
        const showErrorButton = wrapper.find({ ref: 'showErrorButton' });
        showErrorButton.trigger('click');
        await Vue.nextTick();
        expect(wrapper.vm.errorEncountered).toBeTrue();
      });

      it('Then error alert should be visible', async () => {
        const showErrorButton = wrapper.find({ ref: 'showErrorButton' });
        showErrorButton.trigger('click');
        await Vue.nextTick();
        const errorAlert = wrapper.find({ ref: 'errorAlert' });
        expect(errorAlert.exists()).toBeTrue();
      });
    });
  });
于 2020-07-09T14:10:30.100 回答