React Testing Library

React Testing Library (RTL) — стандартная библиотека для юнит- и интеграционного тестирования React-компонентов, построенная на принципе тестирования компонентов так, как пользователи взаимодействуют с ними, а не тестирования деталей реализации вроде состояния компонента или внутренних методов. RTL используется через пакет @testing-library/react: функция render() монтирует компоненты в виртуальный DOM (jsdom), а запросы screen.getByRole(), screen.getByText() и screen.getByLabelText() находят элементы по семантике доступности. Взаимодействия пользователя симулируются через @testing-library/user-event (более реалистично, чем низкоуровневый fireEvent), а асинхронные утверждения используют waitFor() или варианты запросов findBy*, опрашивающие до выполнения условия. React Testing Library органично сочетается с Vitest (для Vite-проектов) или Jest как раннером, а её API запросов, ориентированный на доступность, поощряет правильное использование ARIA, делая тесты полезной вторичной проверкой доступности компонентов.

Как это работает

React Testing Library на 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.

Типичные ошибки

Ловушки React Testing Library: запросы по CSS-классу (data-testid лучше; ARIA role — лучшее); over-mocking React-внутренностей (тестируете моки, не код); flaky-тесты оставлены — каждый подрывает доверие; нет таймаутов в waitFor (висит в CI); snapshot-тесты на очень волатильном выводе. Карантинить, потом чинить или удалять.

Связанные понятия

• Тестирование
• Vitest и Jest
• Playwright и Cypress
• Storybook