Клик по элементам (click)

В Vue Test Utils симулирование клика по элементам является одной из базовых операций для проверки поведения компонентов. Метод trigger('click') позволяет вызвать событие click на выбранном DOM-элементе или обертке компонента, имитируя взаимодействие пользователя.

Основы использования trigger('click')

Метод вызывается на объекте Wrapper или DOMWrapper. Простейший пример:

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('click')
})

Ключевые моменты:

  • trigger возвращает промис, который необходимо ожидать через await, чтобы гарантировать завершение всех реактивных обновлений Vue.
  • Метод можно вызывать как на элементах HTML (button, div), так и на дочерних компонентах, если они используют $emit.

Передача дополнительных данных события

События могут включать параметры, имитирующие свойства MouseEvent или другие пользовательские данные. Это делается через объект с нужными полями:

await wrapper.find('button').trigger('click', {
  button: 0,      // левая кнопка мыши
  ctrlKey: true,  // имитация зажатой клавиши Ctrl
})

Обязательные поля не нужны, Vue Test Utils корректно создаёт объект события даже с пустыми параметрами, но для сложных сценариев имитация данных может быть критичной.

Клики по компонентах с обработчиками

Если компонент содержит методы, привязанные к клику через директиву @click:

<template>
  <button @click="increment">Нажми</button>
</template>

<script>
export default {
  data() {
    return { count: 0 }
  },
  methods: {
    increment() {
      this.count++
    }
  }
}
</script>

Тестирование увеличения значения:

const wrapper = mount(Component)
const button = wrapper.find('button')

await button.trigger('click')
expect(wrapper.vm.count).toBe(1)

Важно: использование await гарантирует, что реактивное обновление count произойдёт до проверки состояния.

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

Для проверки множественных взаимодействий достаточно вызывать trigger несколько раз:

const wrapper = mount(Component)
const button = wrapper.find('button')

await button.trigger('click')
await button.trigger('click')

expect(wrapper.vm.count).toBe(2)

Клики по дочерним компонентам и кастомные события

Vue Test Utils позволяет вызывать клики на компонентах, которые сами эмитируют события:

<ChildButton @click="$emit('child-click')" />

Тест:

const wrapper = mount(ParentComponent)
await wrapper.findComponent(ChildButton).trigger('click')

expect(wrapper.emitted('child-click')).toHaveLength(1)

Таким образом, trigger('click') универсален для проверки взаимодействий как с нативными DOM-элементами, так и с компонентами.

Особенности асинхронных обработчиков

Если обработчик клика включает асинхронные операции:

methods: {
  async fetchData() {
    this.loading = true
    await api.getData()
    this.loading = false
  }
}

Необходимо ожидать завершения всех асинхронных действий перед проверкой состояния:

await wrapper.find('button').trigger('click')
await wrapper.vm.$nextTick()  // ожидание обновления DOM
expect(wrapper.vm.loading).toBe(false)

Комбинация с другими событиями

Метод trigger может использоваться совместно с событиями keydown, input, submit, что позволяет тестировать цепочки взаимодействий, где клик инициирует дальнейшие действия:

await wrapper.find('form').trigger('submit')

Проверка вызова методов через шпионов

Иногда требуется удостовериться, что конкретный метод был вызван при клике. Для этого применяют шпионы:

const incrementSpy = vi.spyOn(wrapper.vm, 'increment')
await wrapper.find('button').trigger('click')
expect(incrementSpy).toHaveBeenCalled()

Подобный подход особенно полезен при сложной логике, когда изменение данных не единственный критерий корректного поведения.

Ключевые рекомендации

  • Всегда использовать await для trigger, если проверяются реактивные данные.
  • Для проверки дочерних компонентов применять findComponent, чтобы симулировать пользовательский клик на компоненте, а не на его DOM.
  • Передавать объект с параметрами события при необходимости имитации специальных сценариев.
  • Использовать шпионы для точного контроля вызова методов и событий.

trigger('click') в Vue Test Utils является основой для эмуляции взаимодействия пользователя и позволяет уверенно тестировать обработчики событий, изменение реактивного состояния и генерацию кастомных событий.

Оглавление