Unit-тестирование Vue 3 компонентов: настройка Vue Test Utils и Vitest

Тестирование Vue-компонентов с Vue Test Utils

Вы обновили компонент корзины, а в продакшене — ошибка: количество товаров не пересчитывается. Без unit-тестов вы узнаёте о багах от пользователей, а поиск причины занимает часы. Vue Test Utils — официальная библиотека для тестирования Vue 3 компонентов — решает эту проблему: изолированное монтирование, имитация событий, проверка реактивности без запуска всего приложения. Мы, команда TrueTech, настраиваем полный цикл тестирования под ключ: от выбора стека до CI-пайплайна. Гарантируем покрытие ключевых сценариев и обучение команды, опираясь на 5+ лет опыта работы с Vue экосистемой и более 50 внедрённых проектов.

Свяжитесь с нами, чтобы оценить текущее покрытие и выбрать стратегию тестирования.

Почему стоит автоматизировать тестирование Vue-компонентов?

Проверять каждый компонент вручную перед релизом — долго и ненадёжно. Unit-тесты автоматизируют проверку: рендер, эмиты, состояние, edge-кейсы. Согласно официальной документации Vue Test Utils, библиотека предназначена для изолированного тестирования компонентов. Vue Test Utils в связке с Vitest работает в 5 раз быстрее Cypress Component Test Runner для простых сценариев — не нужен браузер. Тесты запускаются локально и в CI, давая быструю обратную связь разработчикам. Регрессионное тестирование ускоряется на 80%, а время поиска багов сокращается на 30% — это подтверждает практика наших проектов. В одном из проектов мы сократили время регрессионного прогона с 3 часов до 30 минут (в 6 раз).

Как настроить тестирование Vue 3 с Vue Test Utils?

Пошаговая инструкция настройки

1. Установите зависимости: npm install -D @vue/test-utils vitest jsdom.
2. Создайте vitest.config.ts с предложенной конфигурацией:

import { defineConfig } from 'vite'; import vue from '@vitejs/plugin-vue'; export default defineConfig({ plugins: [vue()], test: { environment: 'jsdom', globals: true, }, }); 

3. Напишите первый тест. Пример проверки рендера и эмита:

import { mount } from '@vue/test-utils'; import UserCard from './UserCard.vue'; describe('UserCard', () => { it('renders user name', () => { const wrapper = mount(UserCard, { props: { user: { name: 'Иван Петров', email: '[email protected]' } }, }); expect(wrapper.text()).toContain('Иван Петров'); }); it('emits delete event with user id', async () => { const wrapper = mount(UserCard, { props: { user: { id: 42, name: 'Иван' } }, }); await wrapper.find('[data-testid="delete-btn"]').trigger('click'); expect(wrapper.emitted('delete')).toBeTruthy(); expect(wrapper.emitted('delete')![0]).toEqual([42]); }); }); 

4. Запустите тесты: npx vitest.

Какие сценарии покрывают unit-тесты?

Тестирование взаимодействия с хранилищем. Если компонент зависит от Pinia, перед каждым тестом инициализируйте хранилище:

import { setActivePinia, createPinia } from 'pinia'; import { useCartStore } from '@/stores/cart'; describe('CartButton', () => { beforeEach(() => setActivePinia(createPinia())); it('adds item to cart', async () => { const wrapper = mount(CartButton, { props: { productId: 1 }, global: { plugins: [createPinia()] }, }); const store = useCartStore(); await wrapper.find('button').trigger('click'); expect(store.items).toHaveLength(1); }); }); 

Асинхронная загрузка данных. Используйте vi.mock() и flushPromises() для мока API:

it('loads data after API call', async () => { vi.mock('@/api', () => ({ fetchUser: vi.fn().mockResolvedValue({ name: 'Мария' }), })); const wrapper = mount(UserProfile, { props: { userId: 1 } }); expect(wrapper.find('[data-testid="loading"]').exists()).toBe(true); await flushPromises(); expect(wrapper.text()).toContain('Мария'); }); 

Слоты и стабы. Проверьте рендер слотов и изолируйте дочерние компоненты через shallowMount:

it('renders default slot', () => { const wrapper = mount(Card, { slots: { default: '<p data-testid="slotted">Содержимое</p>' }, }); expect(wrapper.find('[data-testid="slotted"]').exists()).toBe(true); }); it('uses shallowMount to stub children', () => { const wrapper = shallowMount(ParentComponent); // дочерние компоненты автоматически стабируются }); 

Composables тестируются без монтирования — просто вызывайте функцию и проверяйте результат. Например, для хука валидации формы: передайте поля, вызовите validate() и проверьте ошибки.

Как избежать типичных ошибок при написании тестов?

• Не забывайте сбрасывать состояние Pinia в beforeEach: setActivePinia(createPinia()). Иначе тесты будут влиять друг на друга.
• Для асинхронных операций всегда используйте flushPromises() после мока, иначе тест может завершиться до выполнения.
• Используйте data-testid атрибуты для поиска элементов — это стабильнее, чем CSS-классы или текст.
• При тестировании слотов не забывайте передавать контент через slots: { default: '...' }.

Настройка тестирования под ключ: что входит

• Анализ текущего проекта и выбор стека (Vitest + Vue Test Utils или Jest).
• Настройка виртуального окружения (jsdom) и конфигурации vitest.
• Написание тестов для 20–30 ключевых компонентов: монтирование, события, состояния, асинхронные операции.
• Создание моков для API и хранилищ.
• Интеграция тестов в CI (GitLab CI / GitHub Actions / Bitbucket Pipelines).
• Документация по написанию новых тестов и метрикам покрытия.
• Обучение команды: 2-часовой воркшоп по написанию unit-тестов.

Сравнение методов тестирования Vue-компонентов

Этапы настройки тестирования под ключ

Сроки реализации

Настройка окружения, написание тестов и интеграция в CI для типового Vue-проекта занимают от 4 до 7 дней. Точная оценка зависит от сложности компонентов и объёма legacy-кода.

Получите консультацию по тестированию вашего Vue-проекта — мы оценим текущее покрытие, поможем выбрать стратегию и настроим быстрый пайплайн. Опыт работы с Vue — 5+ лет, десятки проектов с высокой сложностью. Гарантируем качество и прозрачность процесса. Свяжитесь с нами, чтобы обсудить детали.