Mock API
Тема дорожной карты · React
Мокирование API в React — это практика перехвата сетевых запросов во время разработки и тестирования для возврата предопределённых ответов без обращения к реальному бэкенду, что позволяет вести фронтенд-разработку независимо от готовности серверной части. Наиболее широко используемый инструмент для мокирования API в React — Mock Service Worker (MSW), который перехватывает запросы fetch и axios на уровне Service Worker, делая моки прозрачными для кода приложения и одинаково эффективными как в браузере, так и в тестовых окружениях Node.js. Мокирование API в тестах React также поддерживается через jest.mock(), vi.mock() (Vitest) или оборачиванием компонентов в тест-специфичные обёртки <Provider>, возвращающие фикстурные данные. Эффективное мокирование API позволяет React-разработчикам создавать и тестировать состояния загрузки, ошибок, пагинацию и пограничные случаи, которые сложно воспроизводимо воспроизвести против реального API. Интеграция мокирования API в рабочий процесс разработки React ускоряет создание функций, повышает надёжность тестов и отделяет фронтенд-команды от графиков релизов серверной части.
Как это работает
Mock API использует 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% строк.
Типичные ошибки
Ловушки Mock API: запросы через data-testid повсюду (тесты привязаны к разметке, accessibility-проблемы скрыты); защитный act() без нужды (RTL оборачивает сам); моки самого React (тестируете мок); медленные snapshot, маскирующие реальные баги; тесты, бьющие в реальные API в CI (flaky + медленно). Прочтите RTL "common mistakes" — окупается в первую неделю.