# Nextjs Testing

> Unit, Integration, and E2E testing standards for App Router. Use when writing unit, integration, or Playwright E2E tests for a Next.js App Router project. (triggers: **/*.test.{ts, tsx}, cypress/**, tests/**, vitest, playwright, msw, testing-library)

- Skill: `comeonoliver/nextjs-testing` (Agent Skill)
- Install (CLI): `npx skillmds@latest add comeonoliver/nextjs-testing`
- Raw SKILL.md: https://api.skillmd.com/api/skills/comeonoliver/nextjs-testing/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: ComeOnOliver (https://skillmd.com/u/comeonoliver)
- Updated: 2026-09-08
- Page: https://skillmd.com/skills/comeonoliver/nextjs-testing

---


# Next.js Testing

## **Priority: P1 (HIGH)**

## Structure

```text
tests/
├── unit/               # Vitest + RTL
├── e2e/                # Playwright
└── mocks/              # MSW Handlers
```

## Implementation Guidelines

- **Unit Testing**: Use **Vitest** for speed and **React Testing Library (RTL)** for component behavior. Follow **Arrange-Act-Assert (AAA)** patterns.
- **E2E Testing**: Use **Playwright** for full-stack **App Router** validation. Focus on **User Flows** (e.g., Login, Checkout).
- **Networking**: Mock all internal/external API boundaries using **Mock Service Worker (MSW)**. Ensure **`server` and `browser` handlers** are correctly configured.
- **RSC Testing**: Test **React Server Components (RSC)** using the same patterns as libraries (SSR-compatible tests). Prefer **E2E tests** for complex async data-fetching logic.
- **Interactions**: Use **`userEvent` (async)** to simulate user actions: `await user.click(button)`.
- **Selectors**: Favor **`getByRole`** / **`findByRole`** to test accessibility. Use **`data-testid`** only as a fallback.
- **Environment**: Configure **`vitest.config.ts`** with **`jsdom`** or **`happy-dom`** for component tests.
- **Reporting**: Ensure tests generate **JSON coverage reports** for CI gates. Aim for **80%+ coverage** on core libraries.

## Anti-Patterns

- **No real network usage in tests**: Always use MSW handlers or mocks.
- **No implementation testing**: Test user behavior, not internal methods.
- **No heavy E2E for unit logic**: Use Vitest for isolated logic tests.
- **No global state leakage**: Reset MSW handlers and mocks after each test.

## References

- [Next.js Test Patterns](references/implementation.md)