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
Decision gist · record as of 2026-07-27
React Testing helps you write behavior-focused unit tests for React components using accessible queries and userEvent. 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.
Use it when
- react-testing emphasizes querying by accessibility semantics (role, label, text), using userEvent for realistic interactions.
- react-testing covers Mock Service Worker (MSW) for intercepting and mocking HTTP requests at the network layer.
Verify before relying
Read SKILL.md below before installing (1 file). Open directory: indexed for reading, not audited.
Install
affaan-m/ECC/react-testing · repository language: JavaScript
Open directory. Skills are indexed for reading, not audited. Review a skill's body before installing it.
Frequently 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)
File tree — 1 file
skills/react-testing/SKILL.md
Let your AI agent find skills like this
Example. Real query, live index.
You found this page by searching. An agent finds it by wishing: SkillFed indexes 56,283 agent skills by what they can do, searchable in plain language.
wish › “Write behavior-focused unit tests for React components using accessible queries”
Give your agent the search over MCP, or paste the wish link into any chat. No install? Search from any chat →
Related skills
Master Testing Library and Vitest patterns for React components, custom hooks, and async workflows. This skill covers behavior-driven testing with userEvent, MSW for API mocking, renderHook for custom logic, and jest-axe for accessibility audits—everything except E2E tests and TDD enforcement.
Master React testing through practical patterns for Vitest, React Testing Library, and Jest. This skill covers component and hook testing, form validation, mocking APIs, and integration scenarios with context and routing. Apply behavior-focused testing practices to catch real bugs and build confidence in your code.
Bug Fix TDD guides you through test-driven bug resolution: write a failing test that reproduces the issue, then apply the minimum fix to make it pass. The skill covers test placement, mock patterns, and the complete red-green-refactor cycle for both standard fixes and fallback code-analysis approaches when reproduction isn't possible.
This skill teaches you to test React components effectively using Jest and React Testing Library. You'll learn configuration setup, query strategies, mocking techniques, async testing patterns, custom hooks testing, and integration approaches that follow user-behavior-first principles.
Strengthen your quality assurance foundation with structured guidance on testing methodologies and proven best practices. This skill covers the core principles of test planning, execution strategies, and quality validation techniques used across development teams. Build confidence in designing effective test cases and implementing comprehensive QA workflows.
This skill guides you through unit testing React components, hooks, and utilities with Vitest and React Testing Library. It enforces the Given/When/Then pattern, prioritizes accessible queries like getByRole, and requires userEvent for realistic interactions. Learn proper async handling, mocking strategies, and what to avoid when testing user-visible behavior.
More skills testing (MIT) · testing-strategy (MIT) · react-testing-library (MIT) · jest (MIT) · vitest (MIT) · Testing Strategist (MIT)