Как тестировать компоненты, которые ходят в сеть и используют провайдеры?
- Что такое MSW?
MSW (Mock Service Worker) перехватывает запросы на уровне сети и отвечает заданными данными: компонент работает с настоящим fetch и клиентом, а тест управляет ответами — успех, ошибка 500, задержка. Обработчики общие для тестов, Storybook и локальной разработки; в отдельном тесте их переопределяют server.use(...). Провайдеры (QueryClient, роутер, тема, i18n) собирают в функцию renderWithProviders; QueryClient — новый на каждый тест с отключёнными повторами.
- onUnhandledRequest: "error" — не пропустить неожиданный запрос
- Ожидание данных — findBy и waitFor
- Мокать модули с запросами (vi.mock) хрупче — тест не видит реальный клиент
А ещё Один набор обработчиков MSW для тестов и разработки экономит много времени
Подробно
const server = setupServer(http.get("/api/orders", () => HttpResponse.json([{ id: 1 }])));
beforeAll(() => server.listen({ onUnhandledRequest: "error" }));
afterEach(() => server.resetHandlers());
test("показывает ошибку", async () => {
server.use(http.get("/api/orders", () => new HttpResponse(null, { status: 500 })));
renderWithProviders(<Orders />);
expect(await screen.findByRole("alert")).toHaveTextContent("Не удалось");
});Что хотят услышать
- MSW на уровне сети.
- Переопределение ответов в тесте.
- Обёртка с провайдерами, свежий QueryClient.
Проверьте себя
Один верный вариант. Подумайте, потом откройте ответ.
Показать варианты и ответ
- ✗MSW подменяет React-компоненты заглушками, поэтому сетевой слой в тестах не участвует
- ✓MSW перехватывает запросы на уровне сети; QueryClient — новый на каждый тест
- ✗Один QueryClient на все тесты — лучший выбор: кэш между тестами ускоряет прогон
- ✗Тестировать ошибки сервера с MSW невозможно: он умеет отдавать только успешные ответы
Связанные вопросы
Разбор собеседования с sotto
После собеседования sotto разбирает разговор: оценка, каждый вопрос — хорошо, частично или слабо, чего не хватило в ответе и над чем поработать к следующему разу. Первые 30 минут бесплатно.