react-testing

name	react-testing
description	React 组件测试，使用 React Testing Library、Vitest/Jest、MSW 网络模拟、axe 可访问性断言，以及组件测试与 Playwright/Cypress 端到端测试的决策边界。编写或修复 React 组件、hooks 或页面的测试时使用。
origin	ECC

React 测试

Comprehensive React testing patterns for behavior-focused component tests, custom hook tests, accessibility assertions, and network-level mocking.

何时激活

• Writing tests for React components, custom hooks, or pages
• Adding test coverage to legacy untested components
• Migrating from Enzyme or class-component-era patterns to React Testing Library
• Setting up Vitest or Jest for a new React project
• Mocking HTTP requests in tests
• Asserting accessibility violations
• Deciding which tests belong in RTL vs Playwright Component Testing vs full E2E

核心原则

Test what the user sees and does, not implementation details.

A test should:

• Render the component with the same providers it has in production
• Interact with it via accessible queries (role, label) and userEvent
• Assert visible output and observable side effects (callback fired, request sent)

A test should NOT:

• Inspect component state, props passed to children, or which hooks were called
• Mock React itself or framework hooks
• Assert on the number of renders or DOM structure beyond what affects users

库选择

Runner	When	Note
Vitest	Vite, Remix, modern setups	Faster, native ESM, Jest-compatible API
Jest	Next.js, CRA, established repos	Default for many React projects
Playwright Component Testing	Real browser engine needed	Use when JSDOM lacks the required feature
Cypress Component Testing	Real browser, Cypress already in use	Alternative to Playwright CT

Pick one. Do not run RTL + Vitest AND Playwright CT in the same repo unless you have a clear lane separation.

查询优先级

React Testing Library exposes queries in three tiers — use top-down:

1. Accessible to everyone: getByRole, getByLabelText, getByPlaceholderText, getByText, getByDisplayValue
2. Semantic: getByAltText, getByTitle
3. Test IDs (escape hatch): getByTestId

// Best
screen.getByRole("button", { name: /save/i });

// OK for inputs
screen.getByLabelText("Email");

// Last resort
screen.getByTestId("save-btn");

Variants:

• getBy* — throws if no match
• queryBy* — returns null (use for "assert absence")
• findBy* — async, returns a Promise (use for elements that appear after async work)

使用 userEvent 进行用户交互

import userEvent from "@testing-library/user-event";

test("submits the form", async () => {
  const user = userEvent.setup();
  const onSubmit = vi.fn();
  render(<UserForm onSubmit={onSubmit} />);

  await user.type(screen.getByLabelText("Email"), "[e-mail]");
  await user.click(screen.getByRole("button", { name: /save/i }));

  expect(onSubmit).toHaveBeenCalledWith({ email: "[e-mail]" });
});

• Always await userEvent calls
• Call userEvent.setup() once per test, reuse the returned user
• userEvent simulates a real browser sequence; fireEvent dispatches a single synthetic event — prefer userEvent

异步模式

// Element that appears after async work
expect(await screen.findByText("Loaded")).toBeInTheDocument();

// Side effect assertion
await waitFor(() => expect(saveSpy).toHaveBeenCalled());

// Element that should disappear
await waitForElementToBeRemoved(() => screen.queryByText("Loading"));

Never setTimeout + assertion — flaky. Use the matchers above.

使用 MSW 进行网络模拟

Mock Service Worker mocks at the network layer. The component, hooks, and fetch library all behave exactly as in production.

设置

// test/setup.ts
import { setupServer } from "msw/node";
import { http, HttpResponse } from "msw";

export const handlers = [
  http.get("/api/users/:id", ({ params }) =>
    HttpResponse.json({ id: params.id, name: "Alice" }),
  ),
  http.post("/api/users", async ({ request }) => {
    const body = await request.json();
    return HttpResponse.json({ id: "new-id", ...body }, { status: 201 });
  }),
];

export const server = setupServer(...handlers);

beforeAll(() => server.listen({ onUnhandledRequest: "error" }));
afterEach(() => server.resetHandlers());
afterAll(() => server.close());

Configure onUnhandledRequest: "error" so any unmocked request fails the test loudly — silent passes are worse than red.

按测试覆盖

test("renders error on 500", async () => {
  server.use(
    http.get("/api/users/:id", () => new HttpResponse(null, { status: 500 })),
  );
  render(<UserPage id="1" />);
  expect(await screen.findByText(/something went wrong/i)).toBeInTheDocument();
});

Provider 包装

Wrap providers once in a test-utils.tsx:

// test-utils.tsx
import { render, RenderOptions } from "@testing-library/react";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";

export function renderWithProviders(
  ui: React.ReactElement,
  options?: RenderOptions,
) {
  const queryClient = new QueryClient({
    defaultOptions: { queries: { retry: false } },
  });

  return render(
    <QueryClientProvider client={queryClient}>
      <ThemeProvider theme={lightTheme}>
        <MemoryRouter>{ui}</MemoryRouter>
      </ThemeProvider>
    </QueryClientProvider>,
    options,
  );
}

export * from "@testing-library/react";

Then import { renderWithProviders, screen } from "test-utils" in every test file.

自定义 Hook 测试

import { renderHook, act } from "@testing-library/react";

test("useCounter increments and decrements", () => {
  const { result } = renderHook(() => useCounter(0));

  expect(result.current.count).toBe(0);

  act(() => result.current.increment());
  expect(result.current.count).toBe(1);

  act(() => result.current.decrement());
  expect(result.current.count).toBe(0);
});

test("useCounter accepts initial value", () => {
  const { result } = renderHook(() => useCounter(10));
  expect(result.current.count).toBe(10);
});

