Уведомления о результатах

Vue Test Utils (VTU) — официальный инструмент для тестирования компонентов Vue.js. Он предоставляет API для рендеринга компонентов, взаимодействия с ними и проверки их состояния. Основная цель — изолированное тестирование логики, реактивности и визуального представления компонентов.

Монтирование компонентов

Для тестирования компонента сначала необходимо его смонтировать с помощью функции mount или shallowMount.

mount полностью рендерит компонент вместе с его дочерними компонентами.
shallowMount рендерит компонент с заглушками для дочерних компонентов, что ускоряет тестирование и снижает сложность.

Пример:

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

const wrapper = mount(Notification, {
  props: {
    message: 'Тестовое уведомление',
    type: 'success'
  }
});

После монтирования можно проверять наличие элементов, текст, атрибуты и классы.

Проверка содержимого и стилей

Vue Test Utils предоставляет методы для проверки DOM-компонентов:

text() — возвращает текст компонента.
html() — возвращает HTML-разметку.
attributes() — проверяет наличие атрибутов.
classes() — проверяет CSS-классы.

Пример проверки уведомления:

expect(wrapper.text()).toContain('Тестовое уведомление');
expect(wrapper.classes()).toContain('success');

Тестирование событий

Компоненты часто взаимодействуют через события. VTU позволяет:

прослушивать события с помощью emitted();
симулировать пользовательские действия через trigger().

Пример: проверка события закрытия уведомления:

wrapper.find('button.close').trigger('click');
expect(wrapper.emitted()).toHaveProperty('close');

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

expect(wrapper.emitted('close')[0]).toEqual([]);

Работа с props и реактивностью

Props — основной механизм передачи данных в компоненты. VTU позволяет проверять реакцию компонента на их изменение:

await wrapper.setProps({ message: 'Новое уведомление' });
expect(wrapper.text()).toContain('Новое уведомление');

Мокинг зависимостей

Компоненты часто используют сторонние функции или сервисы. Для изоляции тестов используют мокинг:

Моки через Jest:

jest.mock('@/services/notificationService', () => ({
  send: jest.fn()
}));

Передача функций через props:

const mockHandler = jest.fn();
const wrapper = mount(Notification, {
  props: { onClose: mockHandler }
});
wrapper.find('button.close').trigger('click');
expect(mockHandler).toHaveBeenCalled();

Асинхронные операции

Многие уведомления закрываются автоматически или получают данные с сервера. VTU работает с асинхронностью через nextTick и await:

import { nextTick } from 'vue';

wrapper.setProps({ visible: true });
await nextTick();
expect(wrapper.classes()).toContain('visible');

Для таймеров используется Jest fake timers:

jest.useFakeTimers();
wrapper.vm.showNotification();
jest.advanceTimersByTime(3000);
expect(wrapper.emitted('close')).toBeTruthy();

Снимки (Snapshot testing)

Snapshot-тесты фиксируют текущую структуру компонента для последующих проверок. Это удобно для уведомлений, где важен внешний вид:

expect(wrapper.html()).toMatchSnapshot();

Комбинация методов

Полноценные тесты уведомлений обычно комбинируют все методы:

рендеринг с разными props;
проверка отображения текста и классов;
симуляция событий клика и закрытия;
проверка асинхронных изменений;
сравнение со снимком.

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

const wrapper = mount(Notification, { props: { message: 'Привет', type: 'info', visible: true } });
expect(wrapper.text()).toBe('Привет');
expect(wrapper.classes()).toContain('info');

await wrapper.setProps({ message: 'Обновлено' });
expect(wrapper.text()).toBe('Обновлено');

wrapper.find('button.close').trigger('click');
expect(wrapper.emitted('close')).toBeTruthy();