Изменение props с помощью setProps

В Vue Test Utils props компонента можно динамически изменять во время тестирования с помощью метода setProps. Этот подход позволяет проверять реактивность компонентов и их поведение при изменении входных данных.

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

const wrapper = mount(MyComponent, {
  props: {
    title: 'Начальный заголовок'
  }
})

В этом примере компонент монтируется с пропсом title.

Использование setProps

Метод setProps принимает объект, где ключи — имена пропсов, а значения — новые данные. После вызова setProps Vue автоматически обновляет компонент и пересчитывает все реактивные зависимости.

await wrapper.setProps({ title: 'Обновлённый заголовок' })
expect(wrapper.text()).toContain('Обновлённый заголовок')

Важно помнить, что setProps асинхронен, так как изменения пропсов вызывают реактивное обновление DOM. Использование await гарантирует, что все обновления завершены перед проверкой состояния компонента.

Проверка реактивности дочерних компонентов

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

const Parent = {
  template: `<Child :message="message"/>`,
  components: { Child },
  props: ['message']
}

const wrapper = mount(Parent, {
  props: { message: 'Привет' }
})

await wrapper.setProps({ message: 'Пока' })
expect(wrapper.findComponent(Child).props('message')).toBe('Пока')

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

Ограничения и особенности setProps

  1. Только существующие пропсы: setProps может обновлять только те пропсы, которые объявлены в компоненте. Любая попытка добавить новый пропс через setProps приведёт к предупреждению Vue.
  2. Асинхронность: изменения пропсов не применяются мгновенно в DOM. Для корректного тестирования необходимо использовать await или nextTick.
  3. Не заменяет реактивные данные напрямую: setProps не изменяет состояние data или computed, только входные значения через пропсы.

Сценарии использования

  • Тестирование условий рендеринга: изменение пропсов позволяет проверять условные блоки (v-if, v-show) и динамическое отображение элементов.
  • Валидация методов и вычисляемых свойств: если методы или computed зависят от пропсов, setProps позволяет проверить реакцию на новые значения.
  • Интеграционные проверки компонентов: при передаче пропсов в дочерние компоненты можно убедиться, что обновления корректно доходят до всех уровней и интерфейс реагирует на изменения.

Пример комплексного теста

const wrapper = mount(MyComponent, {
  props: {
    count: 0,
    active: false
  }
})

// Проверка начального состояния
expect(wrapper.text()).toContain('0')
expect(wrapper.classes()).not.toContain('active')

// Изменение пропсов
await wrapper.setProps({ count: 5, active: true })

// Проверка реактивности
expect(wrapper.text()).toContain('5')
expect(wrapper.classes()).toContain('active')

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

Взаимодействие с асинхронными эффектами

Если изменение пропса вызывает асинхронные действия (например, watch или API-вызовы), необходимо учитывать задержку реактивного обновления:

await wrapper.setProps({ value: 'новое значение' })
await nextTick()
expect(wrapper.vm.computedValue).toBe('обновлённое значение')

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

Практические рекомендации

  • Всегда использовать await или nextTick после setProps для корректного тестирования.
  • Для комплексных компонентов проверять изменения на уровне DOM и props дочерних компонентов.
  • Не полагаться на setProps для изменения локального состояния компонента — это инструмент исключительно для входных данных.

Метод setProps является ключевым инструментом для тестирования реактивности компонентов Vue, позволяя моделировать изменения данных и проверять поведение интерфейса в условиях динамических пропсов.

Оглавление