Mocking Network Requests with Mock Service Worker (MSW)

Beginner12 min read•Updated: Jul 11, 2026

Mocking Network Requests with Mock Service Worker (MSW)

Enterprise React applications rely heavily on network APIs. Testing network-dependent components by mocking fetch or axios directly (vi.mock('axios')) leads to brittle tests that couple test assertions to internal implementation libraries. Mock Service Worker (MSW) is the industry standard for network mocking: it intercepts network requests at the network layer using Service Workers (in the browser) and NodeJS network interceptors (in Vitest/Jest).

1. Why MSW Outperforms Naive Mocks

Output

1Traditional Mocking (Brittle):
2Component ──► axios.get() [Mocked via vi.spyOn] ──► Fake Data
3- Breaks if you migrate from Axios to Fetch or TanStack Query!
4 
5MSW Network Mocking (Robust):
6Component ──► axios/fetch ──► HTTP Request ──► [MSW Interceptor catches request] ──► Mock HTTP Response
7- Tests against real HTTP requests, status codes, headers, and payloads!

2. Defining Request Handlers in MSW v2

In MSW v2, handlers use the http namespace:

TypeScript

1// src/mocks/handlers.ts
2import { http, HttpResponse, delay } from "msw";
3 
4export const handlers = [
// Mock GET /api/v1/user/profile
http.get("https://api.enterprise.com/v1/user/profile", async () => {
  await delay(50); // Simulate network latency
  return HttpResponse.json({
    id: "usr_9981",
    name: "DevOps Engineer",
    email: "engineer@enterprise.io",
    role: "admin",
  });
}),
15 
// Mock POST /api/v1/organizations
http.post("https://api.enterprise.com/v1/organizations", async ({ request }) => {
  const payload = (await request.json()) as { name: string };
19 
  if (!payload.name) {
    return new HttpResponse(
      JSON.stringify({ error: "Organization name is required" }),
      { status: 400, headers: { "Content-Type": "application/json" } }
    );
  }
26 
  return HttpResponse.json(
    { id: "org_123", name: payload.name, createdAt: new Date().toISOString() },
    { status: 201 }
  );
}),
32];

3. Configuring MSW in Vitest / Node Test Environment

TypeScript

1// src/mocks/nodeServer.ts
2import { setupServer } from "msw/node";
3import { handlers } from "./handlers";
4 
5export const server = setupServer(...handlers);

Configure your test setup file (vitest.setup.ts) to manage the mock server lifecycle:

TypeScript

1// vitest.setup.ts
2import "@testing-library/jest-dom/vitest";
3import { beforeAll, afterEach, afterAll } from "vitest";
4import { server } from "./src/mocks/nodeServer";
5 
6// Start mock server before running test suite
7beforeAll(() => server.listen({ onUnhandledRequest: "error" }));
8 
9// Reset runtime request handlers between tests to prevent test pollution
10afterEach(() => server.resetHandlers());
11 
12// Clean up and shutdown server when tests finish
13afterAll(() => server.close());

4. Testing Error States and Server Overrides

MSW allows individual tests to override handlers on the fly to simulate server outages, 500 errors, or rate limits:

TSX

1// components/UserProfileCard.test.tsx
2import { describe, it, expect } from "vitest";
3import { screen } from "@testing-library/react";
4import { http, HttpResponse } from "msw";
5import { server } from "../mocks/nodeServer";
6import { renderWithProviders } from "../test/test-utils";
7import { UserProfileCard } from "./UserProfileCard";
8 
9describe("UserProfileCard", () => {
10  it("displays user profile information when fetch succeeds", async () => {
11    renderWithProviders(<UserProfileCard />);
12 
13    // Initially displays loading state
14    expect(screen.getByText(/loading profile/i)).toBeInTheDocument();
15 
16    // MSW returns default 200 handler
17    expect(await screen.findByText("DevOps Engineer")).toBeInTheDocument();
18    expect(screen.getByText("engineer@enterprise.io")).toBeInTheDocument();
19  });
20 
21  it("handles 500 server outage gracefully with retry button", async () => {
22    // Override handler for this specific test
23    server.use(
24      http.get("https://api.enterprise.com/v1/user/profile", () => {
25        return new HttpResponse(null, { status: 500 });
26      })
27    );
28 
29    renderWithProviders(<UserProfileCard />);
30 
31    // Assert error state is rendered
32    expect(await screen.findByText(/failed to load profile/i)).toBeInTheDocument();
33    expect(screen.getByRole("button", { name: /retry/i })).toBeInTheDocument();
34  });
35});

Interactive Quiz• Knowledge Check

Practice Quiz

Question 1

What makes Mock Service Worker (MSW) superior to vi.mock('axios')?

Question 2

In MSW v2, how do you construct a mock JSON response with a 201 Created status?

Question 3

Why is server.resetHandlers() called in afterEach?

Question 4

What does onUnhandledRequest: "error" enforce in MSW setup?

Question 5

Can MSW intercept requests in both NodeJS unit tests and real browser development environments?

Next Lesson

End-to-End Testing with Playwright in React

Continue learning with hands-on practice, examples, and exercises in the upcoming topic.

Related Lessons

Previous Lesson	Next Lesson
Integration Testing Multi-Page User Journeys	End-to-End Testing with Playwright in React

Practice Quiz

Test your understanding of this lesson with 5 questions. Each question has one correct answer.

Previous Next

PreviousPrevNext