Testing

React · Reference cheat sheet

📋 Overview

Test React components with React Testing Library (RTL) + Vitest/Jest: assert what users see and do, not implementation details. Use userEvent for interactions; mock network at the boundary. Prefer integration-style tests over shallow enzyme-style tests.

🔧 Core concepts

Query priority: role → label → text → test id (last resort).

💡 Examples

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

test("increments count", async () => {
  const user = userEvent.setup();
  render(<Counter />);
  await user.click(screen.getByRole("button", { name: /increment/i }));
  expect(screen.getByText("1")).toBeInTheDocument();
});

Async:

render(<UserProfile id="1" />);
expect(await screen.findByRole("heading", { name: /ada/i })).toBeVisible();

Router wrapper:

import { MemoryRouter } from "react-router-dom";

render(
  <MemoryRouter initialEntries={["/posts/1"]}>
    <App />
  </MemoryRouter>,
);

⚠️ Pitfalls

• Testing class names / state variables instead of behavior.
• Not wrapping providers (router, theme, query client).
• Forgetting await on userEvent / findBy.
• Snapshot-only tests that churn on markup noise.
• Leaving timers/network open—use fake timers or MSW cleanup.

🔗 Related

• hooks.md — test via components
• custom_hooks.md — renderHook
• router.md — MemoryRouter
• forms.md — form interactions
• error_boundaries.md — error UI