{"enrichment":{"faq":[{"a":"react-testing teaches you to query the DOM as users would\u2014using 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.","q":"How to test react components with testing library?"},{"a":"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.","q":"What are react testing library best practices?"},{"a":"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.","q":"How do you mock HTTP requests in react tests?"},{"a":"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.","q":"How can you test custom hooks in react?"},{"a":"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.","q":"What's the difference between playwright component testing vs rtl?"},{"a":"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.","q":"How do you assert accessibility compliance in react tests?"}],"shadow_tags":["behavior-driven-testing","mock-service-worker","accessibility-first","user-interaction-simulation","jsdom-limitations","test-isolation","provider-wrapping","async-test-patterns","coverage-metrics"],"summary_rewrite":"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."},"files":[{"bytes":13168,"path":"skills/react-testing/SKILL.md","sha256":"51c18b4e28285bb876ef469e47c6f53108b5a9f900950a60e897c3c24826a65e","url":"https://skillfed.io/files/affaan-m/ECC/react-testing/48422b00/SKILL.md"}],"id":"affaan-m/ECC/react-testing","links":{"html":"https://skillfed.io/affaan-m/ECC/react-testing","md":"https://skillfed.io/affaan-m/ECC/react-testing.md","repo":"https://github.com/affaan-m/ECC"},"meta":{"agents_supported":[],"first_seen":"2026-07-28","forks":35692,"language":"JavaScript","last_updated":"2026-07-27","license":"MIT","name":"react-testing","publisher":"affaan-m","stars":234207},"relations":{"similar":[{"id":"hieutrtr/ai1-skills/react-testing-patterns"},{"id":"majesticlabs-dev/majestic-marketplace/react-testing"},{"id":"manutej/luxor-claude-marketplace/jest-react-testing"},{"id":"jmsktm/claude-settings/testing-qa"},{"id":"itechmeat/llm-code/react-testing-library"},{"id":"bobmatnyc/claude-mpm-skills/jest"},{"id":"DaleStudy/skills/testing"},{"id":"olehsvyrydov/AI-development-team/frontend-tester"},{"id":"nahisaho/MUSUBI/test-engineer"},{"id":"bobmatnyc/claude-mpm-skills/vitest"}]},"slug":{"owner":"affaan-m","repo":"ECC","skill":"react-testing"},"version":"48422b00"}