Как использовать Mock Service Worker (MSW) для мокирования сетевых запросов?

Что такое MSW и зачем он нужен

Mock Service Worker (MSW) — это библиотека, которая перехватывает сетевые запросы на уровне Service Worker браузера или через Node.js в тестах. Вместо реального обращения к серверу, MSW возвращает заранее заданные ответы. Это позволяет разработчикам и тестировщикам имитировать поведение API без необходимости запускать бэкенд или использовать сложные моки.

Основное преимущество MSW — он работает на уровне сети, поэтому код приложения не знает, что запросы мокированы. Это делает тесты более реалистичными и уменьшает зависимость от внешних сервисов.

Как настроить MSW

Для начала установите библиотеку и создайте файл с обработчиками запросов. Обработчики определяют, какие URL перехватывать и какой ответ возвращать. Затем запустите сервер MSW в тестовой среде или в браузере для разработки.

// handlers.js
import { http, HttpResponse } from 'msw'

export const handlers = [
  http.get('/api/user', () => {
    return HttpResponse.json({ id: 1, name: 'John' })
  }),
]

// test setup
import { setupServer } from 'msw/node'
import { handlers } from './handlers'

const server = setupServer(...handlers)

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

В этом примере при запросе на /api/user возвращается фиксированный JSON. В тестах Jest или Vitest сервер запускается до тестов и останавливается после.

Применение в разработке

MSW также полезен при разработке фронтенда, когда бэкенд ещё не готов. Вы можете настроить Service Worker в браузере, чтобы перехватывать запросы и возвращать мок-данные. Это позволяет работать над интерфейсом независимо от серверной части.

Для этого создайте worker и запустите его в основном файле приложения:

// src/main.js
import { setupWorker } from 'msw/browser'
import { handlers } from './handlers'

const worker = setupWorker(...handlers)
worker.start()

Теперь все запросы, соответствующие обработчикам, будут перехвачены в браузере.

Вывод

MSW — мощный инструмент для мокирования сетевых запросов, который упрощает тестирование и ускоряет разработку. Его стоит применять, когда нужно изолировать фронтенд от реального API, создавать стабильные тесты или разрабатывать интерфейс до готовности бэкенда.