React Testing

A strong foundation for testing React components the modern way: React Testing Library, Vitest or Jest, MSW for HTTP mocking, and axe for accessibility checks. The guide is opinionated in the right ways, prioritizing user-facing behavior over implementation details, accessible queries over test IDs, and userEvent over fireEvent. The MSW setup with onUnhandledRequest error is excellent for catching silent test passes. The custom hook testing section correctly warns about QueryClient instantiation gotchas. Light on the boundary between component tests and full E2E, but the query priority table and provider wrapping pattern alone will save you from common mistakes if you're migrating from Enzyme or setting up tests from scratch.

skills.sh installs: 5.8K
GitHub stars: 300.3K
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add affaan-m/ecc --skill react-testing --agent claude-code

Installs into .claude/skills of the current project.

Files

React Testing

Comprehensive React testing patterns for behavior-focused component tests, custom hook tests, accessibility assertions, and network-level mocking.

When to Activate

Writing tests for React components, custom hooks, or pages
Adding test coverage to legacy untested components
Migrating from Enzyme or class-component-era patterns to React Testing Library
Setting up Vitest or Jest for a new React project
Mocking HTTP requests in tests
Asserting accessibility violations
Deciding which tests belong in RTL vs Playwright Component Testing vs full E2E

Core Principle

Test what the user sees and does, not implementation details.

A test should:

Render the component with the same providers it has in production
Interact with it via accessible queries (role, label) and userEvent
Assert visible output and observable side effects (callback fired, request sent)

A test should NOT: