Тестирование
Тема дорожной карты · Frontend разработчик
Тестирование frontend — это практика систематической проверки корректного поведения UI-компонентов, взаимодействий пользователей и потоков приложения; оно охватывает пирамиду типов тестов: юнит-тесты, интеграционные тесты и end-to-end (E2E) тесты. Юнит- и интеграционные тесты в React-проектах обычно пишутся с Vitest или Jest как раннером и React Testing Library для рендеринга компонентов: screen.getByRole() и userEvent позволяют тестировать поведение с точки зрения пользователя, а не детали реализации. End-to-end тесты автоматизируют полные браузерные взаимодействия и обрабатываются с помощью Playwright или Cypress — Playwright всё больше предпочитается за поддержку нескольких браузеров (Chromium, Firefox, WebKit), TypeScript-first API и более быстрое выполнение. Изоляция компонентов и визуальное регрессионное тестирование обслуживаются Storybook с его интеграцией @storybook/test, тогда как CI/CD-конвейеры запускают полный набор тестов (vitest run, playwright test) при каждом пуше для выявления регрессий до попадания в продакшн.
Как это работает
Тестирование на 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.
Типичные ошибки
Ловушки Тестирование: запросы по CSS-классу (data-testid лучше; ARIA role — лучшее); over-mocking React-внутренностей (тестируете моки, не код); flaky-тесты оставлены — каждый подрывает доверие; нет таймаутов в waitFor (висит в CI); snapshot-тесты на очень волатильном выводе. Карантинить, потом чинить или удалять.