Tester Agent

Generate and validate Vitest, RTL, and Playwright tests for Next.js 14+ projects.

Updated Mar 24, 2026

Search Tags:#vitest #nextjs #playwright #test-generation #coverage #mocking #react-testing-library

One-click install

npx skills add https://github.com/SumitRajpal/nextjs-claude-architecture --skill tester-agent

Or copy as Structured Prompt for Agent▼

Please help me install this Agent Skill.
Skill: Tester Agent
Source: https://github.com/SumitRajpal/nextjs-claude-architecture/tree/main/.claude/agents/tester-agent
Command: npx skills add https://github.com/SumitRajpal/nextjs-claude-architecture --skill tester-agent

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Automates the creation of thorough tests for Next.js 14+ projects, ensuring code quality and full coverage.

Core Features & Use Cases

Unit/Integration: Vitest + React Testing Library
E2E: Playwright
Mocking: vi.mock(), msw (Mock Service Worker) for API mocking
Database: Test with a real Postgres test DB or in-memory SQLite via Prisma
Coverage: Istanbul (built into Vitest)

What to Test

React Components

For every React component, generate tests covering:

Default render — component mounts without errors with minimal required props
All prop variants — test each significant prop combination (e.g., variant="destructive", disabled, loading)
User interactions — userEvent.click(), userEvent.type(), form submission
Conditional rendering — branches that show/hide elements
Error states — component renders error UI when appropriate
Accessibility — run axe via @axe-core/react or check for role, aria-label presence
Snapshot — only for highly stable presentational components; prefer explicit assertions

Example structure: describe('Button', () => { it('renders with default props', () => { ... }) it('renders loading spinner when isLoading=true', () => { ... }) it('calls onClick handler when clicked', async () => { ... }) it('is disabled when disabled=true', () => { ... }) it('applies destructive variant styles', () => { ... }) it('meets accessibility requirements', async () => { ... }) })

Custom Hooks

For every custom hook, generate tests covering:

Initial state — hook returns correct initial values
State transitions — calling returned functions updates state correctly
Async operations — loading/error/success states
Cleanup — subscriptions and timers are cleaned up on unmount
Dependencies — hook re-runs when deps change

Use renderHook from React Testing Library.

API Routes (Route Handlers)

For every route.ts in src/app/api/:

Success path — valid request returns 200 with expected shape
Validation errors — invalid input returns 400 with error details
Auth enforcement — unauthenticated requests return 401; unauthorized return 403
Not found — missing resource returns 404
Method not allowed — wrong HTTP method returns 405
Server errors — DB failures return 500 with safe error message (not stack trace)

Server Actions

Happy path — correct input produces expected mutation and return value
Validation failure — invalid input returns structured error
Auth check — unauthenticated call throws or returns auth error
Revalidation — revalidatePath or revalidateTag is called correctly

Utility Functions

For every function in lib/ and utils/:

Test every branch of conditional logic
Test edge cases: empty string, zero, null, undefined, empty array
Test error throwing: invalid inputs throw with descriptive messages
For pure functions: use property-based testing when applicable

Quick Start

Generate comprehensive Vitest and Playwright tests for a given Next.js 14+ module, ensuring 100% test coverage for new code where applicable.

Frequently Asked Questions about Tester Agent

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I generate comprehensive tests for Next.js 14+ components and hooks?▼

To generate comprehensive tests for Next.js 14+ components and hooks, you can automate unit and integration test creation using Vitest and React Testing Library, covering default renders, user interactions, state transitions, and accessibility checks.

What's the best way to mock API routes and server actions in Vitest?▼

The best way to mock API routes and server actions in Vitest is using vi.mock() for module mocks and Mock Service Worker (msw) for API mocking, allowing you to simulate validation errors, auth enforcement, and server errors.

Does Playwright work for end-to-end testing in Next.js App Router projects?▼

Playwright works for end-to-end testing in Next.js App Router projects by automating browser interactions, validating route handlers, and ensuring server actions correctly trigger revalidation.

How do I enforce test coverage thresholds in a Next.js project?▼

You can enforce test coverage thresholds in a Next.js project by utilizing Istanbul coverage built into Vitest, ensuring 100% coverage for new code across components, hooks, API routes, and utility functions.

Can I test Prisma database queries with Vitest?▼

You can test Prisma database queries with Vitest by configuring your test environment to use a real Postgres test database or an in-memory SQLite database, validating success paths and server errors.

What should I test in custom React hooks using React Testing Library?▼

When testing custom React hooks using React Testing Library's renderHook, you should verify initial state, state transitions, async operation loading and error states, cleanup of subscriptions, and dependency changes.