Testing

Set up Vitest with Next.js 15 and React 19 — config, jsdom environment, Testing Library, path aliases, and CSS handling for unit tests.

Configure Jest with Next.js using the official next/jest preset for zero-config TypeScript and path alias support.

Test your components the way users interact with them -- by querying accessible elements, not implementation details.

Test component rendering, user interactions, conditional UI, and dynamic content with confidence.

Test custom hooks in isolation using renderHook -- verify state changes, async behavior, and context dependencies.

Mocking in React tests — vi.mock, module factories, partial mocks, fetch and MSW, timers, modules with side effects, and reset patterns.

Test React forms with Vitest and Testing Library — controlled inputs, validation messages, submission flows, and React Hook Form patterns.

Test async React behavior with Vitest and Testing Library — waitFor, findBy queries, fake timers, and patterns for promises and effects.

Test components that depend on React Context, Zustand stores, or other global state providers.

Test async Server Components, Server Actions, and Route Handlers by treating them as plain async functions.

Install and configure Playwright for end-to-end testing of your Next.js application.

Apply Page Object Model, robust locator strategies, and assertion patterns for maintainable E2E tests.

Advanced Playwright patterns for Next.js — auth state reuse, network mocking, visual diffs, parallelism, and CI-friendly debugging tactics.

React testing strategy and best practices — unit, integration, end-to-end split, behavior over implementation, and what to test in Next.js apps.

A condensed summary of the 25 most important best practices drawn from every page in this section.