Jest 单元测试无法确定 Vuetify 组件的可见性

Question

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

如果您查看 Test.vue 组件，默认情况下v-alert组件是隐藏的。(其样式设置为显示：无;(

单元测试表示expect(alert).not.toBeVisible()哪个应该通过，但无论v-alert模型设置为什么，它总是失败。如果我将测试更改为expect(alert).toBeVisible()则无论模型设置为 true/falsev-alert它都会通过。

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

因此，据我所知，Jest单元测试根本无法确定v-alert组件的可见性。这些相同的测试在v-btn组件上工作正常，那么为什么v-alert会破裂呢？这只是我的第一个单元测试样本，我已经尝试工作了 2 天。我有一个完整的应用程序要编写测试，到目前为止，Jest 与 Vuetify 配合得不是很好......有什么建议吗？

Test.vue component

<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>

开玩笑单元测试

// 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();
});
});

Package.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"
}

Answer 1

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

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

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

看起来如果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();
});
});
});