How do you test React components with Testing Library?

React Testing Library encourages tests that survive refactors. A test should not know whether a component uses useState, Redux or a context. It should know that a button named "Save" is visible, that clicking it calls the API, and that a success message appears.

import { render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";

test("submits the form and shows a confirmation", async () => {
  const user = userEvent.setup();
  const onSubmit = vi.fn().mockResolvedValue(undefined);

  render(<SignupForm onSubmit={onSubmit} />);

  await user.type(screen.getByLabelText("Email"), "asha@example.com");
  await user.click(screen.getByRole("button", { name: "Sign up" }));

  expect(onSubmit).toHaveBeenCalledWith("asha@example.com");
  expect(await screen.findByRole("status")).toHaveTextContent("Check your inbox");
});

Good testing habits

• Query by role, label, placeholder or text before falling back to test IDs
• Use userEvent instead of firing synthetic events directly
• Use findBy and waitFor for asynchronous UI, not arbitrary sleeps
• Mock the network at the boundary with MSW or a service mock
• Assert on what the user sees, not on hook calls or component internals

Do not test implementation details such as state variable names or whether a specific hook was called. Those tests break on refactors without catching user-facing regressions. For a custom hook with no UI, renderHook is appropriate, but most component behaviour is better tested through the rendered interface.