Test risks at the cheapest reliable layer
A useful test suite is a portfolio, not a race for maximum coverage. Put pure transformations and policy rules in fast unit tests, exercise component behavior through the DOM, verify real service boundaries with integration tests, and reserve browser tests for critical user journeys.
Unit
Business rules, formatters, validators, cache keys, and authorization policies.
Integration
Route handlers, database queries, rendering boundaries, and provider adapters.
End to end
Sign-in, checkout, publishing, permissions, and other high-value workflows.
Write down the failure each test protects against. If a browser test merely repeats a component assertion, move it down the stack and keep the pipeline fast.
Test behavior through accessible interfaces
Render components the way users experience them and query by roles, names, and labels. This creates tests that support accessibility and survive harmless markup refactors. Mock the narrow network boundary, not React or Next.js internals.
render(<CheckoutSummary order={order} />);
await user.click(screen.getByRole("button", { name: /place order/i }));
expect(await screen.findByRole("status")).toHaveTextContent(/confirmed/i);Cover loading, empty, success, permission-denied, and recoverable-error states. Test server-rendered output separately from hydrated interactions when the route contains both.
Use realistic dependencies at server boundaries
Route handlers and server mutations deserve tests with representative request objects, trusted identity, schema validation, and a disposable database. Verify status codes and safe response contracts, plus the actual committed state.
Test failures and timeouts from external providers through a small adapter. The safe mutation principles in our Server Actions security guide provide a useful set of adversarial cases.
Keep browser tests focused and deterministic
Seed known data, control the clock when time matters, and give every run an isolated account or tenant. Avoid arbitrary sleeps; wait for user-visible state or a specific network outcome. Capture a trace, screenshot, console output, and request log on failure.
- Run a small smoke set for every pull request.
- Run broader journeys before release or on a dependable schedule.
- Quarantine only with an owner and deadline.
- Measure retry rate so passing flakes cannot hide instability.
Make the pipeline a trustworthy release signal
Parallelize independent suites, cache dependencies safely, and fail fast on deterministic checks. Keep production-like checks for runtime configuration, headers, middleware, redirects, and image behavior. Track duration, flake rate, escaped defects, and the tests most often linked to regressions.
Add release traces and alerts using the practices in our Next.js observability guide.
Next.js testing checklist
✓ Tests name the risk they protect
✓ Behavior is tested through accessible UI
✓ Server boundaries use realistic data
✓ Auth and tenant failures are covered
✓ Browser tests avoid arbitrary waits
✓ Failures retain useful diagnostics
✓ Flakes have owners and deadlines
✓ CI remains fast enough to trust
Build a more dependable Next.js application
Endurance Softwares helps teams design, build, test, and operate production-ready Next.js platforms.