Переключение между состояниями

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

Монтаж компонента и получение доступа к состоянию

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

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

const wrapper = mount(MyComponent, {
  props: {
    initialValue: 0
  }
})

После монтирования можно получить доступ к реактивным данным компонента через wrapper.vm:

expect(wrapper.vm.counter).toBe(0)

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

Изменение пропсов для симуляции нового состояния

Изменение пропсов компонента через setProps является стандартным способом проверить реакцию на внешние изменения:

await wrapper.setProps({ initialValue: 10 })
expect(wrapper.vm.counter).toBe(10)

Ключевой момент: setProps асинхронен. После вызова необходимо использовать await, чтобы гарантировать обновление реактивных связей компонента и корректное отражение нового состояния.

Манипуляции с реактивными данными

Состояние компонента можно изменять напрямую через wrapper.vm, что позволяет тестировать внутреннюю логику:

wrapper.vm.counter += 5
await wrapper.vm.$nextTick()
expect(wrapper.text()).toContain('5')

Использование $nextTick необходимо для ожидания обновления DOM после изменения реактивных данных. Без этого проверки могут быть выполнены до того, как изменения отразятся на рендере.

Симуляция событий для переключения состояния

Часто состояние компонента изменяется в ответ на события пользователя, например click или input. Для тестирования этого используется метод trigger:

await wrapper.find('button.increment').trigger('click')
expect(wrapper.vm.counter).toBe(1)

Если компонент имеет несколько элементов, влияющих на состояние, find или findAll позволяют локализовать действие к конкретному элементу:

const buttons = wrapper.findAll('button')
await buttons[1].trigger('click')
expect(wrapper.vm.counter).toBe(2)

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

В компонентах Vue часто есть вычисляемые свойства, которые зависят от состояния. Для тестирования их реакции на изменения:

wrapper.vm.counter = 3
await wrapper.vm.$nextTick()
expect(wrapper.vm.doubleCounter).toBe(6)

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

Асинхронные операции и переключение состояний

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

await wrapper.vm.fetchData()
await wrapper.vm.$nextTick()
expect(wrapper.vm.items.length).toBeGreaterThan(0)

Если состояние зависит от Promise или setTimeout, важно дождаться завершения всех асинхронных операций через await или flushPromises.

Комбинирование методов изменения состояния

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

await wrapper.setProps({ initialValue: 5 })
await wrapper.find('button.increment').trigger('click')
wrapper.vm.counter += 2
await wrapper.vm.$nextTick()

expect(wrapper.vm.counter).toBe(8)
expect(wrapper.text()).toContain('8')

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

Снапшоты и визуальная проверка состояний

Для проверки того, как разные состояния отражаются в DOM, используется метод html() или снапшоты:

expect(wrapper.html()).toMatchSnapshot()

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

Рекомендации по переключению состояний

  • Всегда использовать await с асинхронными методами setProps, trigger и $nextTick.
  • Проверять состояние через wrapper.vm перед и после изменений для уверенности в корректной работе реактивности.
  • Комбинировать симуляцию событий и прямое изменение данных для моделирования сложных сценариев.
  • Использовать find и findAll для локализации влияния на конкретные элементы.
  • Применять снапшоты для визуального контроля состояний.

Переключение между состояниями — это центральная часть тестирования компонентов Vue. Грамотное управление состоянием, комбинирование асинхронных действий и проверка реактивных изменений позволяет создавать надёжные, легко поддерживаемые тесты, полностью покрывающие поведение компонентов в динамических условиях.

Оглавление