How should you mock network requests in tests?

A network mock should answer the question the code asks, such as a URL and method, and return a realistic response. That keeps serialization, status handling and retries under test. Mocking a data module instead skips all of that and can hide bugs in the layer you most need to verify.

beforeEach(() => {
  globalThis.fetch = jest.fn().mockResolvedValue({
    ok: true,
    status: 200,
    json: async () => ({ id: "u1", name: "Asha" }),
  } as Response);
});

test("loads the profile", async () => {
  await expect(loadProfile("u1")).resolves.toEqual({ id: "u1", name: "Asha" });
});

Levels of network mocking

• Stub fetch or an HTTP client for a small unit test
• Use MSW for integration tests that need routing and realistic responses
• Use a contract test or a test server when the real transport matters
• Avoid mocking the component's data hook, because it skips the integration point

The response object needs the fields the code reads. A stub with only json will break code that checks ok or status. For error paths, return a non-2xx status and assert that the UI shows the error state, not just that the promise rejected.