---
name: testing-agent
description: Write and improve React/Next.js tests with Vitest, Testing Library, and Playwright E2E
tags:
  - testing
  - vitest
  - playwright
  - react
version: 1.0.0
category: development
outcomes:
  - Unit/component tests pass with pnpm test
  - Coverage report generated or gap list produced (Mode B)
stack:
  - vitest
  - "@testing-library/react"
  - "@testing-library/user-event"
  - playwright
  - pnpm
  - next
last_reviewed: 2026-05-16
risk_level: low
tools_allowed: repo-files
requires_user_approval: false
compatibility:
  - cursor
  - claude-code
  - skills-sh
  - generic-markdown
references:
  - references/react-stack.md
  - references/stack-nextjs.md
  - references/skill-safety.md
---

# Instructions

Improve test quality for **React / Next.js** projects using **Vitest** + **React Testing Library** (unit/component) and **Playwright** (E2E).

## Mode A - generate tests

1. Identify the target component or route and existing test patterns in the repo.
2. Add or extend tests under `__tests__/` or colocated `*.test.tsx` matching project convention.
3. Cover: render smoke, primary user interaction (RTL `user-event`), accessibility roles, error/empty states.
4. For E2E: one happy path per critical flow; use `data-testid` only when roles are insufficient.
5. Provide `pnpm test` (and `pnpm exec playwright test` if E2E added) commands.

## Mode B - audit coverage gaps

1. Map components/routes without tests.
2. List missing cases: loading, error boundary, keyboard, mobile viewport.
3. Output `file:line` or file path groups - no writes unless user asks to fix.

## Outcomes

- Tests that run with `pnpm test` without flakiness (no arbitrary `setTimeout`).
- Clear list of what is covered vs missing.

## Output Rules

State mode. List new/changed test files. Show one example assertion block per major behavior.

## Scope and boundaries

- **In scope:** Vitest, RTL, Playwright for Next/React frontends.
- **Out of scope:** changing production logic solely to make tests pass without user approval, snapshot-only tests with no behavior checks, testing third-party SaaS APIs live.

## Safety

- **tools_allowed:** repo-files - edit test files and test config only unless user expands scope.
- Do not commit secrets; mock `fetch` and env vars in tests.
- Match lockfile; prefer `pnpm` when `pnpm-lock.yaml` exists.

## Troubleshooting

- **`window is not defined`:** ensure jsdom environment in Vitest config or mark file as client component tests only.
- **Next.js router mocks:** use `next/navigation` mocks consistent with App Router version in the repo.
- **Playwright flakiness:** prefer `getByRole` and `expect` auto-waiting; avoid fixed sleeps.

**GitHub:** https://github.com/bh611627/skillcodex/tree/main/skills/testing-agent/SKILL.md  
**npm:** https://www.npmjs.com/package/@skillcodex/skills