Изменение props (setProps)

В Vue-компонентах props представляют собой основной механизм передачи данных от родителя к дочернему компоненту. При тестировании важно уметь имитировать изменение этих данных, чтобы проверить реакцию компонента на новые значения. Для этого в Vue Test Utils используется метод setProps.

Синтаксис и базовое использование

Метод setProps вызывается на объекте wrapper, который представляет смонтированный компонент. Он принимает объект с ключами, соответствующими именам props, и значениями, которые нужно установить.

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

const wrapper = mount(MyComponent, {
  props: {
    title: 'Начальное значение'
  }
})

// Изменение значения prop
await wrapper.setProps({ title: 'Новое значение' })

expect(wrapper.text()).toContain('Новое значение')

Особенности:

  • setProps возвращает Promise, поэтому необходимо использовать await или then для ожидания завершения асинхронного обновления.
  • Обновление props инициирует реактивное обновление DOM, аналогичное поведению компонента в реальном приложении.

Изменение нескольких props одновременно

Метод поддерживает передачу нескольких свойств одновременно:

await wrapper.setProps({ title: 'Заголовок', count: 5 })

expect(wrapper.text()).toContain('Заголовок')
expect(wrapper.find('.count').text()).toBe('5')

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

Реакция дочерних компонентов на изменение props

При наличии вложенных компонентов setProps обновляет данные только у тестируемого компонента. Для проверки передачи изменённых props во вложенные компоненты необходимо использовать shallowMount или проверять props дочернего компонента через wrapper.findComponent.

const parentWrapper = mount(ParentComponent, {
  props: { userName: 'Alice' }
})

await parentWrapper.setProps({ userName: 'Bob' })

const childWrapper = parentWrapper.findComponent(ChildComponent)
expect(childWrapper.props('userName')).toBe('Bob')

Влияние на вычисляемые свойства и слоты

Изменение props через setProps автоматически триггерит перерасчёт computed properties и watchers. Если компонент использует слоты с реактивными данными, изменения также отразятся на их содержимом.

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

await wrapper.setProps({ active: true })

expect(wrapper.vm.isActive).toBe(true) // computed property

Особенности асинхронного обновления

Метод setProps работает асинхронно, потому что Vue обновляет DOM в следующем тикe. Прямое обращение к DOM сразу после вызова setProps может вернуть старое состояние:

await wrapper.setProps({ title: 'Новое' })
console.log(wrapper.text()) // корректное значение после await

Если await опустить, проверка текста может вернуть старое значение.

Ограничения использования

  • Не влияет на родительский компонент: setProps не изменяет props родителя, а только у смонтированного экземпляра.
  • Не используется для локального состояния: Для изменения data компонента нужно применять setData.
  • Только реактивные props: Если проп не объявлен в props компонента, setProps не будет работать и выдаст предупреждение.

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

  1. Всегда использовать await для ожидания полного обновления.
  2. Для комплексных компонентов проверять реакцию как внутреннего состояния, так и дочерних компонентов.
  3. Комбинировать setProps с setData для имитации комплексных сценариев взаимодействия props и локального состояния.
  4. Использовать метод для тестирования реактивности watchers, особенно если пропы используются для триггера побочных эффектов.

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

const wrapper = mount(MyComponent, {
  props: { visible: false, items: [] }
})

// Проверка скрытого состояния
expect(wrapper.classes()).not.toContain('visible')

// Изменение props
await wrapper.setProps({ visible: true, items: ['a', 'b', 'c'] })

// Проверка обновлённого состояния и DOM
expect(wrapper.classes()).toContain('visible')
expect(wrapper.findAll('li').length).toBe(3)

Этот пример демонстрирует, как с помощью setProps тестировать динамические изменения состояния компонента, зависящие от нескольких props.

Метод setProps является фундаментальным инструментом для тестирования реактивного поведения Vue-компонентов и позволяет точно моделировать сценарии изменения входных данных, обеспечивая надежность и предсказуемость тестов.

Оглавление