Модульный тест Vue Formulate не видит ошибок

Я начинаю работать с компонентами модульного тестирования в Vue, используя Jest и Vue-Test-Utils. Я использую 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');
})

Вывод 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 | })

vue.js vue-test-utils vue-formulate
person Rory    schedule 10.01.2021    source источник

Ответы (1)


arrow_upward
0
arrow_downward

  1. Если вы проверяете наличие ошибок, вам нужно, чтобы ваш error-visibility на входе был «живым», или вам нужно смоделировать событие размытия (в данном случае это почти наверняка проблема).
  2. Поскольку наблюдатели задействованы во внутреннем устройстве 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

person jpschroeder    schedule 11.01.2021
comment
Идеально - раньше я безуспешно пробовал событие размытия, но оно работает в сочетании с flush-promises (что я совершенно неправильно понял из документации vue-test-utils). Благодарность! - person Rory; 11.01.2021