React Testing Patterns

What it does

This skill provides guidance and best practices for writing tests for React components. It emphasizes testing component behavior rather than implementation details, promoting a philosophy of accessibility and realistic user interaction through techniques like userEvent. The skill also covers testing custom hooks, mocking API calls with MSW, handling asynchronous state changes, and auditing component accessibility using jest-axe.

When to use it

• Writing unit tests for React components, including rendering, interactions, and accessibility checks.
• Testing custom hooks using renderHook.
• Setting up test infrastructure like providers and utility functions.
• Mocking API calls within your component tests.
• Verifying asynchronous state updates (e.g., loading states).

Key capabilities

• Testing Library Philosophy: Prioritizes testing behavior over implementation details using specific query methods (getByRole, getByLabelText, etc.).
• User Interaction Simulation: Encourages the use of userEvent for realistic user interaction simulation instead of low-level event dispatching.
• Accessibility Testing: Integrates with jest-axe to audit component accessibility.
• Component Test Structure: Promotes an Arrange → Act → Assert testing structure.

Example prompts

• "How should I test a React component's interaction using the recommended approach?"
• "What is the preferred method for querying elements in my React tests?"
• "Can you provide guidance on mocking API calls when writing React component tests?"

Tips & gotchas

• Avoid Testing Implementation: Focus on testing observable behavior, not internal state or CSS.
• Prioritize Queries: Use getByRole and getByLabelText before resorting to getByTestId.
• Use userEvent: Simulate user interactions realistically by using userEvent instead of fireEvent.