← ClaudeAtlas

test-tslisted

Write, review, and run TypeScript/React tests for this Next.js 16 App Router project. Use whenever writing or modifying *.test.ts or *.test.tsx files, adding test coverage to components, hooks, Server Actions, or utilities, setting up Vitest configuration, or asked about testing strategy. Covers Vitest (the project's test runner, not Jest), React Testing Library v16, accessibility-first queries, user-event for interactions, AAA structure, parameterized tests with describe.each and it.each, Prisma mock patterns, next/navigation and next/headers mocking, and the RSC boundary testing strategy. Do NOT use for Playwright end-to-end tests or performance benchmarks.
sergeyklay/.agents · ★ 5 · Testing & QA · score 80
Install: claude install-skill sergeyklay/.agents
# TypeScript/React testing This project uses **Vitest** as the test runner. The Next.js 16 official documentation recommends Vitest over Jest for App Router projects: native ESM and TypeScript support require no additional transformation configuration, and Vitest runs 3–5x faster than Jest on equivalent suites. Do not introduce Jest. ## Test runner commands ```bash npm test # run all tests once npm run test:watch # watch mode npm run test:coverage # with coverage report # Targeted runs npx vitest run src/components/invoice/ # run tests in a directory npx vitest run -t "renders the client" # filter by test name pattern npx vitest run path/to/component.test.tsx # run a single file ``` ## Decision framework Before writing any test, classify it: | Category | What it covers | Vitest environment | |---|---|---| | **Unit** | Pure functions, utilities, Zod schemas, computed logic | `node` | | **Component** | Client Components rendered with RTL | `jsdom` | | **Hook** | Custom hooks via `renderHook` | `jsdom` | | **Server Action** | `'use server'` functions with mocked Prisma | `node` | | **Integration** | Real database or external service | `node` + env gate | `jsdom` is the default environment configured in `vitest.config.ts`. For Server Actions and utilities, add a file-level directive to switch to `node`: ```typescript // @vitest-environment node import { describe, it, expect, vi, befor