React Testing

Priority: P2 (MAINTENANCE)

Reliable tests focusing on user behavior.

Implementation Guidelines

• Standards: Use React Testing Library (RTL) with Vitest or Jest. Follow the Arrange-Act-Assert (AAA) pattern.
• Selection: Prefer getByRole / findByRole to test accessibility. Use data-testid only as a fallback for complex UI.
• Interactions: Use userEvent (async) instead of fireEvent to better simulate browser events (e.g., await user.click(element)).
• Asynchrony: Use await screen.findBy* for elements that appear later. Use waitFor(() => ...) for complex non-element updates.
• Networking: Mock all API calls with Mock Service Worker (MSW). Never call real APIs in unit/integration tests.
• Architecture: Test behavior, not implementation. Avoid checking internal state or props. Ensure 100% of P0 flows are covered.
• Mocks: Mock expensive third-party libraries (e.g., framer-motion, react-router) or heavy assets to speed up tests.
• Visuals: Use Snapshot testing sparingly for stable, small UI components. Manual a11y checks with jest-axe.

Anti-Patterns