Challenge 1: Testing useToggle — Possible Solution
====================================================================

it("toggles value between false and true", () => {
  const { result } = renderHook(() => useToggle());

  expect(result.current.value).toBe(false);

  act(() => {
    result.current.toggle();
  });
  expect(result.current.value).toBe(true);

  act(() => {
    result.current.toggle();
  });
  expect(result.current.value).toBe(false);
});

WHY THIS WORKS AS AN ANSWER
------------------------------
renderHook(() => useToggle()) mounts the hook with no JSX involved at
all, exactly this chapter's approach for hooks that have no rendered
output of their own — result.current gives direct access to the
hook's returned { value, toggle } object.

The initial expect(result.current.value).toBe(false) establishes the
starting baseline BEFORE any interaction, the same "check before, then
after" discipline used in this chapter's own controlled-input example.

Each call to result.current.toggle() is wrapped in its own act(...)
block — required here specifically because toggle() is being called
directly on the hook's return value, outside any of RTL's own built-in
helpers (render/fireEvent/userEvent), which is exactly the situation
this chapter's tip-box named as still needing explicit act() even in
modern Testing Library versions. Without act(), the very next
assertion could read a stale value from before React processed the
state update.

Testing BOTH toggle directions (false→true, then true→false) — rather
than just one — verifies the hook doesn't just set a fixed value, but
genuinely flips based on its current state each time, matching the
real meaning of "toggle."