React Testing

Covers the full stack of React component testing: React Testing Library queries, userEvent interactions, Vitest/Jest setup, MSW for network mocking, custom hook testing with renderHook, and accessibility assertions via jest-axe. The core philosophy is test user behavior, not implementation details, so you'll query by role and label instead of test IDs, and avoid inspecting internal state. Good coverage of async patterns (findBy, waitFor) and a practical section on when to stay in RTL versus jumping to Playwright component tests. The provider wrapping pattern and MSW setup examples are copy-paste ready. If you're migrating from Enzyme or setting up tests on a greenfield React app, this gives you opinionated defaults that actually work.

skills.sh installs: 910
GitHub stars: 229.1K
last updated: Jul 14, 2026

View on GitHub

Install

$ npx -y skills add affaan-m/everything-claude-code --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: