问题描述
我正在使用 Jest 和 Vue-Test-Utils 在 Vue 中开始单元测试组件。我正在使用 Vue Formulate 来管理表单字段,它在浏览器中按预期工作。我正在根据文档在“本地 Vue”测试实例中导入插件。
但是,以下断言失败,因为在测试中找不到文本,但它在浏览器中有效。我究竟做错了什么?我尝试了各种选择器,包括 wrapper.text()
都没有成功
组件:
<template>
<div class="card">
<FormulateForm v-model="formValues">
<FormulateInput type="text" label="Full Name" name="name" validation="required"/>
</FormulateForm>
</div>
</template>
<script>
export default {
name: "RegistrationFormComponent",data: function(){
return {
'formValues' : {},}
}
</script>
测试
import { mount,createLocalVue } from '@vue/test-utils';
import VueFormulate from '@braid/vue-formulate';
import registrationForm from '../../resources/js/components/RegistrationFormComponent'
test('name field is required',async () => {
const localVue = createLocalVue();
localVue.use(VueFormulate);
let wrapper = mount(registrationForm,{localVue});
let form = wrapper.find('form');
let field = form.find('input[name=name]');
await field.setValue('');
expect(wrapper.find('.formulate-input-error').text()).toContain('Name is required');
})
玩笑输出:
FAIL tests/Vue/registrationForm.test.js
● email must be a valid email address
[vue-test-utils]: find did not return .formulate-input-error,cannot call text() on empty Wrapper
12 |
13 | await field.setValue('Dog');
> 14 | expect(wrapper.find('.formulate-input-error').text()).toContain('a valid email');
| ^
15 | })
解决方法
- 如果您要检查错误,则需要将输入上的
error-visibility
设为“实时”,或者您需要模拟模糊事件(在这种情况下,这几乎肯定是问题所在)。 - 因为观察者参与了 Vue Formulate 的内部结构,所以你经常需要在状态“稳定”之前“刷新”所有的承诺。您可以通过安装
flush-promises
模块来做到这一点。
npm install -D flush-promises
然后将其导入到您的测试文件中,并在检查您的最终状态之前等待 flushPromises()
。
import flushPromises from 'flush-promises'
import { mount,createLocalVue } from '@vue/test-utils';
import VueFormulate from '@braid/vue-formulate';
import registrationForm from '../../resources/js/components/RegistrationFormComponent'
test('name field is required',async () => {
const localVue = createLocalVue();
localVue.use(VueFormulate);
let wrapper = mount(registrationForm,{localVue});
let form = wrapper.find('form');
let field = form.find('input[name=name]');
field.setValue('');
field.trigger('blur');
await flushPromises()
expect(wrapper.find('.formulate-input-error').text()).toContain('Name is required');
})
完全披露:我是 VueFormulate 的作者