mirror of
https://github.com/affaan-m/everything-claude-code.git
synced 2026-06-14 04:01:30 +08:00
Add React language track with agents, skills, rules, and commands (#2024)
* feat(rules): add rules/react/ track
Five rule files mirroring per-language convention (coding-style,
hooks, patterns, security, testing). Each has `paths:` glob
frontmatter for auto-activation when editing matching files.
- coding-style.md: file extensions, naming, JSX, RSC boundary
- hooks.md: React hooks (NOT Claude Code hooks) — rules-of-hooks,
dep arrays, cleanup, memoization, React 19 additions
- patterns.md: container/presentational split, state location
decision tree, Suspense + error boundaries, forms, data fetching
- security.md: dangerouslySetInnerHTML, unsafe URL schemes,
server-action validation, env-var leaks, CSP
- testing.md: RTL queries, userEvent, async, MSW, axe, anti-patterns
Each file extends typescript/* and common/* rules.
* feat(skills): add react-patterns, react-testing, react-performance
Three new skills under skills/ following the SKILL.md convention.
- react-patterns: React 18/19 idioms — hooks discipline, state
location decision tree, server/client component boundary,
Suspense + error boundaries, form actions (React 19), data
fetching matrix, composition recipes, accessibility-first.
- react-testing: React Testing Library + Vitest/Jest, query
priority order, userEvent, MSW network mocking, axe a11y
assertions, RTL vs Playwright CT boundary, TDD workflow.
- react-performance: 70-rule performance ruleset adapted from
Vercel Labs react-best-practices (MIT) across 8 priority
categories — waterfalls, bundle size, server-side, client
fetch, re-render, rendering, JS micro, advanced patterns.
Includes Lighthouse / Web Vitals mapping and attribution to
upstream.
Cross-links between the three skills and out to frontend-patterns,
accessibility, e2e-testing, tdd-workflow.
* feat(agents): add react-reviewer and react-build-resolver
Two new agents covering React-specific code review and build error
resolution, plus matching .kiro/ mirrors and a routing pointer
edit on typescript-reviewer.
- react-reviewer: slim React-only lanes (hooks rules,
dangerouslySetInnerHTML, unsafe URL schemes, key prop, state
mutation, derived-state-in-effect, server/client component
boundary, accessibility, render performance, Server Action
validation, env-var leaks). Explicitly delegates generic
TypeScript/async/Node concerns to typescript-reviewer. Both
agents should be invoked together on .tsx/.jsx PRs.
- react-build-resolver: React build/bundler/runtime hydration
failures across Vite, webpack, Next.js, CRA, Parcel, esbuild,
Bun, Rsbuild. Handles JSX/TSX compile errors, tsconfig fixes,
Next.js App Router server/client boundary errors, hydration
mismatches, duplicated React copies, Tailwind/PostCSS pipeline.
- .kiro/agents/react-reviewer.json + react-build-resolver.json:
Kiro IDE format mirrors following the per-language precedent.
- typescript-reviewer: routing pointer added to its MEDIUM React
block — defers to /react-review for React-specific concerns
while keeping its block as fallback for repos that only invoke
typescript-reviewer.
All agents carry the standard Prompt Defense Baseline stanza.
* feat(commands): add /react-review /react-build /react-test
Three new slash commands invoking the React agents.
- /react-review: invokes react-reviewer. Documents the routing
rule with typescript-reviewer — both should run together on
TSX/JSX PRs. Lists CRITICAL/HIGH/MEDIUM rule categories and
the automated checks (eslint with react-hooks + jsx-a11y,
tsc --noEmit, npm audit).
- /react-build: invokes react-build-resolver. Documents bundler
detection, common failure patterns, fix strategy, and stop
conditions.
- /react-test: enforces TDD with React Testing Library + Vitest
or Jest, behavior-focused queries, userEvent + MSW patterns,
axe accessibility assertions, coverage targets.
Each command file has the required description: frontmatter and
follows the per-language command convention (cpp-test, go-test,
kotlin-test, etc.).
* chore: wire react track into manifests and stack mappings
- agent.yaml: add react-patterns, react-performance, react-testing
to the skills array; add react-build, react-review, react-test to
the commands array (alphabetically inserted to satisfy the
ci/agent-yaml-surface sync test).
- config/project-stack-mappings.json: extend the `react` stack
entry — add "react" to rules array (was ["common","typescript",
"web"]); add react-patterns, react-performance, react-testing,
accessibility to the skills array.
- docs/COMMAND-REGISTRY.json: bump totalCommands 75 -> 78; add
three new entries (react-build, react-review, react-test) with
primaryAgents / allAgents / skills wiring. react-review's
allAgents includes typescript-reviewer to reflect the dual-agent
routing convention.
- CLAUDE.md: add Skills-table row mapping *.tsx / *.jsx /
components/** to react-patterns + react-testing skills and
the /react-review, /react-build, /react-test commands.
* chore(catalog): sync counts to 62 agents / 78 commands / 235 skills
Auto-generated via `node scripts/ci/catalog.js --write --text`
after the react track additions:
- 2 new agents: react-reviewer, react-build-resolver (60 -> 62)
- 3 new commands: react-build, react-review, react-test (75 -> 78)
- 3 new skills: react-patterns, react-performance, react-testing
(232 -> 235)
Files updated by the catalog sync:
- .claude-plugin/plugin.json description string
- .claude-plugin/marketplace.json plugin description
- README.md quick-start summary, project tree, feature parity tables
- README.zh-CN.md quick-start summary
- AGENTS.md project structure summary
- docs/zh-CN/README.md parity table
- docs/zh-CN/AGENTS.md project structure summary
All counts now match the filesystem catalog (verified by
ci/catalog.test.js).
* feat(kiro): add react agent markdown companions to JSON entries
* feat(kiro): add react skills into manifests
* fix(ci): sync catalog counts, registry, and package files for react track
- .claude-plugin/{plugin,marketplace}.json: bump description counts to 62/235/78
- docs/COMMAND-REGISTRY.json: regenerate to include quality-gate and react commands
- package.json: add skills/react-{patterns,performance,testing}/ to files allowlist so npm-publish-surface aligns with install-modules manifest
* fix(react): address PR #2024 review feedback
Critical:
- Remove undefined/.claude/session-aliases.json containing __proto__ prototype-pollution
fixture committed by accident in a7333c14
High:
- agents/react-build-resolver.md: replace brittle `test -o $(grep -l ...)` and
`test -a -n $(grep ...)` detection with explicit `{ ... || grep -q ...; }` so
bundler detection no longer breaks when grep returns empty
- agents/react-build-resolver.md: drop hardcoded `npm i react@^19 react-dom@^19`
remediation; replace with version-agnostic pair-upgrade note that honors the
project's installed major (17/18/19) — surgical fix principle
- commands/react-review.md: guard `tsc --noEmit -p tsconfig.json` with
`[ -f tsconfig.json ] &&` so the review skips cleanly on JS-only projects
Medium:
- rules/react/security.md: correct the React-18-blocks-javascript-URL claim
(React only warns in dev; production navigation is not blocked)
- rules/react/security.md: correct CRA env-var exposure row (CRA exposes
REACT_APP_*, NODE_ENV, PUBLIC_URL — not 'all' variables)
- skills/react-testing/SKILL.md: instantiate QueryClient once outside the
wrapper closure so React Query cache survives re-renders (flaky-test fix)
- skills/react-testing/SKILL.md: restore console.error spy with mockRestore()
in a try/finally so the mock does not leak across tests
- commands/react-test.md: switch outer example-session fence to 4 backticks
so the inner ```tsx/```bash blocks don't prematurely terminate it
* fix(kiro): mirror react-build-resolver react 19 conditional remediation
Discussion r3272907106 flagged the kiro json variant still carrying the hardcoded
'npm i react@^19 react-dom@^19' line that the .md companion already dropped.
Replace with the same conditional, version-agnostic guidance so both variants
stay in sync.
* fix(react): bump react-build example session fence to 4 backticks
Discussion r3272907144 flagged the same nested-fence issue in
commands/react-build.md that we fixed earlier in commands/react-test.md.
The outer triple-backtick text block was being prematurely terminated by
the inner bash/tsx fences inside the Example Session.
* fix(react): bump react-review example usage fence to 4 backticks
Discussion r3272907201 flagged the same nested-fence issue in
commands/react-review.md. The outer triple-backtick text block was
being prematurely terminated by the inner tsx/ts fences inside the
Example Usage transcript.
* fix(docs): clarify commands row as legacy shims in feature parity table
Discussion r3272912003: README comparison table said 'PASS: 78 commands'
while the install-section and quick-start prose use 'legacy command shims'.
Aligned the comparison-table cell to 'PASS: 78 commands (legacy shims)' so
the count word survives the catalog-validator regex while making the legacy
nature explicit.
Widened the catalog comparison-table commands regex to tolerate an optional
parenthetical after the count word, so both the existing 'X commands' and
the new 'X commands (legacy shims)' phrasings validate without breaking
older READMEs/translations.
* Update rules/react/security.md
Co-authored-by: cubic-dev-ai[bot] <191113872+cubic-dev-ai[bot]@users.noreply.github.com>
* fix(react): guard tsc in react-build-resolver diagnostic commands
Discussion r3288910205: the agent prompt instructed an unconditional
'tsc --noEmit -p tsconfig.json', which adds noise (or hard-fails) on
JavaScript-only projects with no tsconfig.json or no installed TypeScript.
Replaced with 'test -f tsconfig.json && npx --yes tsc --noEmit -p tsconfig.json'
in both variants:
- agents/react-build-resolver.md
- .kiro/agents/react-build-resolver.json (prompt string mirrored)
Mirrors the same guard already applied to commands/react-review.md in de135f61.
* fix(react): pin tsc resolution to local install in build resolver
Discussion r3289054157: previous fix used 'npx --yes tsc' which auto-installs
the latest TypeScript from npm when none is local, producing version drift
and non-reproducible typecheck results across machines.
Switched to 'npx --no-install tsc' in both variants so the diagnostic uses
only the project's pinned TypeScript and fails fast if it isn't installed:
- agents/react-build-resolver.md
- .kiro/agents/react-build-resolver.json (prompt string mirrored)
* feat(counts): resolve counts for agents, skills...
* fix(ci): regen command registry for golang-testing entry
Removes stale kotlin-patterns entry to satisfy command-registry:check.
* fix: keep local Claude settings out of React track PR
---------
Co-authored-by: AlexisLeDain <a.ledain@docoon.com>
Co-authored-by: cubic-dev-ai[bot] <191113872+cubic-dev-ai[bot]@users.noreply.github.com>
Co-authored-by: Affaan Mustafa <affaan@dcube.ai>
This commit is contained in:
Alexis Le Dain
@@ -0,0 +1,109 @@
|
||||
---
|
||||
paths:
|
||||
- "**/*.tsx"
|
||||
- "**/*.jsx"
|
||||
- "**/components/**/*.ts"
|
||||
- "**/components/**/*.js"
|
||||
- "**/hooks/**/*.ts"
|
||||
- "**/hooks/**/*.js"
|
||||
---
|
||||
# React Coding Style
|
||||
|
||||
> This file extends [typescript/coding-style.md](../typescript/coding-style.md) and [common/coding-style.md](../common/coding-style.md) with React specific content.
|
||||
|
||||
## File Extensions
|
||||
|
||||
- `.tsx` for any file containing JSX, even one-liner snippets
|
||||
- `.ts` for pure logic, custom hooks without JSX, type definitions, utilities
|
||||
- `.test.tsx` / `.test.ts` mirroring the source file
|
||||
- Use `.jsx` only when the project intentionally avoids TypeScript — flag every new untyped React file in review
|
||||
|
||||
## Naming
|
||||
|
||||
- Components: `PascalCase` for both the symbol and the file (`UserCard.tsx`, default export `UserCard`)
|
||||
- Custom hooks: `useCamelCase` for the symbol, kebab-case for the file when the project convention is kebab-case (`use-debounce.ts` exports `useDebounce`)
|
||||
- Context: `<Domain>Context` symbol, `<Domain>Provider` provider component, `use<Domain>` consumer hook
|
||||
- Event handlers: `handleClick`, `handleSubmit` inside the component; the prop that receives it is `onClick`, `onSubmit`
|
||||
- Boolean props: `isLoading`, `hasError`, `canSubmit` — never `loading` or `error` alone for booleans
|
||||
|
||||
## Component Shape
|
||||
|
||||
```tsx
|
||||
type Props = {
|
||||
user: User;
|
||||
onSelect: (id: string) => void;
|
||||
};
|
||||
|
||||
export function UserCard({ user, onSelect }: Props) {
|
||||
return (
|
||||
<button type="button" onClick={() => onSelect(user.id)}>
|
||||
{user.name}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
- Prefer `type Props = {}` for closed component prop shapes
|
||||
- Use `interface` only when the prop type is extended via declaration merging or exported as a public API extension point
|
||||
- Always destructure props in the parameter list — no `props.user` access inside the body
|
||||
- Type the return implicitly through JSX (`function Foo(): JSX.Element` only when the function returns conditionally and the union confuses inference)
|
||||
|
||||
## JSX
|
||||
|
||||
- Self-close tags with no children: `<img />`, `<UserCard user={u} />`
|
||||
- Use fragments `<>...</>` over wrapper `<div>` when no DOM element is needed
|
||||
- Conditional rendering: `{condition && <Foo />}` for booleans, ternary for either/or, early return for guard clauses
|
||||
- Never put logic inline in JSX when it reads as multi-line — extract to a const above the return or a function
|
||||
|
||||
```tsx
|
||||
// Prefer
|
||||
const greeting = user.isAdmin ? "Welcome, admin" : `Hello ${user.name}`;
|
||||
return <h1>{greeting}</h1>;
|
||||
|
||||
// Over
|
||||
return <h1>{user.isAdmin ? "Welcome, admin" : `Hello ${user.name}`}</h1>;
|
||||
```
|
||||
|
||||
## Server / Client Boundary (Next.js App Router, RSC)
|
||||
|
||||
- Default a new file to Server Component — only add `"use client"` when the file uses state, effects, refs, browser APIs, or event handlers
|
||||
- Place the `"use client"` directive on line 1, before any imports
|
||||
- Never import a Client Component file from inside a `"use server"` action file
|
||||
- Never re-export server-only code through a client module — the bundler will silently include it
|
||||
|
||||
## Imports
|
||||
|
||||
- React imports first: `import { useState } from "react"`
|
||||
- Then third-party libs, then absolute project imports, then relative
|
||||
- Type-only imports: `import type { ReactNode } from "react"` — never mix runtime and type imports in one statement when ESLint's `consistent-type-imports` is configured
|
||||
|
||||
## Hooks Discipline
|
||||
|
||||
See [hooks.md](./hooks.md) for the full ruleset. Style highlights:
|
||||
|
||||
- Custom hooks must start with `use` — enforced by `eslint-plugin-react-hooks`
|
||||
- Group all hook calls at the top of the component, before any conditional logic
|
||||
- Avoid creating ad-hoc hooks for one-line wrappers — inline the call instead
|
||||
|
||||
## State
|
||||
|
||||
- Local first (`useState`), lift only when shared
|
||||
- Context for cross-cutting state read by many components (theme, auth, i18n) — not for high-frequency updates
|
||||
- External store (Zustand, Jotai, Redux Toolkit) when state must persist across route changes, sync across tabs, or be debugged via devtools
|
||||
- Never duplicate state that can be derived — compute during render
|
||||
|
||||
## Class Components
|
||||
|
||||
Forbidden in new code. Convert legacy class components to function components when touching them for non-trivial changes.
|
||||
|
||||
## File Layout per Component
|
||||
|
||||
```
|
||||
components/UserCard/
|
||||
UserCard.tsx
|
||||
UserCard.module.css # or styled-components, or Tailwind classes inline
|
||||
UserCard.test.tsx
|
||||
index.ts # re-export only
|
||||
```
|
||||
|
||||
Inline single-file components are fine for trivial presentational pieces.
|
||||
@@ -0,0 +1,187 @@
|
||||
---
|
||||
paths:
|
||||
- "**/*.tsx"
|
||||
- "**/*.jsx"
|
||||
- "**/hooks/**/*.ts"
|
||||
- "**/hooks/**/*.js"
|
||||
- "**/use-*.ts"
|
||||
- "**/use-*.tsx"
|
||||
---
|
||||
# React Hooks
|
||||
|
||||
> This file covers **React hooks** (`useState`, `useEffect`, `useMemo`, `useCallback`, custom hooks) — NOT the Claude Code `hooks/` runtime system. Naming matches the per-language convention `rules/<lang>/hooks.md` used across this repo.
|
||||
>
|
||||
> Extends [typescript/patterns.md](../typescript/patterns.md) and [common/patterns.md](../common/patterns.md).
|
||||
|
||||
## Rules of Hooks
|
||||
|
||||
Enforce `eslint-plugin-react-hooks` with `react-hooks/rules-of-hooks` set to error.
|
||||
|
||||
1. Hooks only at the top level of a function component or another hook
|
||||
2. Never in loops, conditionals, nested functions, or after early returns
|
||||
3. Always called in the same order on every render
|
||||
4. Only inside React function components or custom hooks (functions starting with `use`)
|
||||
|
||||
```tsx
|
||||
// WRONG: conditional hook
|
||||
function Foo({ enabled }: { enabled: boolean }) {
|
||||
if (enabled) {
|
||||
const [x, setX] = useState(0); // rule violation
|
||||
}
|
||||
}
|
||||
|
||||
// CORRECT: hook unconditional, condition inside
|
||||
function Foo({ enabled }: { enabled: boolean }) {
|
||||
const [x, setX] = useState(0);
|
||||
if (!enabled) return null;
|
||||
return <span>{x}</span>;
|
||||
}
|
||||
```
|
||||
|
||||
## `useEffect` — When NOT to Use
|
||||
|
||||
`useEffect` is for synchronizing with external systems (subscriptions, browser APIs, third-party libraries). It is **not** the right tool for:
|
||||
|
||||
- Derived state — compute it during render
|
||||
- Transforming data for rendering — compute it during render
|
||||
- Resetting state when a prop changes — use a `key` on the parent or derive from props
|
||||
- Notifying parents of state changes — call the callback in the event handler
|
||||
- Initializing app-level singletons — call the function module-side or in `main.tsx`
|
||||
|
||||
```tsx
|
||||
// WRONG: effect for derived state
|
||||
const [fullName, setFullName] = useState("");
|
||||
useEffect(() => {
|
||||
setFullName(`${first} ${last}`);
|
||||
}, [first, last]);
|
||||
|
||||
// CORRECT: derive during render
|
||||
const fullName = `${first} ${last}`;
|
||||
```
|
||||
|
||||
## Dependency Arrays
|
||||
|
||||
- Always include every reactive value referenced inside the effect/callback
|
||||
- Enable `react-hooks/exhaustive-deps` lint rule — never silence it without a comment explaining why
|
||||
- If the dep array grows unwieldy, the effect is doing too much — split it
|
||||
- Stable identity for functions passed in deps: wrap in `useCallback` only when the function is itself a dependency of another hook or passed to a memoized child
|
||||
|
||||
## Cleanup
|
||||
|
||||
Every subscription, interval, listener, or in-flight request must clean up.
|
||||
|
||||
```tsx
|
||||
useEffect(() => {
|
||||
const controller = new AbortController();
|
||||
fetch(url, { signal: controller.signal }).then(handleResponse);
|
||||
return () => controller.abort();
|
||||
}, [url]);
|
||||
```
|
||||
|
||||
```tsx
|
||||
useEffect(() => {
|
||||
const id = setInterval(tick, 1000);
|
||||
return () => clearInterval(id);
|
||||
}, []);
|
||||
```
|
||||
|
||||
Missing cleanup = race conditions when deps change, memory leaks on unmount.
|
||||
|
||||
## `useMemo` and `useCallback` — When Worth It
|
||||
|
||||
Default position: **do not memoize**. Add `useMemo` / `useCallback` only when:
|
||||
|
||||
1. The value is passed to a `React.memo`-wrapped child as a prop, and identity matters
|
||||
2. The value is a dependency of another `useEffect` / `useMemo` / `useCallback`
|
||||
3. The computation is measurably expensive (profile before assuming)
|
||||
|
||||
Premature memoization adds noise, hides bugs, and can be slower than the recompute it replaces.
|
||||
|
||||
## Custom Hooks
|
||||
|
||||
Extract a custom hook when:
|
||||
|
||||
- The same hook sequence (state + effect + computed) appears in 2+ components
|
||||
- The logic has a clear, nameable purpose (`useDebounce`, `useOnClickOutside`, `useLocalStorage`)
|
||||
- You want to test the logic independently of any component
|
||||
|
||||
Do NOT extract when:
|
||||
|
||||
- It would have a single caller — inline it
|
||||
- The "hook" is just `useState` with a different name — adds indirection, no value
|
||||
|
||||
```tsx
|
||||
export function useDebounce<T>(value: T, delay: number): T {
|
||||
const [debounced, setDebounced] = useState(value);
|
||||
useEffect(() => {
|
||||
const id = setTimeout(() => setDebounced(value), delay);
|
||||
return () => clearTimeout(id);
|
||||
}, [value, delay]);
|
||||
return debounced;
|
||||
}
|
||||
```
|
||||
|
||||
## `useState` Patterns
|
||||
|
||||
- Initial state from prop only at mount: pass a function `useState(() => computeInitial(prop))` when computation is expensive
|
||||
- Functional updater when the new state depends on the old: `setCount(c => c + 1)` — never `setCount(count + 1)` inside async or batched contexts
|
||||
- Group related state into one object only when they always change together; otherwise split into multiple `useState` calls
|
||||
- Use `useReducer` once state transitions are conditional on the previous state or there are 3+ related values
|
||||
|
||||
## `useRef` Patterns
|
||||
|
||||
- DOM refs for imperative APIs (focus, scroll, third-party libs)
|
||||
- Mutable container that does not trigger re-render (timer ids, previous values, "is mounted" flags)
|
||||
- Never read or write `ref.current` during render — only inside effects or event handlers
|
||||
- `useImperativeHandle` only when exposing a child API to a parent ref — last-resort escape hatch
|
||||
|
||||
## `useSyncExternalStore`
|
||||
|
||||
Use this hook to subscribe to any external store (browser API, third-party state lib, custom event emitter). It is the supported way to make external state safe with concurrent rendering.
|
||||
|
||||
```tsx
|
||||
const isOnline = useSyncExternalStore(
|
||||
(cb) => {
|
||||
window.addEventListener("online", cb);
|
||||
window.addEventListener("offline", cb);
|
||||
return () => {
|
||||
window.removeEventListener("online", cb);
|
||||
window.removeEventListener("offline", cb);
|
||||
};
|
||||
},
|
||||
() => navigator.onLine,
|
||||
() => true,
|
||||
);
|
||||
```
|
||||
|
||||
## React 19 Additions
|
||||
|
||||
- `use()` — unwrap promises and contexts inline; usable conditionally (only hook with that property)
|
||||
- `useFormStatus()` / `useFormState()` (or `useActionState`) — form submission state without prop drilling
|
||||
- `useOptimistic()` — optimistic UI updates while a server action is pending
|
||||
- `useTransition()` — mark non-urgent state updates so urgent ones stay responsive
|
||||
|
||||
When the project targets React 19+, prefer these over hand-rolled equivalents.
|
||||
|
||||
## Stale Closure Trap
|
||||
|
||||
Async handlers and intervals capture the values from the render where they were created. Fix by:
|
||||
|
||||
1. Using the functional updater form of `setState`
|
||||
2. Putting the changing value in the dep array of `useEffect` and rebuilding the handler
|
||||
3. Reading from a ref that is kept in sync
|
||||
|
||||
## Lint Configuration
|
||||
|
||||
Required rules:
|
||||
|
||||
```json
|
||||
{
|
||||
"rules": {
|
||||
"react-hooks/rules-of-hooks": "error",
|
||||
"react-hooks/exhaustive-deps": "warn"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Treat `exhaustive-deps` warnings as errors in CI for new code.
|
||||
@@ -0,0 +1,194 @@
|
||||
---
|
||||
paths:
|
||||
- "**/*.tsx"
|
||||
- "**/*.jsx"
|
||||
- "**/components/**/*.ts"
|
||||
- "**/components/**/*.js"
|
||||
- "**/app/**/*.tsx"
|
||||
- "**/pages/**/*.tsx"
|
||||
---
|
||||
# React Patterns
|
||||
|
||||
> This file extends [typescript/patterns.md](../typescript/patterns.md) and [common/patterns.md](../common/patterns.md) with React specific content. For hook-specific rules see [hooks.md](./hooks.md).
|
||||
|
||||
## Container / Presentational Split
|
||||
|
||||
Container components own data fetching, state, and side effects. Presentational components receive props and render — no service calls, no hooks beyond local UI state.
|
||||
|
||||
```tsx
|
||||
// Container — owns data
|
||||
export function UserPage({ userId }: { userId: string }) {
|
||||
const { data: user, isLoading } = useUser(userId);
|
||||
if (isLoading) return <Spinner />;
|
||||
if (!user) return <NotFound />;
|
||||
return <UserCard user={user} onSelect={handleSelect} />;
|
||||
}
|
||||
|
||||
// Presentational — pure
|
||||
export function UserCard({ user, onSelect }: { user: User; onSelect: (id: string) => void }) {
|
||||
return <button onClick={() => onSelect(user.id)}>{user.name}</button>;
|
||||
}
|
||||
```
|
||||
|
||||
## State Location Decision Tree
|
||||
|
||||
1. Used by one component → `useState` inside it
|
||||
2. Used by parent + a few children → lift to nearest common ancestor, pass via props
|
||||
3. Used across distant branches → React Context **for low-frequency reads only** (theme, auth, locale)
|
||||
4. High-frequency updates shared across the tree → external store (Zustand, Jotai, Redux Toolkit)
|
||||
5. Server-derived data → server-state library (TanStack Query, SWR, RSC fetch) — not application state
|
||||
|
||||
Context misused for frequently changing values causes every consumer to re-render on every update.
|
||||
|
||||
## Server / Client Component Boundary (RSC, Next.js App Router)
|
||||
|
||||
- Server Components are the default — they run on the server, do not ship to the client, and can `await` directly
|
||||
- Client Components opt in with `"use client"` at the top of the file
|
||||
- Data flows down: a Server Component can render a Client Component and pass serializable props
|
||||
- A Client Component cannot import a Server Component, but it can receive one via `children` or named slots
|
||||
|
||||
```tsx
|
||||
// Server (default)
|
||||
export default async function Page() {
|
||||
const user = await fetchUser();
|
||||
return <UserClient user={user} />;
|
||||
}
|
||||
|
||||
// Client
|
||||
"use client";
|
||||
export function UserClient({ user }: { user: User }) {
|
||||
const [tab, setTab] = useState("profile");
|
||||
return <Tabs value={tab} onChange={setTab}>{user.name}</Tabs>;
|
||||
}
|
||||
```
|
||||
|
||||
- Never import `"server-only"` packages (DB clients, secrets) from a Client Component file — wrap them in a Server Component or Server Action
|
||||
- Mark sensitive modules with `import "server-only"` so the bundler errors if a client file imports them
|
||||
|
||||
## Suspense + Error Boundaries
|
||||
|
||||
Every Suspense boundary needs an Error Boundary above it. The pair handles both states.
|
||||
|
||||
```tsx
|
||||
<ErrorBoundary fallback={<ErrorView />}>
|
||||
<Suspense fallback={<Skeleton />}>
|
||||
<UserDetails id={id} />
|
||||
</Suspense>
|
||||
</ErrorBoundary>
|
||||
```
|
||||
|
||||
- Place Suspense boundaries close to where data is needed, not at the route root
|
||||
- Multiple narrower boundaries reveal loaded content progressively
|
||||
- Error Boundary must be a Class Component (React 19 has no functional equivalent yet) OR use a library wrapper such as `react-error-boundary`
|
||||
|
||||
## Forms
|
||||
|
||||
### Uncontrolled (React 19 + form actions)
|
||||
|
||||
Prefer uncontrolled inputs with form actions when the form has a clear submit step. The browser owns the value; React reads it via `FormData` on submit.
|
||||
|
||||
```tsx
|
||||
async function action(formData: FormData) {
|
||||
"use server";
|
||||
await saveUser({ name: String(formData.get("name")) });
|
||||
}
|
||||
|
||||
export function UserForm() {
|
||||
return (
|
||||
<form action={action}>
|
||||
<input name="name" required />
|
||||
<button type="submit">Save</button>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
### Controlled
|
||||
|
||||
Use controlled inputs when the value drives other UI, requires real-time validation, or formatting.
|
||||
|
||||
```tsx
|
||||
const [email, setEmail] = useState("");
|
||||
return <input value={email} onChange={(e) => setEmail(e.target.value)} />;
|
||||
```
|
||||
|
||||
### Form Libraries
|
||||
|
||||
For complex forms (multi-step, dynamic field arrays, cross-field validation), use a library:
|
||||
|
||||
- React Hook Form — minimal re-renders, uncontrolled-first
|
||||
- TanStack Form — typed, framework-agnostic
|
||||
- Final Form — when subscription-based re-renders matter
|
||||
|
||||
## Data Fetching
|
||||
|
||||
| Strategy | When |
|
||||
|---|---|
|
||||
| RSC fetch (`await` in Server Component) | Per-request data in Next.js App Router, no client-side cache needed |
|
||||
| TanStack Query | Client-side cache, mutations, optimistic updates, polling |
|
||||
| SWR | Lightweight cache + revalidation, simpler than TanStack Query |
|
||||
| `fetch` in `useEffect` | Avoid — race conditions, no cache, no retry. Only acceptable for one-off fire-and-forget |
|
||||
|
||||
Never fetch in a `useEffect` when a real cache library is available — they handle deduping, cache invalidation, error retry, and Suspense integration.
|
||||
|
||||
## Lists and Keys
|
||||
|
||||
- `key` must be stable across renders — never `index` for any list that can reorder, insert, or delete
|
||||
- `key` must be unique among siblings, not globally
|
||||
- A reordered list with index keys causes state in child components to attach to the wrong row
|
||||
|
||||
## Composition over Inheritance
|
||||
|
||||
- Pass `children` for slot-style composition
|
||||
- Pass render-prop functions for parameterized rendering
|
||||
- Pass component types for plug-in points: `renderItem={UserRow}`
|
||||
- Never extend a component class to specialize behavior
|
||||
|
||||
## Compound Components
|
||||
|
||||
For related controls (Tabs, Accordion, Menu), use compound components sharing state via Context:
|
||||
|
||||
```tsx
|
||||
<Tabs defaultValue="profile">
|
||||
<Tabs.List>
|
||||
<Tabs.Trigger value="profile">Profile</Tabs.Trigger>
|
||||
<Tabs.Trigger value="settings">Settings</Tabs.Trigger>
|
||||
</Tabs.List>
|
||||
<Tabs.Panel value="profile"><ProfileForm /></Tabs.Panel>
|
||||
<Tabs.Panel value="settings"><SettingsForm /></Tabs.Panel>
|
||||
</Tabs>
|
||||
```
|
||||
|
||||
## Portals
|
||||
|
||||
Use `createPortal` for modals, tooltips, toast containers — anything that must escape the parent's `overflow: hidden` or `z-index` stacking context. Render to a stable DOM node mounted in `index.html`.
|
||||
|
||||
## Refs and Forwarding (React 19+)
|
||||
|
||||
React 19 lets function components accept `ref` as a regular prop — `forwardRef` is no longer required.
|
||||
|
||||
```tsx
|
||||
export function Input({ ref, ...rest }: { ref?: React.Ref<HTMLInputElement> } & InputProps) {
|
||||
return <input ref={ref} {...rest} />;
|
||||
}
|
||||
```
|
||||
|
||||
Older codebases on React 18 still need `forwardRef`.
|
||||
|
||||
## Out of Scope (Pointer Sections)
|
||||
|
||||
### Next.js (App Router)
|
||||
|
||||
- Server Actions, Route Handlers, Middleware, Parallel/Intercepted Routes, streaming Metadata
|
||||
- Treated as a separate framework concern — when adding deep Next-specific patterns, propose a dedicated `rules/nextjs/` track
|
||||
- For now follow Next.js official docs for App Router specifics
|
||||
|
||||
### React Native
|
||||
|
||||
- Platform-specific imports (`Platform.OS`, `.ios.tsx` / `.android.tsx`), `StyleSheet`, navigation libraries (React Navigation, Expo Router)
|
||||
- Treated as a separate track — `rules/react-native/` is not yet present
|
||||
- React core hooks/patterns from this file still apply
|
||||
|
||||
## Skill Reference
|
||||
|
||||
For React-specific deep dives see `skills/react-patterns/SKILL.md`. For cross-framework frontend concerns see `skills/frontend-patterns/SKILL.md`. For accessibility see `skills/accessibility/SKILL.md`.
|
||||
@@ -0,0 +1,180 @@
|
||||
---
|
||||
paths:
|
||||
- "**/*.tsx"
|
||||
- "**/*.jsx"
|
||||
- "**/components/**/*.ts"
|
||||
- "**/app/**/*.ts"
|
||||
- "**/pages/**/*.ts"
|
||||
---
|
||||
# React Security
|
||||
|
||||
> This file extends [typescript/security.md](../typescript/security.md) and [common/security.md](../common/security.md) with React specific content.
|
||||
|
||||
## XSS via `dangerouslySetInnerHTML`
|
||||
|
||||
CRITICAL. The prop name is deliberately scary — treat every usage as a code review halt.
|
||||
|
||||
```tsx
|
||||
// CRITICAL: unsanitized user input
|
||||
<div dangerouslySetInnerHTML={{ __html: userBio }} />
|
||||
|
||||
// CORRECT options:
|
||||
// 1. Render as text
|
||||
<div>{userBio}</div>
|
||||
|
||||
// 2. Render parsed markdown via a library that sanitizes
|
||||
<ReactMarkdown>{userBio}</ReactMarkdown>
|
||||
|
||||
// 3. If raw HTML is required, sanitize first with DOMPurify
|
||||
import DOMPurify from "isomorphic-dompurify";
|
||||
<div dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(userBio) }} />
|
||||
```
|
||||
|
||||
Audit checklist for every `dangerouslySetInnerHTML` call:
|
||||
|
||||
- Is the input always under our control? Document the source.
|
||||
- If user-derived: is it sanitized at the **same call site**? (Sanitization at the API boundary is acceptable only if every consumer is verified.)
|
||||
- Is the sanitizer config allowlisting tags, not denylisting?
|
||||
|
||||
## Unsafe URL Schemes
|
||||
|
||||
`javascript:` and `data:` URLs in `href`, `src`, and `xlink:href` execute arbitrary code.
|
||||
|
||||
```tsx
|
||||
// CRITICAL: javascript: URL injection
|
||||
<a href={user.website}>Visit</a> // if user.website = "javascript:alert(1)"
|
||||
|
||||
// CORRECT: validate scheme
|
||||
function safeUrl(url: string): string | undefined {
|
||||
try {
|
||||
const parsed = new URL(url);
|
||||
if (["http:", "https:", "mailto:"].includes(parsed.protocol)) return url;
|
||||
} catch {
|
||||
return undefined;
|
||||
}
|
||||
return undefined;
|
||||
}
|
||||
<a href={safeUrl(user.website)}>Visit</a>
|
||||
```
|
||||
|
||||
React warns about `javascript:` URLs in `href` in development mode, but does not block them at runtime. `data:` URLs and other schemes also slip through. Always validate.
|
||||
|
||||
## `target="_blank"` Without `rel`
|
||||
|
||||
`<a target="_blank">` without `rel="noopener noreferrer"` lets the target page access `window.opener` and run navigation hijacks.
|
||||
|
||||
```tsx
|
||||
// WRONG
|
||||
<a href={externalUrl} target="_blank">External</a>
|
||||
|
||||
// CORRECT
|
||||
<a href={externalUrl} target="_blank" rel="noopener noreferrer">External</a>
|
||||
```
|
||||
|
||||
Modern browsers default to `noopener` when `target="_blank"`, but do not rely on browser defaults — be explicit.
|
||||
|
||||
## Server Action Input Validation
|
||||
|
||||
Server Actions (`"use server"`) run with the same trust level as a public API endpoint. Validate every input.
|
||||
|
||||
```tsx
|
||||
"use server";
|
||||
import { z } from "zod";
|
||||
|
||||
const Input = z.object({
|
||||
email: z.string().email(),
|
||||
age: z.number().int().min(0).max(120),
|
||||
});
|
||||
|
||||
export async function updateUser(_state: unknown, formData: FormData) {
|
||||
const parsed = Input.safeParse({
|
||||
email: formData.get("email"),
|
||||
age: Number(formData.get("age")),
|
||||
});
|
||||
if (!parsed.success) return { error: parsed.error.flatten() };
|
||||
// ...
|
||||
}
|
||||
```
|
||||
|
||||
- Authenticate inside the action — do not trust the client-side route gate
|
||||
- Authorize: confirm the current user has permission for the specific record they are mutating
|
||||
- Rate limit sensitive actions
|
||||
|
||||
## Secret Exposure via Env Vars
|
||||
|
||||
Prefixed env vars are bundled into the client. Treat them as public.
|
||||
|
||||
| Framework | Public prefix | Private |
|
||||
|---|---|---|
|
||||
| Next.js | `NEXT_PUBLIC_*` | All others |
|
||||
| Vite | `VITE_*` | `.env` server-side only |
|
||||
| Create React App | `REACT_APP_*`, plus `NODE_ENV` and `PUBLIC_URL` | All others (anything without the `REACT_APP_` prefix is server-side only) |
|
||||
| Remix | `process.env` access in `loader`/`action` only | Same |
|
||||
|
||||
```ts
|
||||
// CRITICAL: secret leaked to client bundle
|
||||
const apiKey = process.env.NEXT_PUBLIC_STRIPE_SECRET_KEY;
|
||||
```
|
||||
|
||||
Audit on every PR that touches env vars: would this string in the public bundle be a problem?
|
||||
|
||||
## Authentication / Authorization
|
||||
|
||||
- Never store sessions in `localStorage` — accessible to any XSS. Use httpOnly secure cookies.
|
||||
- Never trust client-set state to gate sensitive UI. Render-gating in JSX prevents display, not access — the API must enforce.
|
||||
- CSRF: cookie-based auth requires CSRF tokens or `SameSite=Strict`/`Lax` cookies
|
||||
- Use double-submit cookies or origin verification for form actions when not using framework defaults
|
||||
|
||||
## Content Security Policy (CSP)
|
||||
|
||||
Configure server-side. The minimum acceptable CSP for a React app:
|
||||
|
||||
```
|
||||
default-src 'self';
|
||||
script-src 'self' 'nonce-{REQUEST_NONCE}';
|
||||
style-src 'self' 'unsafe-inline';
|
||||
img-src 'self' data: https:;
|
||||
connect-src 'self' https://api.example.com;
|
||||
frame-ancestors 'none';
|
||||
```
|
||||
|
||||
- Avoid `unsafe-inline` and `unsafe-eval` in `script-src`
|
||||
- For SSR with inline scripts (Next.js streaming, hydration data), use per-request nonces — both Next.js and Remix support nonce injection
|
||||
- `style-src 'unsafe-inline'` is often unavoidable for CSS-in-JS libraries — document the tradeoff
|
||||
|
||||
## Prototype Pollution via Object Spread
|
||||
|
||||
```tsx
|
||||
// WRONG: untrusted JSON spread directly into state
|
||||
const update = await req.json();
|
||||
setState({ ...state, ...update }); // attacker controls __proto__
|
||||
|
||||
// CORRECT: parse with a schema, or guard keys
|
||||
const Allowed = z.object({ name: z.string(), email: z.string().email() });
|
||||
const parsed = Allowed.parse(await req.json());
|
||||
setState({ ...state, ...parsed });
|
||||
```
|
||||
|
||||
## SSR Template Injection
|
||||
|
||||
When using `renderToString` or `renderToPipeableStream`:
|
||||
|
||||
- All values rendered inside JSX are escaped by React — safe
|
||||
- Values passed to `dangerouslySetInnerHTML` are NOT escaped — same rules as client
|
||||
- Manually constructed HTML wrappers around the React output must be escaped or sanitized — never concatenate user input into the surrounding HTML template
|
||||
|
||||
## Third-Party Components
|
||||
|
||||
- Audit `npm audit` before adding any UI library
|
||||
- Check that the library does not internally use `dangerouslySetInnerHTML` on its input (e.g., rich text editors)
|
||||
- Pin versions, review changelogs before major upgrades
|
||||
- Be wary of components that accept HTML strings as props
|
||||
|
||||
## Source Map Exposure in Production
|
||||
|
||||
Production builds should ship without source maps, or with sourcemaps uploaded to an error tracker (Sentry) and stripped from the public bundle. Public source maps leak internal logic and file structure.
|
||||
|
||||
## Agent Support
|
||||
|
||||
- Use `security-reviewer` agent for comprehensive security audits across the codebase
|
||||
- Use `react-reviewer` agent for React-specific patterns and the above rules in active code review
|
||||
@@ -0,0 +1,208 @@
|
||||
---
|
||||
paths:
|
||||
- "**/*.test.tsx"
|
||||
- "**/*.test.jsx"
|
||||
- "**/*.spec.tsx"
|
||||
- "**/*.spec.jsx"
|
||||
- "**/__tests__/**/*.ts"
|
||||
- "**/__tests__/**/*.tsx"
|
||||
---
|
||||
# React Testing
|
||||
|
||||
> This file extends [typescript/testing.md](../typescript/testing.md) and [common/testing.md](../common/testing.md) with React specific content.
|
||||
|
||||
## Library Choice
|
||||
|
||||
- **React Testing Library (RTL)** — the standard for component testing. Tests behavior through the rendered DOM.
|
||||
- **Vitest** — preferred runner for new Vite-based projects. Faster than Jest, native ESM, same API.
|
||||
- **Jest** — still the default for Next.js / CRA projects. RTL works identically.
|
||||
- **Playwright Component Testing** — when component tests need a real browser engine (animation, layout, complex events)
|
||||
- **Cypress Component Testing** — alternative real-browser component runner
|
||||
|
||||
Pick one component test runner per project — do not mix RTL + Playwright CT in the same repo.
|
||||
|
||||
## Core Principle
|
||||
|
||||
Test what the user sees and does, not implementation details.
|
||||
|
||||
- Query by accessible role first, then label, then text — fall back to `data-testid` only when nothing else fits
|
||||
- Never assert on internal state, props passed to children, or which hooks were called
|
||||
- Refactor without breaking tests = the test was testing behavior; that is the goal
|
||||
|
||||
## Query Priority
|
||||
|
||||
RTL exposes queries in three families. Use this priority order top-down:
|
||||
|
||||
1. **Accessible to everyone**
|
||||
- `getByRole(role, { name })` — primary choice
|
||||
- `getByLabelText` — for form inputs
|
||||
- `getByPlaceholderText` — when no label is available (and add a label)
|
||||
- `getByText` — for non-interactive text
|
||||
- `getByDisplayValue` — for form fields with a current value
|
||||
|
||||
2. **Semantic queries**
|
||||
- `getByAltText` — for images
|
||||
- `getByTitle` — last resort, low accessibility value
|
||||
|
||||
3. **Test IDs**
|
||||
- `getByTestId("some-id")` — escape hatch only, when none of the above work
|
||||
|
||||
`getBy*` throws when no match. `queryBy*` returns null (use for asserting absence). `findBy*` returns a promise (use for async).
|
||||
|
||||
## User Interaction
|
||||
|
||||
Prefer `userEvent` over `fireEvent`. `userEvent` simulates real browser sequences (focus, keydown, beforeinput, input, keyup) — `fireEvent` dispatches a single synthetic event.
|
||||
|
||||
```tsx
|
||||
import userEvent from "@testing-library/user-event";
|
||||
|
||||
test("submits the form", async () => {
|
||||
const user = userEvent.setup();
|
||||
render(<UserForm onSubmit={handleSubmit} />);
|
||||
|
||||
await user.type(screen.getByLabelText("Email"), "user@example.com");
|
||||
await user.click(screen.getByRole("button", { name: /save/i }));
|
||||
|
||||
expect(handleSubmit).toHaveBeenCalledWith({ email: "user@example.com" });
|
||||
});
|
||||
```
|
||||
|
||||
- Always `await` `userEvent` calls — they are async
|
||||
- Call `userEvent.setup()` once at the top of each test, then reuse the returned `user`
|
||||
|
||||
## Async Assertions
|
||||
|
||||
```tsx
|
||||
// WRONG: synchronous query for async-rendered content
|
||||
expect(screen.getByText("Loaded")).toBeInTheDocument(); // throws — not in DOM yet
|
||||
|
||||
// CORRECT: findBy* (returns a promise, retries)
|
||||
expect(await screen.findByText("Loaded")).toBeInTheDocument();
|
||||
|
||||
// CORRECT: waitFor for non-element assertions
|
||||
await waitFor(() => expect(saveSpy).toHaveBeenCalled());
|
||||
```
|
||||
|
||||
- `findBy*` for async element appearance
|
||||
- `waitFor` for async expectations on side effects or other matchers
|
||||
- Never `setTimeout` + assertion — flaky
|
||||
|
||||
## Network Mocking with MSW
|
||||
|
||||
Use Mock Service Worker for any test that hits a network boundary. MSW runs at the network layer, so the component, hooks, and fetch library all behave as in production.
|
||||
|
||||
```tsx
|
||||
// test setup
|
||||
import { setupServer } from "msw/node";
|
||||
import { http, HttpResponse } from "msw";
|
||||
|
||||
const server = setupServer(
|
||||
http.get("/api/users/:id", ({ params }) =>
|
||||
HttpResponse.json({ id: params.id, name: "Alice" }),
|
||||
),
|
||||
);
|
||||
|
||||
beforeAll(() => server.listen());
|
||||
afterEach(() => server.resetHandlers());
|
||||
afterAll(() => server.close());
|
||||
```
|
||||
|
||||
Per-test override:
|
||||
|
||||
```tsx
|
||||
test("renders error on 500", async () => {
|
||||
server.use(http.get("/api/users/:id", () => new HttpResponse(null, { status: 500 })));
|
||||
render(<UserPage id="1" />);
|
||||
expect(await screen.findByText(/something went wrong/i)).toBeInTheDocument();
|
||||
});
|
||||
```
|
||||
|
||||
## Avoid Snapshot Tests for Components
|
||||
|
||||
Snapshots of rendered output are brittle, hard to review, and rubber-stamped by reviewers. Use them only for:
|
||||
|
||||
- Pure data serialization (e.g., a transformer that produces a stable string)
|
||||
- Catching unintended regressions in non-visual output
|
||||
|
||||
For component visual regression, use Playwright / Cypress / Percy screenshots — actual visual diffs, not DOM diffs.
|
||||
|
||||
## Test Setup Helpers
|
||||
|
||||
Wrap providers once:
|
||||
|
||||
```tsx
|
||||
function renderWithProviders(ui: React.ReactElement) {
|
||||
return render(
|
||||
<QueryClientProvider client={new QueryClient()}>
|
||||
<ThemeProvider theme={lightTheme}>
|
||||
<Router>{ui}</Router>
|
||||
</ThemeProvider>
|
||||
</QueryClientProvider>,
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
Export from `test-utils.tsx` and use everywhere.
|
||||
|
||||
## Custom Hook Testing
|
||||
|
||||
Use `renderHook` from RTL:
|
||||
|
||||
```tsx
|
||||
import { renderHook, act } from "@testing-library/react";
|
||||
|
||||
test("useCounter increments", () => {
|
||||
const { result } = renderHook(() => useCounter());
|
||||
act(() => result.current.increment());
|
||||
expect(result.current.count).toBe(1);
|
||||
});
|
||||
```
|
||||
|
||||
- Always wrap state-changing calls in `act`
|
||||
- Always test through the public hook API, not internal implementation
|
||||
|
||||
## Accessibility Assertions
|
||||
|
||||
```tsx
|
||||
import { axe } from "vitest-axe"; // or jest-axe
|
||||
|
||||
test("UserCard has no a11y violations", async () => {
|
||||
const { container } = render(<UserCard user={mockUser} />);
|
||||
expect(await axe(container)).toHaveNoViolations();
|
||||
});
|
||||
```
|
||||
|
||||
Run axe assertions in component tests — catches missing labels, ARIA misuse, color contrast (limited).
|
||||
|
||||
## When to Reach for Playwright / Cypress
|
||||
|
||||
Component test with RTL + JSDOM cannot:
|
||||
|
||||
- Test real layout (flexbox, grid, viewport-dependent rendering)
|
||||
- Test scrolling, drag-and-drop, paste from clipboard
|
||||
- Test browser-native animation, CSS transitions
|
||||
- Test cross-frame interactions (iframes, popups)
|
||||
|
||||
For those, use Playwright Component Testing or end-to-end Playwright/Cypress runs. See [e2e-testing skill](../../skills/e2e-testing/SKILL.md).
|
||||
|
||||
## Coverage Targets
|
||||
|
||||
| Layer | Target |
|
||||
|---|---|
|
||||
| Pure utility functions | ≥90% |
|
||||
| Custom hooks | ≥85% |
|
||||
| Components (presentational) | ≥80% — behavior, not lines |
|
||||
| Container components | ≥70% — golden paths + error states |
|
||||
| Pages (E2E covered separately) | Smoke test per route minimum |
|
||||
|
||||
## Anti-Patterns
|
||||
|
||||
- Asserting on `container.querySelector` — bypasses accessibility queries
|
||||
- Asserting on number of renders — implementation detail
|
||||
- Mocking React hooks (`jest.mock("react", ...)`) — refactor the component instead
|
||||
- Mocking child components by default — tests the integration, not the parent in isolation
|
||||
- Manual `act()` warnings ignored — they indicate real bugs
|
||||
|
||||
## Skill Reference
|
||||
|
||||
See `skills/react-testing/SKILL.md` for end-to-end test examples, MSW patterns, and accessibility test scaffolding.
|
||||
Reference in New Issue
Block a user