How do you test React components with Jest?

A component test should survive a refactor from hooks to context or from local state to a store. That means asserting on rendered output and interaction, not on internal calls. Jest supplies the runner and jsdom supplies the DOM; Testing Library supplies the user-centric queries.

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 = jest.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");
});

What to assert

• Rendered text, labels, roles and visible states
• Calls to injected callbacks or API functions
• Loading, error and empty states after async work
• Keyboard and focus behaviour where it matters
• Not internal state names or whether a specific hook ran

Mock the network with MSW or a fetch stub, not the component's data hook. If a component is hard to test through the UI, that often signals a missing accessible label or too much logic in the component. Extract the logic into a pure function or a custom hook and test it separately.