Как мокать fetch/HTTP запросы в тестах?

Тестирование сетевых запросов — это важнейшая часть разработки интерфейсов на React, так как большинство приложений зависят от внешних данных. Правильный подход к моканию HTTP-запросов гарантирует, что ваши тесты будут стабильными, быстрыми и независимыми от доступности бэкенд-серверов.

Наиболее современным и надежным инструментом для мокания запросов в современных веб-приложениях является библиотека Mock Service Worker, сокращенно MSW. Главное преимущество MSW заключается в том, что он перехватывает сетевые запросы на уровне Service Worker или перехватчика Node.js, не требуя изменения самого кода компонентов или библиотек для запросов. Благодаря этому тесты получаются максимально реалистичными, ведь компонент отправляет стандартный fetch или axios-запрос, даже не подозревая, что ответ подготовлен заранее.

Тем не менее, в некоторых простых юнит-тестах допустимо мокать сам HTTP-клиент, например, библиотеку Axios на уровне модулей Jest, если вам нужно быстро проверить поведение компонента при определенном ответе. Независимо от выбранного инструмента, необходимо строго соблюдать дисциплину очистки состояния между тестами, чтобы данные из одного сценария случайно не повлияли на другой.