Instruction file imported from robbiegerber-nu/nu (.github/instructions/react-frontend.instructions.md). Copyright stays with the author.

React Frontend Standards

Components

• Functional components only — no class components
• One component per file, matching filename (Navigation.jsx → function Navigation)
• CSS module per component (Navigation.css imported in Navigation.jsx)
• Props destructured in function signature

State & Auth

• useAuth() from react-oidc-context for authentication state
• useRoles() from RolesContext for RBAC
• useState for local UI state — no external state management libraries
• Never store tokens in localStorage or cookies — memory only

Testing

• Vitest + Testing Library (@testing-library/react)
• Test files in src/test/ matching <Component>.test.jsx
• Mock react-oidc-context via vi.mock — never import real OIDC in tests
• Use screen.getByRole, getByText — avoid getByTestId unless necessary
• Coverage thresholds: 90% lines, branches, functions, statements

Forbidden

• No useEffect for data that can be derived from props or auth state
• No direct DOM manipulation — use React state and declarative rendering
• No any types, no @ts-ignore
• No snapshot tests — use explicit assertions