react-testing
Master unit testing for React components by querying the DOM as users do, not by inspecting implementation details. This skill covers React Testing Library patterns, userEvent interactions, network mocking with MSW, custom hook testing, and accessibility checks with axe. Learn when to reach for Vitest, Jest, or browser-based runners, and how to structure provider-wrapped tests that mirror production.
React Testing helps you write behavior-focused unit tests for React components using accessible queries and userEvent.
AI-generated summary based on this skill's SKILL.md
Install
affaan-m/ECC/react-testing · repository language: JavaScript
git clone https://github.com/affaan-m/ECC
cp -r ECC/skills/react-testing ~/.claude/skills/react-testingnpx skillfed install affaan-m/ECC/react-testingFrequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
How to test react components with testing library?
react-testing teaches you to query the DOM as users would—using accessible queries like getByRole, getByLabelText, and getByText instead of implementation details. Write tests that simulate real user interactions with userEvent, verify rendered output matches user expectations, and avoid testing internal state or props. This behavior-focused approach ensures your tests catch regressions users would notice.
What are react testing library best practices?
react-testing emphasizes querying by accessibility semantics (role, label, text), using userEvent for realistic interactions, and avoiding anti-patterns like testing implementation details or querying by test IDs when semantic queries work. Mock HTTP requests with MSW to isolate component logic, wrap tests with necessary providers (Redux, theme, router), and assert on user-visible outcomes. Structure tests to mirror how users interact with your app.
How do you mock HTTP requests in react tests?
react-testing covers Mock Service Worker (MSW) for intercepting and mocking HTTP requests at the network layer. Define request handlers that match your API endpoints, start the MSW server in your test setup, and return mock responses. This approach works across Vitest, Jest, and other runners, isolates component tests from real backends, and lets you test loading states, errors, and async side effects reliably.
How can you test custom hooks in react?
react-testing shows how to test custom hooks using renderHook from React Testing Library, which runs your hook in an isolated test environment. Call hook functions inside act() to batch updates, assert on returned values and state changes, and mock dependencies or providers your hook needs. Test integration scenarios where hooks interact with components and providers, ensuring hooks work correctly in realistic contexts.
What's the difference between playwright component testing vs rtl?
react-testing covers when to use React Testing Library (unit tests, fast feedback, DOM queries) versus Playwright Component Testing (browser-based, visual regression, real browser environment) versus E2E tests (full user journeys). RTL excels at behavior-focused unit tests with accessible queries; Playwright CT bridges unit and E2E with real rendering; E2E tests verify entire workflows. Choose based on test scope and speed requirements.
How do you assert accessibility compliance in react tests?
react-testing teaches accessibility testing by using semantic queries (getByRole, getByLabelText) that enforce proper HTML structure, integrating axe for automated compliance checks, and avoiding anti-patterns that hide accessibility issues. Query by role to verify buttons, links, and form fields are properly labeled and interactive. These practices catch accessibility regressions early and ensure components work for all users.
SKILL.md
rendered from the published skill — quoted content, verbatim
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
(truncated - see the full file via the links below)
Read as markdown · JSON record · Browse the source repository
File tree — 1 file
skills/react-testing/SKILL.md