Валидация props

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

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

Для тестирования компонентов с пропсами используется метод mount или shallowMount, в которых можно указать объект props:

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

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

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

Проверка корректности переданных props

После монтирования компонента важно убедиться, что props переданы и правильно обработаны. Для этого используется метод props() у wrapper:

expect(wrapper.props('title')).toBe('Тестовый заголовок');
expect(wrapper.props('count')).toBe(5);

Метод props() возвращает либо значение конкретного пропса, либо весь объект пропсов, если аргумент не указан:

expect(wrapper.props()).toEqual({ title: 'Тестовый заголовок', count: 5 });

Это особенно полезно для проверки передачи комплексных объектов или массивов.

Проверка реактивности props

Vue обеспечивает реактивность пропсов, что позволяет тестировать динамическое изменение значений. Для обновления пропсов используется метод setProps:

await wrapper.setProps({ count: 10 });
expect(wrapper.props('count')).toBe(10);

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

Валидация типов и обязательных props

Компоненты Vue могут содержать встроенную валидацию типов и обязательных props через props опцию:

props: {
  title: {
    type: String,
    required: true
  },
  count: {
    type: Number,
    default: 0
  }
}

Vue Test Utils позволяет проверить поведение при неправильных типах:

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

const spy = jest.spyOn(console, 'error').mockImplementation(() => {});

mount(MyComponent, {
  props: { title: 123 } // неверный тип
});

expect(spy).toHaveBeenCalled();

spy.mockRestore();

Ключевой момент: при передаче значения неправильного типа Vue автоматически выводит предупреждение в консоль. Тестирование этого поведения позволяет убедиться, что компонент строго соблюдает контракт с пропсами.

Тестирование дефолтных значений props

Для проверки значений по умолчанию создается компонент без передачи пропсов и проверяется, что дефолтное значение применяется корректно:

const wrapper = mount(MyComponent);
expect(wrapper.props('count')).toBe(0); // значение по умолчанию

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

Проверка валидации с кастомными функциями

Vue позволяет задавать кастомные валидаторы для пропсов:

props: {
  rating: {
    type: Number,
    validator: value => value >= 0 && value <= 5
  }
}

Тестирование в этом случае требует проверки реакций компонента на валидные и невалидные значения:

const wrapper = mount(MyComponent, { props: { rating: 3 } });
expect(wrapper.props('rating')).toBe(3);

const spy = jest.spyOn(console, 'error').mockImplementation(() => {});
mount(MyComponent, { props: { rating: 10 } }); // невалидное значение
expect(spy).toHaveBeenCalled();
spy.mockRestore();

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

Совмещение валидации props и слотов

Иногда проверка props должна учитывать их влияние на рендеринг слотов:

const wrapper = mount(MyComponent, {
  props: { title: 'Заголовок' },
  slots: { default: '<p>Содержимое слота</p>' }
});

expect(wrapper.html()).toContain('Заголовок');
expect(wrapper.html()).toContain('Содержимое слота');

Это демонстрирует, что переданные props корректно передаются в шаблон и влияют на отображение содержимого.

Итоговые рекомендации по валидации props в тестах

  • Использовать props() и setProps() для проверки и изменения значений пропсов.
  • Проверять реактивность и дефолтные значения.
  • Тестировать типы и кастомные валидаторы через проверку консольных предупреждений.
  • Комбинировать проверку props с рендерингом слотов и реактивных данных.
  • Для сложных объектов применять глубокое сравнение через toEqual.

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

Оглавление