How do you use MSW with Jest?

Mock Service Worker installs an interceptor rather than replacing fetch in your code. Handlers describe responses by method and URL. The component and data layer still call the real fetch, so status handling, headers and parsing are exercised.

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

const server = setupServer(
  http.get("/api/users/:id", ({ params }) =>
    HttpResponse.json({ id: params.id, name: "Asha" }),
  ),
);

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

test("renders the user", async () => {
  render(<Profile id="u1" />);
  expect(await screen.findByText("Asha")).toBeInTheDocument();
});

Why use MSW here

• Handlers are reusable across unit, integration and browser tests
• Requests are matched by URL and method, not call order
• Per-test overrides use server.use without leaking to other tests
• The same handlers can run in a real browser through the worker

resetHandlers removes overrides added with server.use but keeps the base handlers. That makes it the right cleanup between tests. If you need to assert that a request was made, inspect the request in a handler or use a spy on the client, rather than relying on call order.