vitest-testing
Vitest testing framework for unit, component, and integration tests. Covers test structure (describe/it/test.each), assertions with expect, lifecycle hooks, mocking (vi.fn/vi.mock/vi.spyOn), React Testing Library patterns, hook testing with renderHook, user-event interactions, async utilities, configuration, workspace setup, coverage, and advanced patterns like in-source testing and concurrent execution. Also covers CLI commands, test filtering, tags, sharding, fixtures with test.extend, and fixture scoping. Use when writing unit tests, component tests, integration tests, or testing React hooks. Use for test configuration, mocking modules, testing async behavior, snapshot testing, or setting up test coverage.
- Installs
- 214
- Last 24h
- —
- Trending rank
- —
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/oakoss/agent-skills --skill vitest-testing- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads vitest-testing automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
SKILL.md
The instructions your agent reads when the skill is triggered.
Vitest Testing
Overview
Vitest is a Vite-native unit testing framework that shares the same configuration and plugin ecosystem. Built for speed with native ESM support, hot module replacement for tests, and parallel execution.
When to use: Unit tests, component tests, integration tests, hook tests, in-source tests. Testing React components with React Testing Library. Testing TanStack Query/Router/Form patterns.
When NOT to use: End-to-end testing (use Playwright), visual regression testing (use Percy/Chromatic), load testing (use k6).
Quick Reference
| Pattern | API | Key Points |
|---|---|---|
| Test structure | describe('suite', () => {}) | Organize related tests |
| Single test | test('behavior', () => {}) or it() | Both are aliases |
| Parameterized tests | test.each([...])('name', (arg) => {}) | Run same test with different inputs |
| Concurrent tests | test.concurrent('name', async () => {}) | Run tests in parallel |
| Skip test | test.skip('name', () => {}) or skipIf(cond) | Conditionally skip tests |
| Only test | test.only('name', () => {}) | Run specific test for debugging |
| Assertions | expect(value).toBe(expected) | Compare primitive values |
| Deep equality | expect(obj).toEqual(expected) | Compare objects/arrays |
| Async assertions | await expect(promise).resolves.toBe(value) | Test promise resolution |
| Before each test | beforeEach(() => {}) | Setup before each test |
| After each test | afterEach(() => {}) | Cleanup after each test |
| Mock function | vi.fn() | Create spy function |
| Mock module | vi.mock('./module') | Replace entire module |
| Spy on method | vi.spyOn(obj, 'method') | Track calls to existing method |
| Clear mocks | vi.clearAllMocks() | Clear call history |
| Fake timers | vi.useFakeTimers() | Control setTimeout/setInterval |
| Render component | render(<Component />) | Mount React component for testing |
| Query by role | screen.getByRole('button') | Find elements by accessibility role |
| User interaction | await user.click(element) | Simulate user events |
| Wait for change | await waitFor(() => expect(...)) | Wait for async changes |
| Find async element | await screen.findByText('text') | Query + wait combined |
| Render hook | renderHook(() => useHook()) | Test custom hooks |
| Update hook props | rerender(newProps) | Re-render hook with new props |
| Snapshot | expect(value).toMatchSnapshot() | Compare against saved snapshot |
| Inline snapshot | expect(value).toMatchInlineSnapshot() | Snapshot stored in test file |
| CLI run once | vitest run | Single run, no watch |
| Run changed tests | vitest --changed | Tests affected by git changes |
| Filter by name | vitest -t "pattern" | Grep test names |
| Soft assertions | expect.soft(value).toBe(x) | Continue on failure, collect all |
| Poll assertions | await expect.poll(() => val).toBe(x) | Retry until passing |
| Test fixtures | const test = base.extend<F>({...}) | Reusable setup via test.extend |
| Hoisted mocks | vi.hoisted(() => ({ fn: vi.fn() })) | Variables for vi.mock factory |
| Shard tests | vitest --shard 1/3 | Split across CI workers |
| Tags | test('name', { tags: ['slow'] }, ...) | Filter with --tags-filter |
| Stub globals | vi.stubGlobal('fetch', vi.fn()) | Replace global objects cleanly |
Common Mistakes
| Mistake | Correct Pattern |
|---|---|
Using getBy for async content | Use findBy or waitFor for async |
| Testing implementation details | Test behavior and public API |
Using getByTestId as first choice | Prefer getByRole, getByLabelText, getByText |
Missing userEvent.setup() | Always call const user = userEvent.setup() first |
| Shared state between tests | Use beforeEach to reset or create fresh instances |
| Not cleaning up mocks | Use vi.clearAllMocks() in afterEach |
| Mocking too much | Only mock external dependencies and APIs |
| Not disabling retries in tests | Set retry: false for TanStack Query tests |
| Immediate assertions on async | Use await waitFor() or findBy queries |
| Creating QueryClient in render | Create once in wrapper or use useState |
| Testing library code | Trust the library, test your usage |
| Not awaiting user events | All user.* methods return promises |
Using act manually | userEvent and Testing Library handle this |
| Inline select without memoization | Extract to stable function for TanStack Query |
| Variables in vi.mock factory | Use vi.hoisted() to declare mock variables |
Single expect for multiple checks | Use expect.soft() to collect all failures |
setTimeout in tests for async waits | Use expect.poll() or vi.waitFor() |
Manual beforeEach for reusable setup | Use test.extend fixtures for composable setup |
Delegation
- Test discovery: For finding untested code paths, use
Exploreagent - Coverage analysis: For full coverage review, use
Taskagent - E2E testing: If
playwrightskill is available, delegate E2E testing to it - Code review: After writing tests, delegate to
code-revieweragent
References
- Test fundamentals: structure, assertions, lifecycle hooks
- Mocking: vi.fn, vi.mock, vi.spyOn, module mocking
- Component testing: React Testing Library, queries, user-event
- Hook testing: renderHook, async hooks, TanStack patterns
- Test setup: jest-dom matchers, cleanup, custom render, MSW, polyfills
- Configuration: vitest.config.ts, workspace, coverage, reporters
- Advanced patterns: snapshots, concurrent tests, in-source, type testing
- CLI and filtering: commands, watch mode, tags, sharding
- Fixtures and context: test.extend, scoping, auto fixtures, injection
FAQ
What does the vitest-testing skill do?
Vitest testing framework for unit, component, and integration tests. Covers test structure (describe/it/test.each), assertions with expect, lifecycle hooks, mocking (vi.fn/vi.mock/vi.spyOn), React Testing Library patterns, hook testing with renderHook, user-event interactions, async utilities, configuration, workspace setup, coverage, and advanced patterns like in-source testing and concurrent execution. Also covers CLI commands, test filtering, tags, sharding, fixtures with test.extend, and fixture scoping. Use when writing unit tests, component tests, integration tests, or testing React hooks. Use for test configuration, mocking modules, testing async behavior, snapshot testing, or setting up test coverage.
How do I install vitest-testing?
Run npx skills add https://github.com/oakoss/agent-skills --skill vitest-testing in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/vitest-testing/ (personal) or .claude/skills/vitest-testing/ (project).
Which AI agents can use vitest-testing?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is vitest-testing safe to install?
No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.
Who maintains vitest-testing?
It is published by oakoss in oakoss/agent-skills. It has 214 recorded installs.
More from oakoss/agent-skills
ui-ux-polish
oakoss/agent-skills
Iterative UI/UX polishing workflow for web applications. Use when improving visual polish, refining desktop and mobile UX separately, running iterative enhancement cycles, applying design patterns like glassmorphism or bento grids, or auditing accessibility and WCAG compliance. Use for Stripe-level visual quality, responsive optimization, and design system alignment.
playwright
oakoss/agent-skills
Open the skill to read its SKILL.md instructions.
coolify
oakoss/agent-skills
Coolify self-hosted PaaS for deploying applications, databases, and services via REST API and Git integration. Covers API authentication, deployment triggers, build packs (Nixpacks, Dockerfile, Compose), CI/CD with GitHub Actions webhooks, environment management, and Traefik proxy configuration. Use when deploying apps to Coolify, triggering deployments via API, configuring build packs, setting up GitHub Actions CI/CD pipelines, managing environment variables, or troubleshooting deployment failures.
application-security
oakoss/agent-skills
Open the skill to read its SKILL.md instructions.
find-skills
oakoss/agent-skills
Open the skill to read its SKILL.md instructions.
drizzle-orm
oakoss/agent-skills
Open the skill to read its SKILL.md instructions.
Popular testing & qa skills
tdd
mattpocock/skills
Test-driven development. Use when the user wants to build features or fix bugs test-first, mentions "red-green-refactor", or wants integration tests.
grilling
mattpocock/skills
Grill the user relentlessly about a plan, decision, or idea. Use when the user wants to stress-test their thinking, or uses any 'grill' trigger phrases.
migrate-to-shoehorn
mattpocock/skills
Migrate test files from as type assertions to @total-typescript/shoehorn. Use when user mentions shoehorn, wants to replace as in tests, or needs partial test data.
run-train
lllllllama/rigorpilot-skills
Rigor Train skill for deep learning research repositories. Use when a documented or selected training command should be run conservatively for startup verification, short-run verification, full kickoff, or resume, with command, config, seed, log, checkpoint, status, and metric evidence written to standardized trainoutputs/. Do not use for environment setup, exploratory sweeps, speculative idea implementation, or end-to-end orchestration.
test-driven-development
obra/superpowers
Use when implementing any feature or bugfix, before writing implementation code
finishing-a-development-branch
obra/superpowers
Use when implementation is complete, all tests pass, and you need to decide how to integrate the work