write-frontend-testslisted

# Write frontend tests Two layers; pick by what you're verifying. principle → **▸ Example (Jest/RTL/Cypress)** → **▸ Other stacks**. | Layer | Tool | For | |---|---|---| | Unit / component | Jest + React Testing Library | utils, hooks, component behavior in isolation | | E2E | Cypress + Cucumber (BDD) | real user flows through the running app | ## 0. Gate — does this deserve a test? (test behaviors, not files) A suite maps to **behaviors/contracts, not the file tree**. Never create a test file 1:1 with a source file by default — per-util mirror tests (`foo.utils.ts` → `foo.utils.test.ts`) bury real failures, slow every run, and are maintained forever. - **Direct util/hook test only when** the logic is genuinely complex AND matters (money, dates, parsing, non-trivial business rules) or it pins a regression that actually occurred. - **Skip it when** a component/page/e2e test already exercises the behavior, or the code is trivial glue (mapping, prop plumbing, re-exports) whose breakage is instantly visible in dev. - Prefer proving a util **through the component that uses it**; a separate util test duplicating that coverage is junk. When in doubt → don't write it ("Test only what matters", `~/.claude/CLAUDE.md`). ## 1. Unit / component (Jest + RTL) - **Colocate** `*.test.ts(x)` next to source (or under `src/test/`). Test **behavior through the public surface**: render the component, query by role/text, fire user events, assert what the user sees — not internal state