Vue Academy · Урок

Тестирование взаимодействий пользователя и событий

wrapper.trigger('click'), setValue(), wrapper.vm.$emit() и асинхронный flushPromises().

«Тестирование взаимодействий пользователя и событий» — бесплатный урок Vue Academy на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Vue Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Vue Academy содержит 4 уроков всего.

Имитация поведения пользователя

Помимо отрисовки, тесты должны имитировать действия пользователя: нажатие кнопок, ввод текста в поля и отправку форм. Оболочки @vue/test-utils предоставляют методы для отправки событий DOM и последующего обновления Vue.

trigger для событий нажатия

wrapper.trigger("click") вызывает событие нажатия на элементе. Поскольку это обновляет DOM, метод возвращает промис — дождитесь его с помощью await, чтобы проверки увидели результат.

const button = wrapper.get("button")
await button.trigger("click")
expect(wrapper.text()).toContain("Clicked once")

Почему тесты асинхронны

Vue обновляет DOM асинхронно. После взаимодействия новое состояние становится видимым только на следующем такте. Ожидание промиса от trigger позволяет DOM обновиться перед проверкой.

it("increments on click", async () => {
  const wrapper = mount(Counter)
  await wrapper.get("button").trigger("click")
  expect(wrapper.get(".count").text()).toBe("1")
})

setValue для полей ввода

Чтобы ввести текст в поле, вызовите wrapper.setValue(value) для оболочки поля ввода. Метод устанавливает значение и отправляет событие input, поэтому обновляется v-model.

const input = wrapper.get("input")
await input.setValue("hello@example.com")
expect(input.element.value).toBe("hello@example.com")

Флажки и списки выбора

setValue адаптируется к элементу: для флажков передавайте логическое значение, а для списка выбора — значение параметра.

await wrapper.get("input[type=checkbox]").setValue(true)
await wrapper.get("select").setValue("tr")

Проверка отправленных событий

Компоненты взаимодействуют с родителями через отправленные события. wrapper.emitted() возвращает запись обо всех событиях, отправленных компонентом, с группировкой по именам.

await wrapper.get("button").trigger("click")
expect(wrapper.emitted()).toHaveProperty("submit")

Проверка payload отправленных событий

wrapper.emitted("name") возвращает массив массивов аргументов отправки. Первый аргумент первой отправки — это emitted("name")[0][0].

await wrapper.get("button").trigger("click")
const events = wrapper.emitted("submit")
expect(events).toHaveLength(1)
expect(events[0][0]).toEqual({ email: "a@b.com" })

Тестирование отправки формы

Объедините всё: заполните поле, отправьте форму, а затем проверьте отправленный payload.

it("emits submit with the email", async () => {
  const wrapper = mount(LoginForm)
  await wrapper.get("input").setValue("a@b.com")
  await wrapper.get("form").trigger("submit.prevent")
  expect(wrapper.emitted("submit")[0][0]).toEqual({ email: "a@b.com" })
})

Асинхронные операции в компонентах

Многие обработчики вызывают API и обновляют состояние после выполнения промиса. Микрозадача может не успеть выполниться к моменту проверки, поэтому нужно подождать.

async function load() {
  loading.value = true
  data.value = await fetchData()
  loading.value = false
}

flushPromises

flushPromises из утилит тестирования выполняет все ожидающие микрозадачи (колбэки then). Дождитесь его выполнения после запуска асинхронного действия, чтобы выполненные промисы и соответствующие обновления DOM применились.

import { flushPromises } from "@vue/test-utils"

await wrapper.get("button").trigger("click")
await flushPromises()
expect(wrapper.text()).toContain("Loaded")

Объединение асинхронных тестов

Шаблон таков: смонтировать, выполнить действие, await flushPromises(), проверить результат. Пометьте функцию теста как async, чтобы использовать await на всех этапах.

it("shows results after fetch", async () => {
  const wrapper = mount(SearchBox)
  await wrapper.get("input").setValue("vue")
  await wrapper.get("form").trigger("submit.prevent")
  await flushPromises()
  expect(wrapper.findAll("li")).toHaveLength(2)
})

Быстрая проверка

Проверьте, насколько хорошо Вы понимаете тестирование взаимодействий.

Итоги

Вы научились тестировать взаимодействия и события:

trigger("click") вызывает события; ожидайте его выполнения, потому что Vue обновляет DOM асинхронно.
setValue устанавливает значения полей ввода, флажков и списков выбора, а также вызывает события ввода для v-model.
wrapper.emitted() записывает отправленные события; emitted("name")[0][0] считывает первый payload.
Для асинхронных обработчиков дождитесь выполнения await flushPromises() перед проверкой.
Объявляйте тесты асинхронными с помощью async, чтобы использовать await.

Часто задаваемые вопросы

Урок «Тестирование взаимодействий пользователя и событий» бесплатный?

Да — полный текст урока «Тестирование взаимодействий пользователя и событий» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Vue Academy, подпишись на CoddyKit PRO. Курс Vue Academy содержит 4 уроков всего.

Чему я научусь в уроке «Тестирование взаимодействий пользователя и событий»?

wrapper.trigger('click'), setValue(), wrapper.vm.$emit() и асинхронный flushPromises(). Ты практикуешь Vue Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Vue Academy?

Предыдущий опыт не требуется. Vue Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.

Сколько времени занимает урок «Тестирование взаимодействий пользователя и событий»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Vue Academy?

Да. Каждый урок Vue Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

Настройка Vitest для проектов Vue
Монтирование и поиск компонентов
Тестирование взаимодействий пользователя и событий
Имитация композируемых модулей, хранилищ и API

← Назад к Vue Academy