preview.
Test layers
| Layer | Tool | Command | What it tests |
|---|---|---|---|
| Unit | Vitest | npm run test:unit | Utilities, GROQ queries, mock data, DOM scripts |
| Integration | Playwright (no browser) | npx playwright test tests/integration | Schema validation, module imports |
| E2E | Playwright (5 browsers) | npm run test:e2e | Full browser tests across 5 device configs |
| Accessibility | axe-core via @axe-core/playwright | Included in E2E | WCAG 2.1 AA compliance |
| Performance | Lighthouse CI | CI only (preview PRs) | Core Web Vitals, performance budgets |
Quick commands
Test layers in detail
Unit tests
Vitest with jsdom. Tests utilities (
cn()), GROQ query helpers, mock data validation, and client-side DOM scripts. Runs in milliseconds — no browser required.Integration tests
Playwright without a browser launch. Validates schema structure, module imports, Storybook config, and story file conventions. Fast CI feedback.
End-to-end tests
Playwright across Chromium, Firefox, WebKit, Pixel 7 (mobile Chrome), and iPhone 14 (mobile Safari). Tests navigation, page rendering, SEO meta, and portal auth flows.
Accessibility tests
axe-core WCAG 2.1 AA audits run inside E2E tests. Every new page or block must include an
expectAccessible(page) assertion.Storybook
153 component stories for visual testing and component development in isolation. Deployed automatically to GitHub Pages on pushes to
main.Performance (Lighthouse CI)
Lighthouse CI runs on PRs to
preview. Enforces 95+ performance and 90+ accessibility scores. Targets: CLS < 0.05, JS < 5 KB, CSS < 15 KB.When tests run in CI
The CI pipeline runs tests in this order:Unit tests
npm run test:unit runs on every push to every branch. Fast feedback — typically completes in under 10 seconds. Blocks merge if any test fails.Integration tests
npx playwright test tests/integration runs on every push. Validates schema structure, Storybook config, and module conventions without spinning up a browser.E2E tests
npm run test:e2e runs on PRs to preview. Builds the Astro site first, then runs all 5 browser projects. Uses workers: 1 for stability in CI. Screenshots, videos, and traces are uploaded as artifacts on failure.Test results and artifacts
| Artifact | Location |
|---|---|
| Unit test JUnit XML | test-results/unit-results.xml |
| Unit coverage report | test-results/unit-coverage/ |
| E2E JUnit XML | test-results/results.xml |
| E2E HTML report | playwright-report/ |
| Screenshots (failure only) | test-results/ |
| Videos (failure only) | test-results/ |
Run
npx playwright install --with-deps once after cloning to install the required browser binaries before running any E2E or integration tests.