Vue Academy · Урок

Модульное тестирование с Vue Test Utils

Пишите модульные тесты компонентов с помощью Vue Test Utils

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

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

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

Монтирование

Функция mount полностью отрисовывает компонент, включая все его дочерние компоненты. Она возвращает объект обёртку с вспомогательными средствами для поиска элементов и взаимодействия с отрисованным результатом.

import { mount } from "@vue/test-utils"
import Counter from "./Counter.vue"

const wrapper = mount(Counter)

shallowMount

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

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

const wrapper = shallowMount(ParentComponent)
// child components are stubbed out

Монтирование и shallowMount

Используйте mount, когда хотите тестировать компонент вместе с его дочерними компонентами, и shallowMount, когда хотите изолировать только этот компонент. Поверхностное монтирование делает тесты сфокусированными и быстрыми.

Поиск элементов

Используйте wrapper.find с селектором CSS, чтобы найти элемент. find возвращает обёртку для этого элемента, которую можно изучать или использовать для взаимодействия с ним.

const button = wrapper.find("button")
const title = wrapper.find(".title")

Проверка отрисованного результата

Проверьте отображаемый текст или HTML, чтобы убедиться, что компонент показывает ожидаемое содержимое.

test("renders the message", () => {
  const wrapper = mount(Greeting, {
    props: { name: "Sam" }
  })
  expect(wrapper.text()).toContain("Hello, Sam")
})

Тестирование свойств

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

const wrapper = mount(UserCard, {
  props: { user: { name: "Lin", role: "Admin" } }
})
expect(wrapper.text()).toContain("Lin")
expect(wrapper.text()).toContain("Admin")

Инициирование событий

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

test("increments on click", async () => {
  const wrapper = mount(Counter)
  await wrapper.find("button").trigger("click")
  expect(wrapper.text()).toContain("1")
})

Установка значений ввода

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

const input = wrapper.find("input")
await input.setValue("hello@example.com")
expect(wrapper.vm.email).toBe("hello@example.com")

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

Когда компонент отправляет событие, wrapper.emitted записывает его. Проверьте, что было отправлено правильное событие с правильными данными.

test("emits submit with form data", async () => {
  const wrapper = mount(LoginForm)
  await wrapper.find("form").trigger("submit")
  expect(wrapper.emitted("submit")).toBeTruthy()
  expect(wrapper.emitted("submit")[0]).toEqual([{ user: "" }])
})

Составление теста

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

import { mount } from "@vue/test-utils"
import TodoInput from "./TodoInput.vue"

test("adds a todo", async () => {
  const wrapper = mount(TodoInput)
  await wrapper.find("input").setValue("Buy milk")
  await wrapper.find("button").trigger("click")
  expect(wrapper.emitted("add")[0]).toEqual(["Buy milk"])
})

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

Проверьте свои знания о Vue Test Utils.

Итоги

Vue Test Utils отрисовывает компоненты с помощью mount (полное дерево) или shallowMount (дочерние компоненты заменены заглушками). Выполняйте поиск с помощью find, моделируйте действия с помощью trigger и setValue (дожидаясь их выполнения), а затем проверяйте text() или emitted(). Передавайте props через параметры монтирования. Далее вы протестируете всё приложение сквозным способом.

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

Урок «Модульное тестирование с Vue Test Utils» бесплатный?

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

Чему я научусь в уроке «Модульное тестирование с Vue Test Utils»?

Пишите модульные тесты компонентов с помощью Vue Test Utils Ты практикуешь Vue Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

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

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

Сколько времени занимает урок «Модульное тестирование с Vue Test Utils»?

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

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

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

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

← Назад к Vue Academy