Help us improve
Share bugs, ideas, or general feedback.
From frontend-craft
Guides frontend unit, component, and light integration tests using React Testing Library, Vue Test Utils, accessible queries, user-event, mocks, and state coverage.
npx claudepluginhub bovinphang/frontend-craftHow this skill is triggered — by the user, by Claude, or both
Slash command
/frontend-craft:fec-component-testingThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
用贴近代码和用户行为的测试验证纯逻辑、组件契约与轻量模块协作,减少重构和 UI 交互回归。
Generates frontend component tests (React Testing Library, Vue Test Utils, snapshot) for existing components. Useful when adding or expanding test coverage.
Provides testing patterns and examples for React components, hooks, and integrations using Vitest, React Testing Library, and Jest.
Guides framework-agnostic testing of front-end UIs with DOM Testing Library: behavior-first queries, userEvent interactions, async patterns, MSW mocking, and anti-patterns.
Share bugs, ideas, or general feedback.
用贴近代码和用户行为的测试验证纯逻辑、组件契约与轻量模块协作,减少重构和 UI 交互回归。
跨页面真实浏览器流程分流到 fec-e2e-testing;测试层选择不清楚时先用 fec-testing-strategy。
import { render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { SearchBox } from "./SearchBox";
test("submits the entered keyword", async () => {
const user = userEvent.setup();
const onSearch = vi.fn();
render(<SearchBox onSearch={onSearch} />);
await user.type(screen.getByRole("searchbox", { name: /keyword/i }), "orders");
await user.click(screen.getByRole("button", { name: /search/i }));
expect(onSearch).toHaveBeenCalledWith("orders");
});
import { mount } from "@vue/test-utils";
import UserMenu from "./UserMenu.vue";
test("emits logout when the logout item is clicked", async () => {
const wrapper = mount(UserMenu, {
props: { userName: "Ada" },
});
await wrapper.get('[data-testid="logout-button"]').trigger("click");
expect(wrapper.emitted("logout")).toHaveLength(1);
});
优先使用角色、标签和可见文本;仅在没有稳定语义时使用 data-testid。
vi.mock("../api/users", () => ({
fetchUsers: vi.fn(async () => [{ id: "1", name: "Ada" }]),
}));
每个复杂组件至少覆盖:
function setup() {
const user = userEvent.setup();
const onSubmit = vi.fn();
render(<ProfileForm onSubmit={onSubmit} />);
return { user, onSubmit };
}
将重复渲染逻辑放入 setup,但不要隐藏测试的核心操作和断言。
findBy* 或 waitFor,不要用固定延迟。fec-testing-strategy — 选择静态检查、单元、组件、集成、E2E、视觉和专项质量层级。fec-e2e-testing — 跨页面关键路径、真实浏览器、登录态和 CI artifacts。fec-storybook-component-doc — 组件用法文档、视觉状态枚举和 Storybook interaction tests。fec-accessibility-check — 键盘、焦点和 ARIA 的专项审查。fec-validation-fix — 运行已有验证命令并修复 lint/typecheck/test/build 失败。产出与组件同目录或项目约定目录下的测试文件,覆盖核心交互、状态和回归场景。验证时运行项目现有 test 命令,确认失败信息能定位到用户行为或组件契约。