Challenge 1: Testing a Counter Component — Possible Solution
====================================================================

it("increments the displayed count when the Increment button is clicked", async () => {
  render(<Counter />);

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

  await userEvent.click(screen.getByRole("button", { name: "Increment" }));

  expect(screen.getByText("1")).toBeInTheDocument();
});

WHY THIS WORKS AS AN ANSWER
------------------------------
The test first confirms the STARTING state (count displays "0")
before any interaction happens — establishing a clear baseline, so the
later assertion genuinely proves something changed, rather than just
checking the end state in isolation.

userEvent.click (awaited, per this chapter's async userEvent note) is
used rather than fireEvent.click, since Testing Library's own current
recommendation is to prefer userEvent's more realistic event
simulation whenever an option exists — and clicking a button is
exactly the kind of ordinary interaction userEvent is built for.

getByRole("button", {name: "Increment"}) locates the button the same
way this course's query priority guide recommends (role first), and
the final getByText("1") confirms the actual user-visible OUTCOME of
the click — the count actually changing on screen — rather than
checking any internal state variable directly, which RTL doesn't even
expose a way to do.