Триггер событий (trigger)

Триггер событий — один из фундаментальных инструментов тестирования компонентов Vue с помощью Vue Test Utils. Он позволяет симулировать действия пользователя, проверять реакцию компонента на события и корректность работы логики, связанной с интерактивными элементами.

Основы метода trigger

Метод trigger вызывается на обёртке компонента (wrapper) или на конкретном элементе, найденном с помощью селектора. Его синтаксис:

await wrapper.find('селектор').trigger('событие', options)
  • 'событие' — строка с названием события, например 'click', 'input', 'submit'.
  • options — объект, содержащий дополнительные параметры события, такие как bubbles, cancelable, key, code, value и другие.

Пример базового использования:

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

test('клик по кнопке вызывает метод', async () => {
  const wrapper = mount(ButtonComponent)
  await wrapper.find('button').trigger('click')
  expect(wrapper.emitted()).toHaveProperty('clicked')
})

В этом примере проверяется, что при клике на кнопку вызывается событие clicked, эмитируемое компонентом.

Триггер пользовательского ввода

Для полей ввода важно не только вызвать событие input, но и правильно задать значение:

const input = wrapper.find('input')
await input.setValue('тестовое значение')  // setValue автоматически триггерит 'input'
expect(wrapper.vm.text).toBe('тестовое значение')

Метод trigger также позволяет вручную имитировать событие с конкретными свойствами:

await input.trigger('keydown.enter', { key: 'Enter' })
expect(wrapper.emitted()).toHaveProperty('submit')

Здесь событие keydown с клавишей Enter проверяет реакцию формы на нажатие клавиши.

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

Многие события вызывают изменения состояния компонента, которые не применяются мгновенно. Для корректной проверки нужно использовать await nextTick() или ждать завершения trigger:

import { nextTick } from 'vue'

await wrapper.find('button').trigger('click')
await nextTick()
expect(wrapper.text()).toContain('Кнопка нажата')

Метод trigger возвращает промис, поэтому его можно использовать с await для последовательного выполнения событий и проверки последствий.

Параметры событий

trigger поддерживает передачу объекта события, что позволяет тестировать сложные сценарии:

await wrapper.find('input').trigger('input', {
  target: { value: 'новое значение' }
})
expect(wrapper.vm.text).toBe('новое значение')
  • target.value — имитация изменения значения поля.
  • key, code — для симуляции нажатия клавиш.
  • bubbles, cancelable — управление стандартными свойствами событий.

Триггер пользовательских событий

Метод trigger работает не только с DOM-событиями, но и с пользовательскими событиями, которые компонент эмитирует через $emit:

await wrapper.vm.$emit('custom-event', { id: 1 })
expect(wrapper.emitted('custom-event')[0]).toEqual([{ id: 1 }])

При необходимости можно комбинировать DOM-события и $emit, чтобы полностью покрыть интерактивные сценарии.

Последовательные события

Триггер позволяет проверять реакцию компонента на цепочку событий:

const button = wrapper.find('button')
await button.trigger('mousedown')
await button.trigger('mouseup')
await button.trigger('click')

expect(wrapper.vm.isClicked).toBe(true)

Это особенно полезно для сложных UI-компонентов, где важна последовательность действий пользователя.

Советы по использованию trigger

  • Использовать await всегда, даже для простых событий, чтобы убедиться, что DOM обновлён.
  • Для инпутов лучше применять setValue, так как он автоматически вызывает событие input.
  • Для клавишных событий указывать key и code, чтобы имитация была максимально точной.
  • Проверять emitted-события через wrapper.emitted() для точной валидации логики.

Метод trigger является ядром взаимодействия с компонентами в тестах Vue. Он позволяет имитировать реальные действия пользователя и проверять реакцию компонентов на различные сценарии, от кликов и ввода текста до сложных последовательных событий. Правильное использование trigger обеспечивает надёжное покрытие функциональности и точность тестов.

Оглавление