Vue Formula的单元测试没有看到错误

Question

我开始使用Jest和Vue Test Utils在Vue中对组件进行单元测试。我正在使用Vue Formula来管理表单字段，它在浏览器中按预期工作。我正在根据文档在"本地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');
})

Jest输出：

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

Answer 1

1. 如果要检查错误，则需要输入上的error-visibility为"活动"，或者需要模拟模糊事件(在这种情况下，这几乎肯定是问题所在(
2. 因为观察者参与了Vue Formula的内部事务，所以在州"解决"之前，你通常需要"刷新"所有承诺。您可以通过安装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');
})

全面披露：我是VueFormula 的作者