test("useUser fetches user data", async () => {
  // Instantiate QueryClient ONCE per test outside the wrapper so it survives re-renders.
  
   queryClient =  ({
    : { : { :  } },
  });
    = () => (
    
  );

   { result } = ( (), { wrapper });

   ( (result..).());
  (result..).({ : , :  });
});

• Wrap state-changing calls in act
• Test through the hook's public API only
• For hooks that use context, pass a wrapper

可访问性 Assertions

import { axe, toHaveNoViolations } from "jest-axe"; // or vitest-axe
expect.extend(toHaveNoViolations);

test("UserCard has no a11y violations", async () => {
  const { container } = render(<UserCard user={mockUser} />);
  expect(await axe(container)).toHaveNoViolations();
});

Run axe in component tests for every interactive component. Catches:

• Missing labels on form inputs
• Invalid ARIA usage
• Poor color contrast (limited — JSDOM has no real CSS engine, so this works for inline styles only; visual contrast belongs in Playwright)
• Missing alt text on images
• Heading order violations

Cross-link: skills/accessibility/SKILL.md for the broader a11y testing playbook.

何时不使用快照测试

Snapshots of rendered output:

• Break on every styling change
• Get rubber-stamped during review
• Test implementation detail (DOM structure), not behavior

Acceptable snapshot uses:

• Pure data serialization functions (formatInvoice(invoice) -> stable string)
• Generated config files (e.g., webpack config output)

For visual regression on components, use Playwright/Cypress screenshots or Percy/Chromatic — actual visual diffs, not DOM strings.

何时使用 Playwright / Cypress

JSDOM (used by Vitest/Jest) cannot:

• Render real layout (flexbox, grid, viewport queries)
• Run native browser animation, CSS transitions
• Test scrolling behavior, drag-and-drop, paste from clipboard
• Handle iframes, popups, downloads, cross-origin flows
• Run real network in a controlled environment with full DevTools support

For any of those, use Playwright Component Testing (component test in real browser) or full E2E. See e2e-testing skill.

Decision boundary:

• A hook, a presentational component, a form with logic -> RTL
• A component whose layout matters or that uses browser APIs not in JSDOM -> Playwright CT
• A full user flow across multiple pages -> Playwright/Cypress E2E

覆盖率目标

Layer	Target
Pure utilities	>=90%
Custom hooks	>=85%
Presentational components	>=80% — behavior, not lines
Container components	>=70% — golden paths + error states
Pages	E2E covered separately; smoke test minimum

Configure via vitest.config.ts / jest.config.js:

// vitest.config.ts
test: {
  coverage: {
    provider: "v8",
    reporter: ["text", "html", "lcov"],
    thresholds: {
      lines: 80,
      functions: 80,
      branches: 70,
      statements: 80,
    },
  },
}

反模式

• container.querySelector("...") — bypasses accessibility queries, lets tests pass when real users would fail
• Asserting on number of renders — implementation detail
• jest.mock("react", ...) — never mock React. Refactor the component instead
• Mocking child components by default — tests the integration, not isolation. Mock only when the child has heavy side effects
• Ignoring act() warnings — they signal real bugs (state update after unmount, missing async wrapping)
• Sharing mutable state across tests — flakes when test order changes
• Tests that pass with it.skip() removed — your test does not actually assert what you think

TDD 工作流

RED     -> Write failing test for the next requirement
GREEN   -> Write minimal component code to pass
REFACTOR -> Improve the component, tests stay green
REPEAT  -> Next requirement

For new components:

1. Define the component's prop type and signature
2. Write the first test for the simplest case
3. Verify it fails for the right reason
4. Implement just enough to pass
5. Add the next test case
6. Refactor when the third similar test reveals a pattern

测试命令

# Vitest
vitest                            # watch
vitest run                        # one-shot
vitest run --coverage             # with coverage
vitest run path/to/file.test.tsx  # single file

# Jest
jest --watch
jest --coverage
jest path/to/file.test.tsx

# CI mode
CI=true vitest run --coverage

相关内容

• Rules: rules/react/testing.md
• Skills: react-patterns, accessibility, e2e-testing, tdd-workflow
• Agents: react-reviewer (reviews test quality during code review), tdd-guide (enforces TDD process)
• Commands: /react-test, /react-review

示例

使用 MSW 和 userEvent 的表单提交

test("submits user form and shows success", async () => {
  server.use(
    http.post("/api/users", () =>
      HttpResponse.json({ id: "1", name: "Alice" }, { status: 201 }),
    ),
  );

  const user = userEvent.setup();
  renderWithProviders(<UserForm />);

  await user.type(screen.getByLabelText("Name"), "Alice");
  await user.type(screen.getByLabelText("Email"), "[e-mail]");
  await user.click(screen.getByRole("button", { name: /save/i }));

  expect(await screen.findByText(/saved successfully/i)).toBeInTheDocument();
});

测试错误边界

function Broken() {
  throw new Error("boom");
}

test("error boundary renders fallback", () => {
  // Suppress React's console.error noise for the expected throw, then restore so
  // the spy does not leak across tests and hide real errors elsewhere.
  const errorSpy = vi.spyOn(console, "error").mockImplementation(() => {});
  try {
    render(
      <ErrorBoundary fallback={<div>Something went wrong</div>}>
        <Broken />
      </ErrorBoundary>,
    );

    expect(screen.getByText("Something went wrong")).toBeInTheDocument();
  } finally {
    errorSpy.mockRestore();
  }
});

测试 Suspense 边界

test("shows loading then content", async () => {
  renderWithProviders(
    <Suspense fallback={<div>Loading...</div>}>
      <UserDetail id="1" />
    </Suspense>,
  );

  expect(screen.getByText("Loading...")).toBeInTheDocument();
  expect(await screen.findByText("Alice")).toBeInTheDocument();
});