Vitest и Jest
Тема дорожной карты · Frontend разработчик
Vitest — это молниеносный фреймворк юнит- и интеграционного тестирования, нативно созданный для Vite, разделяющий ту же конфигурацию vite.config.ts, плагины и разрешение модулей, что и тестируемое приложение, что устраняет расхождение между тестовым и продакшн-окружениями. Vitest предоставляет Jest-совместимый API (describe, it, expect, vi.mock, vi.spyOn), позволяя мигрировать существующие Jest-тесты с минимальными изменениями, при этом предлагая значительно более быстрый старт благодаря нативному ESM и esbuild-трансформации Vite. Запуск vitest запускает режим watch, перезапускающий только затронутые тесты при изменении файла, а vitest --coverage интегрируется с @vitest/coverage-v8 или Istanbul для генерации отчётов покрытия. Vitest органично сочетается с React Testing Library (@testing-library/react) для тестирования компонентов и является рекомендуемым раннером для React-проектов на Vite, а также умолчанием во многих стартовых шаблонах Next.js и Astro.
Как это работает
Vitest и Jest на frontend имеет слои: unit (Vitest/Jest для утилит + reducers), компонентные (React Testing Library / Vue Test Utils для поведения компонентов), end-to-end (Playwright, Cypress для полного browser-флоу). Философия RTL: запрашивайте DOM так же, как пользователь — по роли, label, тексту — не по деталям реализации. Мокайте на сетевой границе (msw), не внутри компонентов. pnpm test в CI на каждый PR.
Когда применять
Тестируйте критичные user-флоу end-to-end (регистрация, checkout, главные формы) через Playwright + msw. Сложная чистая логика — unit-тесты. Snapshot-тесты — пропустите для часто меняющегося. Цель — behavioural coverage на integration-уровне, не 100% строк (стимулирует тривиальные тесты). E2E — headless CI на каждый PR.
Типичные ошибки
Ловушки Vitest и Jest: запросы по CSS-классу (data-testid лучше; ARIA role — лучшее); over-mocking React-внутренностей (тестируете моки, не код); flaky-тесты оставлены — каждый подрывает доверие; нет таймаутов в waitFor (висит в CI); snapshot-тесты на очень волатильном выводе. Карантинить, потом чинить или удалять.