Vue Formulate 的单元测试看不到错误

Question

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

如果你正在检查错误，你需要你的 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 的作者

Vue Formulate 的单元测试看不到错误

Unit test of Vue Formulate not seeing errors

vue.js

vue-test-utils

vue-formulate