frontend-testinglisted

Frontend test discipline for this repo — Vitest 4, Testing Library (RTL / React Testing Library), and Playwright E2E for React / Next.js apps. Use when writing or reviewing Vitest specs, vi.mock factories, fake-timer tests, RTL component tests, Radix portal tests, or Playwright E2E specs and their CI matrix wiring. Covers vi.hoisted mock-factory hoisting, keeping every vi.mock factory in sync, Vitest 4 pool config (fileParallelism), the fake-timers act() pattern, RTL accessible-query discipline, Radix-portal JSDOM limits, useLayoutEffect for test-observable accumulation, and Playwright spec-authoring footguns / CI-matrix registration / axe E2E.
eric-sabe/engsys · ★ 1 · Testing & QA · score 67

Install: claude install-skill eric-sabe/engsys

# Frontend Testing (Vitest + Testing Library + Playwright) Applies to: unit/component specs (`*.spec.{ts,tsx}`) and Playwright E2E (`e2e/**/*.spec.ts`) in the repo's web frontends. Stack assumed: Vitest 4.x, `@testing-library/react`, the `testing-library` + `react-hooks` eslint plugins, Radix UI, Playwright in a CI matrix against booted services. > Naturalize: confirm the Vitest version, the eslint test config, and the Playwright CI job/matrix in `CLAUDE.md`. Paths below (`services/dashboard/...`, `.github/workflows/...`) are illustrative. This skill is the React/Vitest/Playwright-specific **mechanism**. The cross-project **principles** behind it — "a change isn't done until every surface is updated", "register checks or they're silent gaps", "shift correctness left and distrust false greens" — live in the engsys `lessons-library/`. Here we carry the concrete test-tooling shape. ## Contents - [Vitest: mock factories](#vitest-mock-factories) - [Vitest 4: pool config and gated suites](#vitest-4-pool-config-and-gated-suites) - [Fake timers: the act() pattern](#fake-timers-the-act-pattern) - [RTL: accessible queries, not container traversal](#rtl-accessible-queries-not-container-traversal) - [RTL: double render and Radix portals](#rtl-double-render-and-radix-portals) - [RTL: useLayoutEffect for test-observable accumulation](#rtl-uselayouteffect-for-test-observable-accumulation) - [Playwright: register every spec in the CI matrix](#playwright-register-every-spec-in-the-ci-mat