Выбор ответа Middle Тестирование обновлено
Мокать сеть в тестах компонента
Вопрос
Компонент загружает данные через fetch. Как лучше подменить сервер в тесте, чтобы проверить поведение, а не детали реализации?
Попробуйте сами
Выберите вариант, и откроется разбор.
Показать ответ и разбор
Коротко
Правильный ответ: Перехватывать запросы на сетевом уровне через MSW. MSW перехватывает запросы (в браузере через Service Worker, в Node через перехватчики), и код компонента работает как в жизни: вызывает настоящий fetch, обрабатывает статусы и ошибки.
Варианты ответа
- Замокать модуль компонента целиком через
vi.mock - Перехватывать запросы на сетевом уровне через MSWправильный ответ
- Ходить в настоящий продакшн-API с тестовым токеном
- Передавать данные в компонент через props только в тестах
Разбор
MSW перехватывает запросы (в браузере через Service Worker, в Node через перехватчики), и код компонента работает как в жизни: вызывает настоящий fetch, обрабатывает статусы и ошибки. Те же обработчики можно использовать в Storybook и при разработке.
- Мок модуля компонента отключает то, что мы хотим проверить.
- Продакшн-API делает тесты медленными, нестабильными и опасными.
- Отдельный путь «только для тестов» проверяет не тот код, что работает у пользователей.
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.