Next.js Testing
Priority: P1 (HIGH)
Structure
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