Vitest cannot test most of this app. Async Server Components are not unit-testable in Vitest or Jest — Next's docs say so and point at end-to-end tests instead. Nearly every page here is a server component, so without Playwright the routes people actually visit have no automated coverage at all.
Pairs with #5 (Vitest and React Testing Library, for the client components) and #3 (running both in CI).
Scope
@playwright/test, with browsers installed in CI- Run against
pnpm build && pnpm start so the tests exercise the production build, not the dev server
pnpm test:e2e script- Chromium at minimum; a mobile viewport project is worth it given how much of the layout is breakpoint-driven
What to cover
- Every route renders —
/, /contact, and a 404 — with the expected heading. This is the smoke test the repo does not have.
- The menu overlay end to end — opens, traps focus, closes on Escape, and returns focus to the menu button. It was hand-verified once; it should stay verified.
- In-page anchor navigation from the overlay, including that the overlay closes on a hash change.
- The header fade on scroll, and that the menu button survives it.
- The contact form submits without navigating away.
Worth adding at the same time
@axe-core/playwright, for automated accessibility assertions per route. The Codex review on #1 found four accessibility defects by inspection — an unnamed link, a non-modal modal, a tabbable backdrop, and focus stranded in an inert subtree. Axe would have caught the first one automatically and is cheap to run once the harness exists.
Note
The .vercel directory and .env.local are git-ignored; nothing test-related should need either. The build takes no environment variables and must stay that way.
Vitest cannot test most of this app. Async Server Components are not unit-testable in Vitest or Jest — Next's docs say so and point at end-to-end tests instead. Nearly every page here is a server component, so without Playwright the routes people actually visit have no automated coverage at all.
Pairs with #5 (Vitest and React Testing Library, for the client components) and #3 (running both in CI).
Scope
@playwright/test, with browsers installed in CIpnpm build && pnpm startso the tests exercise the production build, not the dev serverpnpm test:e2escriptWhat to cover
/,/contact, and a 404 — with the expected heading. This is the smoke test the repo does not have.Worth adding at the same time
@axe-core/playwright, for automated accessibility assertions per route. The Codex review on #1 found four accessibility defects by inspection — an unnamed link, a non-modal modal, a tabbable backdrop, and focus stranded in an inert subtree. Axe would have caught the first one automatically and is cheap to run once the harness exists.Note
The
.verceldirectory and.env.localare git-ignored; nothing test-related should need either. The build takes no environment variables and must stay that way.