Разработка Unit-тестов для компонентов (Vue Test Utils)

Разработка Unit-тестов для компонентов (Vue Test Utils)

Vue Test Utils — официальная библиотека для тестирования Vue 3 компонентов. Работает с Vitest (рекомендуется) или Jest. Монтирует компонент в изолированном окружении, позволяет проверять рендер, события и реактивность.

Настройка (Vue 3 + Vitest)

npm install -D @vue/test-utils vitest jsdom @vitejs/plugin-vue

// vitest.config.ts
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
    plugins: [vue()],
    test: {
        environment: 'jsdom',
        globals: true,
    },
});

Базовое монтирование

import { mount, shallowMount } 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('Иван Петров');
        expect(wrapper.find('[data-testid="email"]').text()).toBe('[email protected]');
    });

    it('emits delete event', 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]);
    });
});

Тестирование с Pinia store

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();
        expect(store.items).toHaveLength(0);

        await wrapper.find('button').trigger('click');
        expect(store.items).toHaveLength(1);
    });
});

Тестирование асинхронных компонентов

it('loads and displays data', 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(); // из '@vue/test-utils'

    expect(wrapper.find('[data-testid="loading"]').exists()).toBe(false);
    expect(wrapper.text()).toContain('Мария');
});

Тестирование слотов

it('renders default slot', () => {
    const wrapper = mount(Card, {
        slots: {
            default: '<p data-testid="slotted">Содержимое</p>',
            header: 'Заголовок карточки',
        },
    });

    expect(wrapper.find('[data-testid="slotted"]').exists()).toBe(true);
    expect(wrapper.find('.card-header').text()).toBe('Заголовок карточки');
});

Стабы для дочерних компонентов

// shallowMount — автоматически стабирует дочерние компоненты
const wrapper = shallowMount(ParentComponent);
// Дочерние компоненты рендерятся как <child-component-stub>

// Явные стабы
const wrapper = mount(ParentComponent, {
    global: {
        stubs: {
            BaseIcon: { template: '<span></span>' },
            RouterLink: { template: '<a><slot /></a>' },
        },
    },
});

Тестирование composables

// composables/useForm.test.ts
import { useForm } from './useForm';

test('validates email field', () => {
    const { fields, validate } = useForm({
        email: { value: '', rules: ['required', 'email'] },
    });

    fields.email.value = 'not-an-email';
    const isValid = validate();

    expect(isValid).toBe(false);
    expect(fields.email.error).toBe('Введите корректный email');
});

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

Настройка + написание тестов для 20–30 компонентов существующего Vue-проекта: 4–7 дней.