Опции монтирования: props, data, computed, methods

Vue Test Utils предоставляет мощный инструмент для юнит-тестирования компонентов Vue, позволяя эмулировать работу компонента в различных состояниях через опции монтирования. Основные опции — props, data, computed и methods — дают контроль над состоянием и поведением компонента без необходимости изменять исходный код.

props

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

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

const wrapper = mount(MyComponent, {
  props: {
    title: 'Пример заголовка',
    isActive: true
  }
})

console.log(wrapper.props().title) // 'Пример заголовка'
console.log(wrapper.props().isActive) // true

Особенности использования props:

  • Значения передаются напрямую в компонент, имитируя родительский компонент.
  • Позволяет проверять реакцию компонента на различные входные данные.
  • Можно использовать для проверки динамического обновления пропсов через setProps:
await wrapper.setProps({ title: 'Новый заголовок' })
expect(wrapper.text()).toContain('Новый заголовок')

data

Опция data используется для установки начального состояния реактивных данных компонента. Она должна быть функцией, возвращающей объект с данными.

const wrapper = mount(MyComponent, {
  data() {
    return {
      counter: 10,
      visible: false
    }
  }
})

expect(wrapper.vm.counter).toBe(10)
expect(wrapper.vm.visible).toBe(false)

Ключевые моменты:

  • Позволяет тестировать поведение компонента в разных состояниях.
  • Не влияет на пропсы, которые передаются через props.
  • Можно изменять данные напрямую через wrapper.setData():
await wrapper.setData({ counter: 20 })
expect(wrapper.vm.counter).toBe(20)
  • Полезно для проверки реактивности и взаимодействия с вычисляемыми свойствами и методами.

computed

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

const wrapper = mount(MyComponent, {
  computed: {
    fullName: () => 'Тестовое Имя'
  }
})

expect(wrapper.vm.fullName).toBe('Тестовое Имя')

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

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

methods

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

const wrapper = mount(MyComponent, {
  methods: {
    fetchData: jest.fn(() => 'заглушка')
  }
})

wrapper.vm.fetchData()
expect(wrapper.vm.fetchData).toHaveBeenCalled()

Применение methods:

  • Позволяет подменять методы заглушками или моками.
  • Удобно для тестирования вызова методов и взаимодействия с событиями.
  • Работает с синхронными и асинхронными функциями.
  • Можно комбинировать с props и data для создания сложных сценариев поведения.

Взаимодействие опций

Опции props, data, computed и methods можно комбинировать для полного контроля над состоянием компонента. Например, можно задать исходные данные, передать пропсы и подменить метод для проверки определенного сценария:

const wrapper = mount(MyComponent, {
  props: { isActive: true },
  data() { return { counter: 0 } },
  computed: { doubled: vm => vm.counter * 2 },
  methods: { increment: jest.fn() }
})

await wrapper.setData({ counter: 5 })
expect(wrapper.vm.doubled).toBe(10)

wrapper.vm.increment()
expect(wrapper.vm.increment).toHaveBeenCalled()

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

Эффективное использование опций монтирования — основа качественного тестирования Vue-компонентов, позволяющая создавать детальные и управляемые сценарии для всех возможных состояний.

Оглавление