Инструменты для визуализации

Vue Test Utils (VTU) — официальный инструмент для тестирования компонентов Vue.js. Он предоставляет API для монтирования компонентов, взаимодействия с ними и проверки их состояния. Основная идея заключается в изоляции компонента и проверке его поведения без необходимости рендерить весь интерфейс приложения.

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

Для начала тестирования необходимо монтировать компонент. Для этого используется функция mount:

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

const wrapper = mount(MyComponent)

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

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

const wrapper = shallowMount(MyComponent)

shallowMount подходит для unit-тестов, когда важно проверить только поведение конкретного компонента, не затрагивая его потомков.

Работа с пропсами и слотами

Передача пропсов осуществляется через объект props:

const wrapper = mount(MyComponent, {
  props: {
    title: 'Заголовок теста'
  }
})

Для слотов используется объект slots:

const wrapper = mount(MyComponent, {
  slots: {
    default: '<span>Контент слота</span>'
  }
})

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

Доступ к элементам и их свойствам

Vue Test Utils предоставляет методы для поиска элементов внутри компонента:

wrapper.find(selector) — возвращает первый элемент, соответствующий селектору.
wrapper.findAll(selector) — возвращает массив всех элементов, соответствующих селектору.

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

const button = wrapper.find('button')
expect(button.text()).toBe('Нажми меня')
button.trigger('click')

Метод trigger имитирует события DOM. Можно передавать тип события и дополнительные параметры:

button.trigger('click', { button: 0 })

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

Состояние компонента хранится в его реактивных данных и вычисляемых свойствах. Для проверки используется объект vm:

expect(wrapper.vm.count).toBe(0)
wrapper.vm.increment()
expect(wrapper.vm.count).toBe(1)

vm — это экземпляр Vue-компонента, через который можно напрямую вызывать методы, изменять данные и проверять вычисляемые свойства.

Асинхронные операции

Для компонентов, использующих асинхронные операции (например, API-запросы), необходимо учитывать реактивность и таймеры:

await wrapper.vm.fetchData()
await wrapper.vm.$nextTick()
expect(wrapper.text()).toContain('Данные загружены')

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

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

VTU позволяет прослушивать события, эмитируемые компонентом:

wrapper.vm.$emit('custom-event', 123)
expect(wrapper.emitted('custom-event')[0]).toEqual([123])

Метод emitted возвращает объект с событиями и их аргументами, что удобно для проверки коммуникации между компонентами.

Моки и стабы

Для изоляции тестов используются моки и стабы:

Моки методов:

const wrapper = mount(MyComponent, {
  methods: {
    fetchData: jest.fn()
  }
})

Стабы дочерних компонентов:

const wrapper = mount(MyComponent, {
  global: {
    stubs: {
      ChildComponent: true
    }
  }
})

Это ускоряет тестирование и предотвращает побочные эффекты.

Интеграция с Jest

Vue Test Utils идеально интегрируется с Jest. В сочетании с jest.fn() можно проверять вызовы методов, аргументы событий и изменение состояния:

const mock = jest.fn()
wrapper.vm.doSomething = mock
wrapper.vm.doSomething('test')
expect(mock).toHaveBeenCalledWith('test')

Визуальная проверка компонента

Для визуализации состояния компонента используется метод html():

expect(wrapper.html()).toContain('<span>Контент слота</span>')

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