Тестирование: Jest, Playwright

Stripe меняет production код более 2000 раз в год при 99.999% uptime. Возможно это только благодаря комплексному тестированию: unit тесты за секунды, integration за минуты, E2E Playwright suite за 20 минут. Без тестов скорость разработки иллюзорна - каждый deploy становится russian roulette.

• **Vercel** использует Playwright для E2E тестирования Next.js - каждый PR автоматически тестируется против staging deployment, включая visual regression для всех страниц документации
• **Atlassian** внедрил visual regression Chromatic для Atlassian Design System - 200+ компонентов тестируются при каждом PR, дизайнеры review changes перед merge
• **GitHub** использует MSW в unit тестах всего frontend - API моки обновляются вместе с API схемой, что предотвращает drift между frontend и backend ожиданиями

Unit Testing с Jest

Unit тесты проверяют изолированные функции и компоненты. Jest - стандартный test runner для JavaScript/TypeScript: быстрое выполнение (parallel, watch mode), встроенный code coverage, snapshot testing, mocking. Vitest - современная альтернатива на Vite: 10-20x быстрее для Vite проектов, идентичный API.

Testing pyramid: много unit (fast, isolated), меньше integration, мало E2E (slow, fragile). AAA pattern: Arrange (подготовка данных) → Act (вызов тестируемого кода) → Assert (проверка результата). React Testing Library - тестировать поведение, не implementation details: `getByRole`, `getByText`, не `getElementById`.

Integration Testing

Integration тесты проверяют взаимодействие нескольких компонентов: форма + API + state management. MSW (Mock Service Worker) - перехватывает fetch/XHR запросы на уровне Service Worker, не меняя код приложения. Идеален для integration тестов: приложение думает что работает с реальным API, но отвечает MSW handler.

MSW работает и в Jest (msw/node для Node.js среды) и в Playwright (browser Service Worker). Это позволяет использовать одни handlers для unit tests, Storybook и Playwright E2E. Supertest - для integration тестирования Express/NestJS API без реального HTTP сервера. Prisma Test Environment - тестовая БД на каждый test file.

E2E Testing с Playwright

Playwright - E2E тестирование от Microsoft: Chrome, Firefox, Safari (WebKit), мобильные эмуляторы в одном инструменте. Отличие от Selenium: встроенные auto-waits (нет ручных sleep), network interception, трейсинг, video recording при failure. Codegen - запись действий пользователя в тест автоматически.

Playwright best practices: page object model (инкапсулировать взаимодействие со страницей в классы), избегать sleep (использовать expect(...).toBeVisible()), тестировать критичные user journeys а не все возможные пути. Playwright Component Testing - тестировать React/Vue компоненты в реальном браузере (альтернатива jsdom из Jest).

Visual Regression Testing

Visual regression тестирование сравнивает скриншоты до и после изменений для обнаружения визуальных регрессий. Playwright Screenshot Testing - встроенное `expect(page).toHaveScreenshot()`. Chromatic (Storybook) - облачный сервис для visual testing компонентов. Percy, Applitools - enterprise решения с AI для сравнения.

Visual regression нужен когда: дизайн-система с десятками компонентов, CSS изменения могут сломать другие компоненты, нет возможности вручную проверить все страницы. Проблема: pixel-perfect сравнение чувствительно к anti-aliasing и шрифтам на разных OS. Решение: threshold для допустимой разницы пикселей, маскировать динамический контент (даты, аватары).

Ключевые идеи

• **Unit (Jest/Vitest + RTL)** - тестировать поведение через getByRole/getByText, мокировать через vi.mock; AAA pattern для структуры
• **Integration (MSW)** - перехватывать HTTP на уровне Service Worker; тестировать полный стек от компонента до HTTP; один handler для test + Storybook + Playwright
• **E2E (Playwright) + Visual Regression** - Page Object Model для maintainability; auto-waits устраняют flaky; screenshot testing с threshold для стабильности

Связанные темы

Тестирование интегрируется с CI/CD и TypeScript:

• TypeScript для веба — Typed mocks с vi.mocked(), typed Page Objects в Playwright; TypeScript делает тесты надёжнее
• Web Development на собеседовании — Знание testing pyramid и MSW/Playwright - частые вопросы на senior frontend интервью

Вопросы для размышления

• Если компонент рендерит по-разному в зависимости от данных из API - как организовать visual regression тест чтобы он был стабильным?
• Когда E2E тест оправдан для функциональности которую уже покрывают unit тесты?
• Как организовать тестирование компонента который зависит от нескольких внешних API и имеет сложный loading state?

Связанные уроки

• alg-12-bfs