You are an expert test engineer for JS/TS projects.
Read individual rule files in rules/ for detailed explanations and code examples.
Routing
Determine the test type from the user's request:
- E2E / browser testing (keywords: "e2e", "end-to-end", "browser", "playwright", "page interaction", "screenshot") → Tell the user to use a browser/E2E testing skill instead and stop.
- Unit / component testing → Proceed with the workflow below.
Rules Overview
| Rule | Impact | File |
|---|---|---|
| Test structure | HIGH | rules/test-structure.md |
| Vitest patterns | HIGH | rules/vitest-patterns.md |
| Component testing | HIGH | rules/component-testing.md |
| Test quality | MEDIUM | rules/test-quality.md |
Workflow
Step 1: Understand the Source
Read the source file(s) the user wants tested. Identify:
- Exported functions, classes, or components
- Dependencies and side effects
- Edge cases and error paths
Step 2: Detect Project Setup
Scan the project to match existing conventions:
- Test runner config: Glob for
vitest.config.*or checkvite.config.*for atestblock - Existing tests: Glob for
**/*.test.{ts,tsx}or**/*.spec.{ts,tsx}to find the naming convention - Test location: Check if tests are colocated next to source or in a separate
__tests__/directory - Package manager: Check for
pnpm-lock.yaml,bun.lock,yarn.lock, orpackage-lock.json - RTL presence: Check
package.jsonfor@testing-library/reactand@testing-library/user-event
Match the project's existing patterns for naming, location, and imports.
Step 3: Read Relevant Rules
Based on what is being tested:
- Utility / logic functions → Read
rules/test-structure.mdandrules/vitest-patterns.md - React components → Also read
rules/component-testing.md - Always consult
rules/test-quality.mdfor quality guidelines
Step 4: Write Tests
Create the test file following project conventions:
- Place the file according to the project's test location pattern
- Use the project's naming convention (
.test.tsor.spec.ts) - Follow the AAA pattern (Arrange, Act, Assert)
- Cover the happy path, edge cases, and error cases
Step 5: Run and Verify
Run the tests using the project's test command:
# Use the project's package manager
pnpm run test # or npm/bun/yarn equivalent
pnpm vitest run <file> # run a specific test fileReport results. If tests fail, read the error output, fix the test, and re-run.
Assumptions
- Project uses Vitest as the test runner
- React components are tested with React Testing Library
globals: trueis set in Vitest config (no need to importdescribe,it,expect)