Challenge 2: Testing a Loading-Then-Loaded List — Possible Solution
====================================================================

it("shows items after loading finishes", async () => {
  render(<ItemList />);

  expect(screen.getByText("Loading...")).toBeInTheDocument();

  expect(await screen.findByText("Apples")).toBeInTheDocument();
  expect(screen.queryByText("Loading...")).not.toBeInTheDocument();
});

WHY THIS WORKS AS AN ANSWER
------------------------------
The first assertion uses plain getByText (not queryBy or findBy)
because "Loading..." is expected to be present IMMEDIATELY and
synchronously right after render() — before the useEffect's fetch has
had any chance to resolve — matching this chapter's rule that getBy is
for things expected to exist right now.

await screen.findByText("Apples") is the async wait for the fetched
item to actually appear — findBy is the right tool here specifically
because this is checking for exactly ONE thing to eventually show up,
matching this chapter's own guidance to prefer findBy over the more
general waitFor when a single query is all that's needed.

The final queryByText("Loading...") check (not getByText) confirms the
loading indicator is GONE by the time the item has appeared — queryBy
is required here because "not found" is the CORRECT, expected outcome
at this point, and getBy would incorrectly throw instead of allowing
that. Checking this only makes sense placed AFTER the findByText line,
since by then enough time has passed for the loading state to have
genuinely resolved — checking it any earlier would be testing an
undefined, still-in-flux moment.