Як мокати fetch/HTTP запити в тестах?

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

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

Проте в деяких простих юніт-тестах припустимо мокати сам HTTP-клієнт, наприклад, бібліотеку Axios на рівні модулів Jest, якщо вам потрібно швидко перевірити поведінку компонента за певної відповіді. Незалежно від обраного інструменту, необхідно суворо дотримуватися дисципліни очищення стану між тестами, щоб дані з одного сценарію випадково не вплинули на інший.