CSC Design System Skills & Best Practices
CS

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 testing

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.

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.