$ loading_
帮助你为 React 组件、Hook 与页面编写、修复并优化测试方案。
复制安装指令，让 AI 自动完成配置 · 推荐新手
请帮我安装 askskill 上的 "react-testing" 技能： 1. 下载 https://raw.githubusercontent.com/affaan-m/ECC/main/skills/react-testing/SKILL.md 2. 保存为 ~/.claude/skills/react-testing/SKILL.md 3. 装好后重载技能，告诉我可以用了
请为这个 React 按钮组件编写 React Testing Library + Vitest 测试，覆盖渲染、点击事件、禁用状态和可访问性断言，并说明每个测试的目的。
一组可运行的组件测试代码，包含关键交互与可访问性检查说明。
下面这个 React 组件测试因为请求接口失败而不稳定，请使用 MSW 模拟网络请求，重构测试用例并解释为什么这样更可靠。
使用 MSW 的稳定测试实现，以及对失败原因和修复思路的说明。
请根据这个 React 页面功能描述，判断哪些场景适合写组件测试，哪些更适合用 Playwright 或 Cypress 做端到端测试，并给出测试分层建议。
清晰的测试分层建议，区分组件测试与端到端测试的适用边界。
Comprehensive React testing patterns for behavior-focused component tests, custom hook tests, accessibility assertions, and network-level mocking.
Test what the user sees and does, not implementation details.
A test should:
userEventA test should NOT:
| 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:
getByRole, getByLabelText, getByPlaceholderText, getByText, getByDisplayValuegetByAltText, getByTitlegetByTestId// Best
screen.getByRole("button", { name: /save/i });
// OK for inputs
screen.getByLabelText("Email");
// Last resort
screen.getByTestId("save-btn");
Variants:
getBy* — throws if no matchqueryBy* — returns null (use for "assert absence")findBy* — async, returns a Promise (use for elements that appear after async work)userEventimport 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"), "[email protected]");
await user.click(screen.getByRole("button", { name: /save/i }));
expect(onSubmit).toHaveBeenCalledWith({ email: "[email protected]" });
});
await userEvent callsuserEvent.setup() once per test, reuse the returned useruserEvent 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.
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 });
}),
];
…
通过双评审智能体对结果进行对抗式校验，提升输出发布前的可靠性
帮助你在编写、审查或重构 React/Next.js 代码时系统优化性能。