Agent Skills › AjayIrkal23/agentic-mercy-10x › vitest-rtl

vitest-rtl

GitHub

提供Vitest和React Testing Library的测试规范，涵盖组件、Hooks及状态测试。强调用户视角查询、异步处理、网络边界Mock及TDD实践，确保测试有效性与可维护性。

skills/vitest-rtl/SKILL.md AjayIrkal23/agentic-mercy-10x

Trigger Scenarios

编写前端单元测试配置Vitest测试环境调试React组件测试失败

Install

npx skills add AjayIrkal23/agentic-mercy-10x --skill vitest-rtl -g -y

More Options

Use without installing

npx skills use AjayIrkal23/agentic-mercy-10x@vitest-rtl

指定 Agent (Claude Code)

npx skills add AjayIrkal23/agentic-mercy-10x --skill vitest-rtl -a claude-code -g -y

安装 repo 全部 skill

npx skills add AjayIrkal23/agentic-mercy-10x --all -g -y

预览 repo 内 skill

npx skills add AjayIrkal23/agentic-mercy-10x --list

SKILL.md

Frontmatter

{
    "name": "vitest-rtl",
    "metadata": {
        "schema": 1,
        "category": "testing",
        "surfaces": [
            "frontend"
        ],
        "triggers": {
            "intents": [
                "TEST"
            ],
            "keywords": [
                "vitest",
                "vitest run",
                "react testing library",
                "testing library",
                "renderhook",
                "userevent",
                "getbyrole",
                "jest-dom",
                "vi.mock",
                "component test",
                "hook test",
                "watch mode"
            ]
        },
        "platforms": [
            "linux",
            "darwin",
            "windows"
        ]
    },
    "description": "Vitest and React Testing Library conventions: one-shot vitest run, role-based queries, userEvent, async findBy, mocking at the network or module boundary, hook tests with renderHook and Redux-wrapped renders.",
    "when_to_use": "Use when writing, fixing or reviewing Vitest tests, React component or hook tests, or when a test run hangs in watch mode."
}

Vitest + React Testing Library

Use the repo's existing config and helpers first (vitest.config.* or the test block in vite.config.*, setupTests, a renderWithProviders helper). The repo wins.

Run it once

Bare vitest starts watch mode and never exits. Always:

npx vitest run path/to/file.test.tsx      # one file
npx vitest run -t "rejects empty email"   # one test by name
npm test -- --run                          # when the script is plain "vitest"

Check package.json scripts.test first; if it already says vitest run, npm test is fine.

Component tests

render(<Comp />) then query the way a user perceives the UI: getByRole("button", { name: /save/i }) > getByLabelText > getByText > getByTestId (last resort).
Interactions: const user = userEvent.setup(); await user.click(...); type with user.type. Prefer it over fireEvent.
Async UI: await screen.findByText(...) or await waitFor(() => expect(...)); never fixed sleeps. Assert absence with queryBy... + not.toBeInTheDocument().
Matchers like toBeInTheDocument need @testing-library/jest-dom/vitest imported in the setup file.

Hooks and state

renderHook(() => useThing(args), { wrapper }) from @testing-library/react; drive updates inside act or by awaiting the resulting state.
Redux Toolkit: build a fresh store per test with the real reducers and preloaded state, wrap with <Provider store={store}> (a shared renderWithProviders helper). Assert on rendered output or store state, not on dispatched action internals.

Mocks: at the boundary

Mock the network or the API module (vi.mock("@/api/projects")), not the component under test or the hook you are testing. A test that only proves the mock returned what you told it is a false green.
vi.mock is hoisted; reference outer variables through vi.hoisted. Reset with vi.restoreAllMocks() / vi.clearAllMocks() in afterEach.
Timers: vi.useFakeTimers() + vi.advanceTimersByTime(); restore real timers after.

Shape

One behaviour per test, named for the behaviour ("shows an error when the save fails"). Files sit beside the code (X.test.tsx) or in __tests__/, as the repo does.
Watch it fail first (TDD): break the code path once and confirm the test goes red.

Not this skill

Browser end-to-end flows (webapp-testing), TDD discipline itself (test-driven-development), suites that pass while the app is broken (false-green-tests).