Challenge 1: MSW Handler for a Product List — Possible Solution
====================================================================

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

const server = setupServer(
  http.get("/api/products", () =>
    HttpResponse.json([
      { id: 1, name: "Mouse" },
      { id: 2, name: "Keyboard" },
    ])
  )
);

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

it("shows both product names after loading", async () => {
  render(<ProductList />);

  expect(await screen.findByText("Mouse")).toBeInTheDocument();
  expect(await screen.findByText("Keyboard")).toBeInTheDocument();
});

WHY THIS WORKS AS AN ANSWER
------------------------------
The MSW handler intercepts GET /api/products at the network level and
returns a JSON array of two products — ProductList's own real fetch
code runs completely unmodified, exactly this chapter's core MSW
principle, rather than mocking fetch/axios directly.

beforeAll/afterAll manage the mock server's lifetime (Chapter 2's
setup/teardown hooks, applied to MSW specifically), and afterEach
calling server.resetHandlers() is included here as a defensive habit
even though this particular test never overrides a handler — matching
this chapter's own warn-box guidance to always reset, since it costs
nothing when unnecessary and prevents a real, easy-to-miss bug when it
IS needed later.

Both findByText calls are awaited, since the product list only appears
after ProductList's useEffect-driven fetch resolves — an async
appearance, following Chapter 5's findBy pattern for exactly this
situation. Checking both product names individually (rather than one
combined assertion) verifies the ENTIRE list rendered correctly, not
just that fetching happened at all.