Шаг 0: Предварительные условия. Убедитесь, что ваш проект использует Vite в качестве сборщика. Проверьте наличие файла `vite.config.js` или `vite.config.ts` в корне. Также убедитесь, что у вас установлен Node.js версии 16 или выше. Vitest работает и с другими сборщиками, но конфигурация будет сложнее. Мы рассматриваем нативный сценарий для экосистемы Vite.
Шаг 1: Установка. Установите Vitest как зависимость для разработки. Вы можете сделать это с помощью npm, yarn, pnpm или bun. Рекомендуется использовать тот же менеджер пакетов, что и в основном проекте.
```
npm install -D vitest
```
Или для TypeScript-проектов, если вы хотите иметь типы глобально доступными в тестовых файлах, можно также установить:
```
npm install -D @vitest/ui @types/node
```
Пакет `@vitest/ui` предоставляет красивый веб-интерфейс для просмотра результатов тестов.
Шаг 2: Базовая конфигурация. Vitest разработан для максимального согласия с конфигом Vite. Самый простой способ — расширить ваш `vite.config.ts`. Добавьте блок `test` в конфигурацию.
```javascript
// vite.config.ts
import { defineConfig } from 'vitest/config';
import vue from '@vitejs/plugin-vue'; // или react() и т.д.
export default defineConfig({
plugins: [vue()],
test: {
// Виртуальное окружение для тестов (аналог jsdom в Jest)
environment: 'jsdom',
// Глобально доступные импорты (например, для тестовых утилит)
globals: true,
// Поддержка файлов TypeScript и JSX в тестах
transformMode: {
web: [/\.[jt]sx?$/],
},
},
});
```
Если вы не хотите менять основной конфиг Vite, можно создать отдельный файл `vitest.config.ts`, который импортирует настройки из `vite.config.ts` и расширяет их. Ключевая опция `environment: 'jsdom'` необходима, если ваши тесты взаимодействуют с DOM (например, тестируют компоненты Vue/React). Для чистого Node.js кода можно использовать `environment: 'node'` (значение по умолчанию) или даже `'happy-dom'` как более легковесную альтернативу jsdom.
Шаг 3: Настройка скриптов в package.json. Добавьте удобные скрипты для запуска тестов.
```json
"scripts": {
"test": "vitest",
"test:ui": "vitest --ui",
"test:coverage": "vitest --coverage"
}
```
- `npm test` или `npm run test`: Запустит тесты в режиме watch (следит за изменениями файлов).
- `npm run test:ui`: Запустит красивый веб-интерфейс для анализа тестов.
- `npm run test:coverage`: Сгенерирует отчет о покрытии кода тестами (потребуется дополнительная установка пакета `@vitest/coverage-c8` или `@vitest/coverage-istanbul`).
```javascript
// math.test.ts
import { describe, it, expect } from 'vitest';
import { sum, multiply } from './math';
describe('Математические функции', () => {
it('должна корректно складывать числа', () => {
expect(sum(1, 2)).toBe(3);
expect(sum(-1, 5)).toBe(4);
});
it('должна корректно умножать числа', () => {
expect(multiply(3, 4)).toBe(12);
});
});
```
Запустите `npm test`. Vitest обнаружит новый файл, выполнит тесты и выдаст результат в терминале. Вы сразу ощутите скорость его работы благодаря использованию того же конвейера, что и Vite для разработки.
Шаг 5: Тестирование компонентов (на примере Vue/React). Для тестирования компонентов вам понадобятся дополнительные библиотеки. Для Vue это `@vue/test-utils`, для React — `@testing-library/react`. Установите нужную.
```
# Для Vue
npm install -D @vue/test-utils jsdom
# Для React
npm install -D @testing-library/react jsdom
```
Убедитесь, что в конфиге Vitest указано `environment: 'jsdom'`. Пример теста для Vue-компонента:
```javascript
// MyComponent.spec.ts
import { describe, it, expect } from 'vitest';
import { mount } from '@vue/test-utils';
import MyComponent from './MyComponent.vue';
describe('MyComponent', () => {
it('отображает переданный пропс', () => {
const wrapper = mount(MyComponent, {
props: { msg: 'Hello Vitest' },
});
expect(wrapper.text()).toContain('Hello Vitest');
});
});
```
Vitest, благодаря интеграции с Vite, способен напрямую компилировать `.vue` или `.jsx` файлы без дополнительной сложной конфигурации.
Шаг 6: Продвинутая конфигурация и фичи. Изучите другие мощные возможности Vitest:
- Моки (Mocking): Vitest имеет встроенную систему моков с API `vi.fn()`, `vi.spyOn()`, `vi.mock()`. Она работает прозрачно с ES-модулями.
- Снапшоты (Snapshots): Полная поддержка `toMatchSnapshot()`.
- Тестирование с таймерами: Утилиты `vi.useFakeTimers()`, `vi.advanceTimersByTime()`.
- Конфигурационные хуки: `setupFiles` — для выполнения кода перед запуском тестов (например, настройка глобальных полифиллов).
- Интеграция с инструментами: Легко интегрируется с инструментами CI/CD. Флаг `--run` отключает watch-режим для CI.
- Замените `jest` на `vitest` в импортах и конфигурации.
- Перенесите конфигурацию из `jest.config.js` в блок `test` файла `vite.config.ts`. Многие опции имеют аналоги.
- Проверьте моки: глобальные моки через `vi.mock` работают иначе. Внимательно изучите документацию.
- Запустите тесты и исправьте ошибки, связанные с окружением (jsdom) или путями к модулям.
Комментарии (14)