Тестирование React-приложений

Вы построите быстрые component/integration tests, перехватите сеть на protocol boundary и оставите E2E критическим пользовательским путям.

До начала достаточно component APIs, async states, routing и data clients. В конце должен появиться не конспект, а тестовый набор формы и route workflow с MSW и одним Playwright critical path.

Чистые functions проверяются unit, component/integration — DOM и пользовательский сценарий, E2E — критическая система в браузере. Чем выше уровень, тем дороже и шире сигнал. Большинство UI-логики надёжно покрывается integration tests с network boundary, а не тысячей shallow tests.

Рабочая проверка. Классифицируйте tests проекта и удалите дубли.

Типичная поломка. Проверять каждую функцию только через медленный E2E.

Ищите элементы так, как их находит пользователь: role + accessible name, label text, visible text. Это одновременно проверяет часть accessibility contract. CSS classes и component instance — детали реализации. getBy для существующего сейчас, findBy для асинхронного появления, queryBy для отсутствия.

Рабочая проверка. Найдите кнопку и поле по role/name без testid.

Типичная поломка. Выбирать .primary-button:nth-child(2).

user-event моделирует последовательность focus/input/keyboard событий ближе к браузеру и обычно async. fireEvent полезен для низкоуровневого одиночного события, но легко создать невозможный сценарий. Создавайте user на тест и await interactions.

Рабочая проверка. Введите текст, очистите поле и отправьте Enter через user.

Типичная поломка. Присвоить input.value напрямую и вызвать один change.

MSW перехватывает запрос на сетевой границе, сохраняя настоящий client serialization/parsing и component lifecycle. Handler задаёт success/error/delay и проверяет protocol. Не mock-айте custom Hook, если цель integration test — проверить его связь с UI.

Рабочая проверка. Задайте delayed 200, 500 и invalid payload handlers.

Типичная поломка. Mock resolved data прямо из Hook и пропустить неправильный URL/body.

Ждите наблюдаемое условие через findBy/waitFor, а не фиксированный timeout. waitFor callback должен бросать assertion до успеха. Fake timers применяйте для собственной timer policy, но Promise/React scheduling требуют аккуратного act. Случайный sleep делает тест медленным и flaky.

Рабочая проверка. Замените setTimeout(1000) ожиданием появившегося статуса.

Типичная поломка. Увеличивать sleep до исчезновения flaky.

Рендерите route config в memory router с initial entries, loaders/actions и boundaries. Проверяйте navigation и URL, а не mock useNavigate. Это ловит params, forms, revalidation и error semantics. Framework-specific server boundaries могут потребовать более высокий integration/E2E слой.

Рабочая проверка. Откройте deep link detail, выполните action и вернитесь назад.

Типичная поломка. Mock router hooks так, что route tree не участвует.

E2E проверяет систему как пользователь: реальный browser, deployed-like app и контролируемый backend/test data. Каждый тест создаёт независимые данные и не зависит от порядка. Предпочитайте role locators и web-first assertions; page object скрывает механические действия, но не превращается в god class.

Рабочая проверка. Создайте уникальную заявку через API fixture и измените её UI.

Типичная поломка. Один длинный E2E на весь продукт с общим аккаунтом и порядком tests.

Тест должен падать при продуктовой регрессии и проходить при внутреннем рефакторинге. Проверка hook order, component names, private state и полного DOM snapshot часто слишком связана. Mutation testing/намеренная поломка помогает убедиться, что assertion действительно чувствителен к дефекту.

Рабочая проверка. Поменяйте реализацию reducer на useState без изменения поведения и сохраните зелёные tests.

Типичная поломка. Проверять wrapper.state() или внутренний instance function component.

Протестируйте панель заявок: semantic queries, real user-event, validation, delayed MSW response, 500/retry, route navigation и optimistic rollback. E2E проверяет login→edit→save без implementation selectors.

Критерий завершения: тесты детерминированы, не используют sleep, не mock-ят React internals и ловят регрессию поведения. Сначала зафиксируйте наблюдаемое поведение тестом или измерением, затем меняйте реализацию.