Место Vue Test Utils в экосистеме тестирования

Vue Test Utils (VTU) является официальной библиотекой для тестирования компонентов Vue.js. Она предназначена для изолированного и интеграционного тестирования компонентов и взаимодействия между ними. В экосистеме JavaScript тестирования VTU занимает промежуточное место между низкоуровневыми инструментами (например, Jest, Mocha) и высокоуровневыми тестами пользовательского интерфейса (например, Cypress, Playwright).

Основные принципы работы Vue Test Utils

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

Взаимодействие с DOM VTU создает виртуальный DOM с помощью Vue, обеспечивая возможность манипулировать элементами и отслеживать изменения. Это делает тесты реалистичными, но при этом быстрыми, так как отсутствует необходимость запускать полноценный браузер.

Эмуляция событий и пользовательских действий Библиотека поддерживает три вида взаимодействий: имитацию кликов, ввод текста и изменение состояний компонентов. Эти действия запускают реактивные механизмы Vue, позволяя проверить правильность реакций компонента на пользовательские действия.

Основные функции и методы Vue Test Utils

mount и shallowMount

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

Пример:

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

const wrapperFull = mount(MyComponent)
const wrapperShallow = shallowMount(MyComponent)

find и findAll Позволяют находить элементы внутри компонента по CSS-селекторам, атрибутам или компонентам.

  • find возвращает первый найденный элемент.
  • findAll возвращает массив всех соответствующих элементов.
const button = wrapper.find('button')
const inputs = wrapper.findAll('input')

setData, setProps, setValue Методы для изменения состояния компонента и проверки реактивности:

  • setData({ key: value }) — обновляет реактивные данные компонента.
  • setProps({ prop: value }) — изменяет свойства компонента.
  • setValue(value) — изменяет значение формы (input, textarea) и триггерит соответствующие события.

Тестирование жизненного цикла и реактивности

VTU позволяет проверять работу методов жизненного цикла Vue: mounted, created, updated. С помощью моков и spy-функций можно отслеживать вызовы внутренних методов и реакцию на изменение состояния.

const spy = jest.spyOn(MyComponent.methods, 'increment')
wrapper.find('button').trigger('click')
expect(spy).toHaveBeenCalled()

Асинхронные обновления DOM Vue обновляет DOM асинхронно. VTU предоставляет функцию nextTick для ожидания завершения реактивных изменений, что позволяет корректно проверять результаты после обновления состояния.

await wrapper.setData({ count: 1 })
await wrapper.vm.$nextTick()
expect(wrapper.text()).toContain('1')

Работа с событиями и пользовательским вводом

VTU позволяет эмулировать события DOM и настраивать их параметры.

  • trigger(event, options) — вызывает событие на элементе.
  • emitted() — проверяет, какие события компонент сгенерировал и с какими параметрами.
wrapper.find('button').trigger('click')
expect(wrapper.emitted('submit')).toBeTruthy()
expect(wrapper.emitted('submit')[0]).toEqual([{ name: 'test' }])

Интеграция с Jest и другими тестовыми фреймворками

VTU не является фреймворком для выполнения тестов, поэтому обычно используется вместе с Jest или Mocha. Это позволяет комбинировать функционал VTU (рендеринг и взаимодействие с компонентами) с мощными инструментами для ассертирования и мокирования.

  • Jest обеспечивает среду выполнения, таймеры, мокирование модулей.
  • VTU отвечает за создание экземпляров компонентов и взаимодействие с виртуальным DOM.

Пример теста с Jest:

test('проверка клика по кнопке', async () => {
  const wrapper = mount(MyComponent)
  await wrapper.find('button').trigger('click')
  expect(wrapper.text()).toContain('Clicked')
})

Преимущества Vue Test Utils в экосистеме

  • Высокая интеграция с Vue, включая поддержку Vue 2 и Vue 3.
  • Позволяет писать как модульные, так и интеграционные тесты.
  • Поддержка асинхронного реактивного обновления DOM.
  • Полная совместимость с Jest и другими популярными тестовыми фреймворками.
  • Мощные инструменты для проверки событий, свойств и методов компонентов.

VTU позволяет покрывать тестами критические части приложения на Vue без необходимости запускать полноценный браузер или использовать сложные end-to-end решения, что делает тестирование быстрым, предсказуемым и масштабируемым.

Оглавление