Testing
Check types and behavior before calling a screen done.
Written for a Next.js 15 App Router application. Guidance for Next.js 16 bundled docs or /_next/mcp does not apply to 15.5.27.
Next.js testingRules
npx tsc --noEmit must pass.
Cover a button, a labeled field, and a dialog when you change them.
Run the page in a browser. A screenshot of the first paint is not the whole check.
An automated accessibility check is a check, not a certification.
npx tsc --noEmit
npx vitest run// looks fine in the browserA visual glance does not run the typechecker or the tests.
Checklist
- tsc exits 0.
- The unit tests exit 0.
- A changed route was opened in the browser.
AI instructions
You are implementing this practice in the current project. Do not install a design-system package and do not import one.
TASK: Apply Testing.
Check types and behavior before calling a screen done.
APPLIES TO: Written for a Next.js 15 App Router application. Guidance for Next.js 16 bundled docs or /_next/mcp does not apply to 15.5.27.
RULES:
- NX-TEST-001 [required] Typecheck. npx tsc --noEmit must pass.
- NX-TEST-002 [required] Test interactive controls. Cover a button, a labeled field, and a dialog when you change them.
- NX-TEST-003 [recommended] Open the changed route. Run the page in a browser. A screenshot of the first paint is not the whole check.
- NX-TEST-004 [recommended] Do not claim certification from one script. An automated accessibility check is a check, not a certification.
CORRECT:
npx tsc --noEmit
npx vitest run
INCORRECT:
// looks fine in the browser
A visual glance does not run the typechecker or the tests.
CHECK:
- [ ] tsc exits 0.
- [ ] The unit tests exit 0.
- [ ] A changed route was opened in the browser.
SOURCE: Next.js testing https://nextjs.org/docs/app/guides/testing
Build the interface with the project’s own markup. Match the documented colors and elements when a control is involved.
Do not upgrade Next.js to obtain bundled docs. Do not claim a WCAG audit. Do not add secrets.