54. Настройка Vitest

Vitest — это современная альтернатива Jest, созданная командой Vite. Она нативно поддерживает ESM, TypeScript и JSX, работая в разы быстрее.

Icon: Zap (Молния)

Описание

Если ваш проект использует Vite, то Vitest — лучший выбор, так как он использует тот же конфиг и те же плагины для трансформации кода.

Mermaid Диаграмма

graph LR
    ViteConfig[vite.config.ts] -->|Shared logic| Vitest[Vitest]
    Vitest -->|Transpile| TSX[TypeScript / JSX]
    Vitest -->|Simulate DOM| JSDOM[jsdom / happy-dom]

Установка

npm install -D vitest @testing-library/react @testing-library/jest-dom jsdom

Конфигурация (vite.config.ts)

import { defineConfig } from 'vitest/config';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  test: {
    globals: true,
    environment: 'jsdom',
    setupFiles: './src/setupTests.ts',
  },
});

Файл настройки (src/setupTests.ts)

import '@testing-library/jest-dom';

Скрипты в package.json

"scripts": {
  "test": "vitest",
  "test:ui": "vitest --ui",
  "coverage": "vitest run --coverage"
}

Почему Vitest?

• Скорость: Мгновенный Hot Module Replacement (HMR) для тестов.
• Совместимость: Почти 100% совместимость с API Jest (describe, it, expect).
• UI Mode: Потрясающий интерактивный интерфейс для запуска тестов в браузере.
• Интеграция: Не нужно настраивать Babel или сложные трансформации вручную.

---

🔗 Полезные ссылки

• React Testing Library: Основы
• Jsx

Практика

Попробуйте примеры в интерактивном редакторе: