Передача props при монтировании

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

Использование props через mount и shallowMount

Vue Test Utils предоставляет два основных метода для создания экземпляра компонента: mount и shallowMount. Оба метода принимают объект опций, одним из которых является props. Пример базового синтаксиса:

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

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

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

expect(wrapper.text()).toContain('Тестовый заголовок');
expect(wrapper.text()).toContain('5');

Передача динамических props

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

await wrapper.setProps({ count: 10 });
expect(wrapper.text()).toContain('10');

Ключевые моменты при использовании setProps:

  • Изменение props триггерит повторный рендер компонента.
  • Метод работает как с одиночными свойствами, так и с целым объектом props.
  • Для асинхронных эффектов, зависящих от изменения props, следует использовать await для ожидания завершения обновления.

Объединение props с другими опциями

При монтировании компонента props можно комбинировать с другими опциями, такими как slots, global или attrs. Пример передачи props вместе с слотами:

const wrapper = mount(MyComponent, {
  props: { title: 'Пример' },
  slots: {
    default: '<p>Слот-контент</p>'
  }
});

expect(wrapper.text()).toContain('Пример');
expect(wrapper.html()).toContain('<p>Слот-контент</p>');

Типизация props

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

const wrapper = mount(MyComponent, {
  props: { count: 'не число' } // если count ожидается числом
});

// Проверка наличия предупреждения или fallback-значения
expect(wrapper.props('count')).toBe('не число');

Использование функции propsData (Vue 2)

В Vue 2 для передачи props использовалась опция propsData. В Vue 3 она была заменена на стандартный props. Пример для Vue 2:

const wrapper = mount(MyComponent, {
  propsData: { title: 'Тест' }
});

Для новых проектов рекомендуется использовать современный синтаксис props, совместимый с Vue 3.

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

  1. Изолированное тестирование пропсов — для каждого prop создавать отдельный тест и проверять его влияние на рендер.
  2. Тестирование реактивности — проверять изменение DOM при изменении props через setProps.
  3. Граничные значения — использовать как корректные, так и некорректные типы и значения, чтобы выявить потенциальные ошибки.
  4. Комбинации с слотами и атрибутами — проверять совместимость props с другими входными данными компонента.

Передача props при монтировании является фундаментальной частью unit-тестирования Vue-компонентов. Корректное использование mount, shallowMount и setProps позволяет создавать надёжные и предсказуемые тесты, обеспечивая уверенность в поведении компонентов при любых входных данных.

Оглавление