Получение значений свойств компонента

При тестировании компонентов Vue крайне важно иметь возможность получать значения свойств (props) и реактивного состояния компонента. Vue Test Utils предоставляет для этого набор методов, позволяющих безопасно и детально проверять поведение компонента без необходимости вмешательства в его внутреннюю реализацию.

Основные методы для получения свойств

wrapper.props() Метод props() используется для получения текущих значений всех свойств компонента. Возвращается объект, где ключи — имена props, а значения — их текущие значения.

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

const wrapper = mount(MyComponent, {
  props: {
    title: 'Тестовый заголовок',
    visible: true
  }
})

console.log(wrapper.props())
// Выведет: { title: 'Тестовый заголовок', visible: true }

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

console.log(wrapper.props('title')) // 'Тестовый заголовок'

Изменение и проверка props после монтирования

После создания компонента через mount или shallowMount возможно изменение props через метод setProps. Это особенно полезно для тестирования реактивного поведения компонента при изменении входных данных.

await wrapper.setProps({ title: 'Новый заголовок' })
expect(wrapper.props('title')).toBe('Новый заголовок')

Важно помнить, что setProps асинхронный, и любые проверки состояния, зависящего от props, следует выполнять после await wrapper.setProps(...).

Доступ к реактивному состоянию и вычисляемым свойствам

Для получения текущего состояния компонента используется свойство vm (Vue instance):

console.log(wrapper.vm.title) // доступ к data или computed

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

const wrapper = mount(MyComponent, {
  props: { count: 5 }
})

console.log(wrapper.vm.doubleCount) // допустим, computed: doubleCount() { return this.count * 2 }

Особенности работы с defineProps в Composition API

В компонентах, написанных с использованием Composition API и <script setup>, props можно получить через wrapper.props() аналогично Options API. Доступ к ним через vm возможен только для локальных переменных или реактивных объектов, определённых в setup.

const wrapper = mount(MyComponent, {
  props: { user: { name: 'Иван' } }
})

console.log(wrapper.props('user').name) // 'Иван'

Проверка типов и дефолтных значений props

Vue Test Utils позволяет убедиться, что props получили правильные значения по умолчанию, если они не были переданы:

const wrapper = mount(MyComponent)

expect(wrapper.props('visible')).toBe(true) // дефолтное значение в компоненте

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

Практика глубоких проверок props

Для сложных объектов или массивов props часто используется deep comparison с помощью Jest или других assertion-библиотек:

const wrapper = mount(MyComponent, {
  props: { items: [{ id: 1 }, { id: 2 }] }
})

expect(wrapper.props('items')).toEqual([{ id: 1 }, { id: 2 }])

Это гарантирует, что структура данных соответствует ожиданиям, а не только ссылка на объект.

Рекомендации по тестированию props

  1. Использовать wrapper.props() для проверки текущих значений props.
  2. Для изменений props применять await wrapper.setProps(...) и затем проверять реактивность.
  3. Для Composition API обращаться к props через wrapper.props() вместо vm, если props определены через defineProps.
  4. Проверять дефолтные значения props для предотвращения неожиданных багов.
  5. Для сложных объектов и массивов применять глубокие сравнения.

Вывод значения props через шаблон

Иногда необходимо убедиться, что prop корректно отображается в шаблоне. Для этого используют методы поиска элементов (find, findComponent) и текстовое содержимое:

const wrapper = mount(MyComponent, {
  props: { title: 'Заголовок' }
})

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

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

Заключение по практике

Получение и проверка props — основа unit-тестирования Vue компонентов. Методы props(), setProps() и доступ через vm позволяют тестировать как статические значения, так и динамическое поведение компонента, обеспечивая надежность и предсказуемость при любых изменениях входных данных.

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

Оглавление