No history yet

Настройка Vitest и TypeScript

Интеграция Vitest в ваш проект

При тестировании современных веб-приложений на React или Next.js важны скорость и удобство. Vitest — это современный фреймворк для тестирования, который идеально подходит для проектов, использующих Vite. В отличие от Jest, Vitest изначально спроектирован для работы с ES-модулями (ESM), что устраняет множество проблем с конфигурацией, характерных для старых инструментов. Его архитектура обеспечивает почти мгновенную обратную связь во время разработки.

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

Установка и настройка

Начнем с установки необходимых зависимостей. Нам понадобится сам vitest, среда для эмуляции DOM, например, jsdom, и @testing-library/react для рендеринга и взаимодействия с компонентами.

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

Теперь создайте файл vitest.config.ts в корне вашего проекта. Этот файл позволит нам настроить поведение Vitest. Мы укажем, что хотим использовать глобальные переменные (такие как describe и it), и определим среду тестирования.

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  test: {
    globals: true,
    environment: 'jsdom', // или 'happy-dom'
    setupFiles: './setupTests.ts',
  },
});

Интеграция с TypeScript

Чтобы TypeScript «узнал» о глобальных функциях Vitest, таких как describe, it и expect, нам нужно обновить файл tsconfig.json. Добавьте vitest/globals в массив compilerOptions.types. Это подключит необходимые определения типов.

// tsconfig.json
{
  "compilerOptions": {
    // ... другие опции
    "types": ["vitest/globals"]
  }
}

Если в вашем tsconfig.json уже есть секция types, просто добавьте "vitest/globals" в существующий массив.

Следующий шаг — настройка файла, который будет выполняться перед каждым тестом. В vitest.config.ts мы указали его как setupFiles: './setupTests.ts'. Этот файл идеально подходит для расширения возможностей Vitest.

Мы воспользуемся библиотекой @testing-library/jest-dom, чтобы добавить удобные матчеры для проверки DOM-элементов. Сначала установим её:

npm install -D @testing-library/jest-dom

Теперь создайте файл setupTests.ts и импортируйте в него jest-dom.

// setupTests.ts
import '@testing-library/jest-dom';

Вот и всё. Vitest автоматически подхватит этот файл, и вы сможете использовать расширенные матчеры в своих тестах, например, toBeInTheDocument() или toHaveTextContent().

Теперь, когда всё настроено, вы можете написать свой первый тест. Создайте файл с суффиксом .test.tsx (например, MyComponent.test.tsx), и Vitest автоматически его найдет и выполнит. Ваша среда для тестирования полностью готова.