Тестирование
Тема дорожной карты · React
Тестирование React-приложений охватывает несколько уровней: модульные тесты для отдельных компонентов и хуков, интеграционные тесты для взаимодействий компонентов и потоков управления состоянием, а также сквозные тесты, имитирующие реальные пользовательские сценарии в браузере. Стандартный React-стек тестирования — Jest в роли инструмента запуска тестов и библиотеки утверждений совместно с React Testing Library (RTL), которая рендерит компоненты в jsdom-среду и предоставляет запросы (getByRole, getByText, findByLabelText), поощряющие тестирование пользовательски-видимого поведения, а не деталей реализации. Кастомные хуки тестируются с помощью утилиты renderHook из RTL, а асинхронные обновления состояния обрабатываются с помощью waitFor и act для обеспечения сброса ожидающих обновлений React перед утверждениями. Для полноценного сквозного тестирования Playwright и Cypress запускают реальный браузер и навигируют по React-фронтенду против живого сервера, валидируя маршрутизацию, SSR с Next.js и сетевые взаимодействия, которые jsdom не может симулировать. TypeScript делает тестирование React надёжнее, выявляя ошибки типов в настройке тестов: пропсы компонентов, типы возврата моков и аргументы событий — всё проверяется на этапе компиляции, снижая вероятность ложноположительных тестов.
Как это работает
Тестирование использует Jest (или Vitest) как раннер и React Testing Library (RTL) как слой рендера + запросов. Философия RTL: запрашивайте DOM так же, как пользователь — по accessible role, label, тексту — не по деталям реализации (CSS-класс, внутренний state). userEvent симулирует реальные действия (печать, клик, tab) точнее, чем fireEvent. API-моки — на сетевой границе через msw, не внутри компонента.
Когда применять
Покройте (а) критичные пользовательские флоу end-to-end (регистрация, checkout) через RTL + msw, (б) сложную чистую логику unit-тестами, (в) пофикшенные регрессии (зафиксируйте их). Пропустите snapshot-тесты для часто меняющегося — превращаются в "rubber-stamp"-падения. Гоняйте тесты в CI на каждый PR; быстрый фидбек бьёт глубокие моки. Цель — ~50% behavioural покрытия на integration-уровне, не 100% строк.
Типичные ошибки
Ловушки Тестирование: запросы через data-testid повсюду (тесты привязаны к разметке, accessibility-проблемы скрыты); защитный act() без нужды (RTL оборачивает сам); моки самого React (тестируете мок); медленные snapshot, маскирующие реальные баги; тесты, бьющие в реальные API в CI (flaky + медленно). Прочтите RTL "common mistakes" — окупается в первую неделю.