Snapshot тесты
Тема дорожной карты · React
Снапшот-тестирование в React — это техника на основе Jest, при которой результат рендеринга компонента сериализуется в текстовый файл («снапшот») при первом запуске, а затем при последующих запусках тестов сравнивается с этим эталоном для обнаружения непреднамеренных изменений UI. Используя функцию render из React Testing Library совместно с expect(container).toMatchSnapshot(), или метод toJSON() из react-test-renderer, снапшот-тесты обеспечивают быструю страховку регрессий для разметки React-компонентов. Когда компонент намеренно изменяется, разработчики запускают jest --updateSnapshot для перегенерации эталона, делая снапшот-тесты лёгким документированием ожидаемого вывода компонента. Снапшот-тесты наиболее эффективны для чистых презентационных React-компонентов со стабильным выводом, который меняется редко; для сложных интерактивных компонентов предпочтительны поведенческие тесты с запросами React Testing Library. В TypeScript React-проектах снапшот-тесты выигрывают от полной типобезопасности в настройке тестов, гарантируя соответствие пропсов компонента, используемых в тестах, объявленному интерфейсу компонента.
Как это работает
Snapshot тесты использует 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% строк.
Типичные ошибки
Ловушки Snapshot тесты: запросы через data-testid повсюду (тесты привязаны к разметке, accessibility-проблемы скрыты); защитный act() без нужды (RTL оборачивает сам); моки самого React (тестируете мок); медленные snapshot, маскирующие реальные баги; тесты, бьющие в реальные API в CI (flaky + медленно). Прочтите RTL "common mistakes" — окупается в первую неделю.