Ввод текста и работа с формами

Монтирование компонентов и подготовка к тестированию

Для работы с формами и вводом текста в Vue компонентах используется метод mount из библиотеки Vue Test Utils. Этот метод создаёт изолированный экземпляр компонента, позволяя взаимодействовать с его DOM и внутренним состоянием.

import { mount } from '@vue/test-utils'
import MyForm from '@/components/MyForm.vue'

const wrapper = mount(MyForm)

После монтирования компонента можно получить доступ к элементам формы через методы find и findAll, используя селекторы CSS или data-testid атрибуты, что повышает устойчивость тестов к изменениям верстки.

const input = wrapper.find('input[name="username"]')
const submitButton = wrapper.find('button[type="submit"]')

Работа с вводом текста

Для имитации ввода текста в поля формы используется метод setValue, который обновляет значение элемента и автоматически триггерит событие input. Это позволяет проверить реакцию компонента на изменение данных.

await input.setValue('testuser')
expect(input.element.value).toBe('testuser')

setValue объединяет несколько действий: изменение value и вызов событий input и change, что делает его предпочтительным для большинства случаев тестирования ввода.

Проверка реактивного состояния

После изменения значения формы часто требуется проверить обновление реактивных данных компонента. Vue Test Utils позволяет напрямую обращаться к vm (экземпляру Vue) или использовать вычисляемые свойства и методы.

expect(wrapper.vm.username).toBe('testuser')

Если компонент использует двухстороннюю привязку через v-model, изменения в поле автоматически синхронизируются с реактивным состоянием, что упрощает тесты.

Триггеринг событий формы

Для тестирования поведения при отправке формы используется метод trigger, который позволяет инициировать события DOM, такие как submit, click или кастомные события.

await submitButton.trigger('click')
// или
await wrapper.find('form').trigger('submit.prevent')

Метод trigger принимает название события и объект с дополнительными параметрами, например координатами мыши или клавишами.

await input.trigger('keydown.enter')

Тестирование валидации

Компоненты с формами часто включают валидацию. Vue Test Utils позволяет проверить отображение сообщений об ошибках и состояние элементов формы.

await input.setValue('')
await submitButton.trigger('click')
expect(wrapper.text()).toContain('Поле обязательно для заполнения')

Важно учитывать, что асинхронные валидации требуют использования await для ожидания завершения всех реактивных обновлений, чтобы DOM отобразил новые состояния.

Взаимодействие с несколькими полями

Для форм с несколькими полями удобно использовать методы findAll и итерацию по элементам:

const inputs = wrapper.findAll('input')
const values = ['user1', 'user2', 'user3']

for (let i = 0; i < inputs.length; i++) {
  await inputs[i].setValue(values[i])
}

Такой подход позволяет систематически тестировать формы без дублирования кода.

Моки и подмена методов

Для тестирования отправки данных формы часто используют моки функций или сервисов, которые обрабатывают запросы.

const mockSubmit = jest.fn()
const wrapper = mount(MyForm, {
  props: { onSubmit: mockSubmit }
})

await wrapper.find('form').trigger('submit.prevent')
expect(mockSubmit).toHaveBeenCalled()

Это обеспечивает независимость тестов от реального API и позволяет проверять корректность передачи данных.

Асинхронные обновления и nextTick

Многие операции с формами могут быть асинхронными, особенно при использовании вычисляемых свойств или внешних библиотек валидации. Для точной проверки состояния DOM после изменений необходимо использовать await nextTick() из Vue.

import { nextTick } from 'vue'

await input.setValue('newvalue')
await nextTick()
expect(wrapper.text()).toContain('newvalue')

Это гарантирует, что все реактивные обновления завершены перед проверкой результата.

Рекомендации по структуре тестов форм

  • Использовать селекторы data-testid для полей ввода и кнопок, чтобы тесты были устойчивы к изменениям классов и разметки.
  • Разделять тесты на ввод данных, валидацию и отправку формы, чтобы было проще локализовать ошибки.
  • Всегда проверять как реактивное состояние компонента, так и отображение в DOM, чтобы тесты покрывали оба уровня поведения.
  • Для сложных форм с множественными шагами использовать отдельные блоки describe для каждого шага, поддерживая читаемость тестов.

Заключение по работе с формами

Vue Test Utils предоставляет полный набор инструментов для имитации ввода, проверки реактивного состояния и отправки форм. Использование setValue, trigger и проверки vm позволяет создавать детальные и надёжные тесты компонентов с минимальным кодом, обеспечивая уверенность в корректности работы форм и валидации.

Оглавление