Jest + RTL
Тема дорожной карты · React
Jest и React Testing Library (@testing-library/react) — это стандартная комбинация для модульного и интеграционного тестирования React-компонентов на фронтенде. Jest — это инструмент запуска тестов и библиотека утверждений, предоставляющая утилиты describe, it, expect и возможности для мокирования, тогда как React Testing Library рендерит компоненты в виртуальный DOM и предоставляет запросы для выбора элементов так, как это делал бы реальный пользователь — по роли, метке или текстовому содержимому. Такой подход — тестирование поведения, а не деталей реализации — делает тесты устойчивыми к рефакторингу и поощряет написание доступной JSX-разметки. Библиотека @testing-library/user-event имитирует реалистичные взаимодействия пользователя — ввод текста, клики, — позволяя тестам проверять полный цикл состояния компонента, управляемый хуками useState и useEffect. Вместе Jest и React Testing Library дают React-разработчикам уверенность в корректности поведения компонентов во всех сценариях без привязки тестов к внутренней реализации.
Как это работает
Jest + RTL использует 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% строк.
Типичные ошибки
Ловушки Jest + RTL: запросы через data-testid повсюду (тесты привязаны к разметке, accessibility-проблемы скрыты); защитный act() без нужды (RTL оборачивает сам); моки самого React (тестируете мок); медленные snapshot, маскирующие реальные баги; тесты, бьющие в реальные API в CI (flaky + медленно). Прочтите RTL "common mistakes" — окупается в первую неделю.