Зачем нужен MSW и чем он лучше мока fetch?

MSW (Mock Service Worker) перехватывает сетевые запросы на уровне сети и отвечает заданными данными, поэтому приложение выполняет настоящий fetch или axios.

Преимущества

• Код приложения не знает о моках: тест проверяет реальный путь запроса и обработку ответа.
• Те же обработчики работают в тестах, Storybook и в браузере при разработке.
• Легко моделировать ошибки сервера, медленный ответ и сетевой сбой.

import { http, HttpResponse } from 'msw';
import { setupServer } from 'msw/node';

const server = setupServer(
  http.get('/api/users', () => HttpResponse.json([{ id: 1, name: 'Ann' }])),
);

beforeAll(() => server.listen());
afterEach(() => server.resetHandlers());
afterAll(() => server.close());

test('shows error', async () => {
  server.use(http.get('/api/users', () => new HttpResponse(null, { status: 500 })));
  render(<Users />);
  expect(await screen.findByText('Не удалось загрузить')).toBeInTheDocument();
});

Против jest.fn на fetch

Мок fetch привязывает тест к способу вызова: другой клиент или заголовки ломают тест. MSW проверяет поведение независимо от клиента.

Коротко для собеседования

MSW подменяет сервер, а не клиент. Это стабильнее, переиспользуется и тестирует реальный сетевой код.