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+ років, десятки проектів з високою складністю. Гарантуємо якість та прозорість процесу. Зв'яжіться з нами, щоб обговорити деталі.