skills.rest
clfigueiredo
clfigueiredoCOMMUNITY
Explore all skills by this author →
GitHub

react-testing

Write behavior-focused React component and hook tests with React Testing Library, Vitest, and MSW.

5|15|Updated Jul 8, 2026
Search Tags:#vitest#testing#accessibility#react#react testing library#component tests#msw
One-click install
npx skills add https://github.com/clfigueiredo/hermes-infra-skills --skill react-testing-clfigueiredo
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-testing
Source: https://github.com/clfigueiredo/hermes-infra-skills/tree/main/.hermes/skills/curso-hermes/react-testing
Command: npx skills add https://github.com/clfigueiredo/hermes-infra-skills --skill react-testing-clfigueiredo

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? React tests often break on refactors because they assert on implementation details instead of user-visible behavior, and teams struggle to decide what belongs in component tests versus end-to-end runs. This Skill provides concrete patterns for writing stable, accessible, behavior-driven tests for React components and hooks. ## Core Features & Use Cases - Behavior-Focused Testing Patterns: Query priority guidance (getByRole first), userEvent interactions, and async patterns with findBy/waitFor to eliminate flaky tests. - Network Mocking with MSW: Mock Service Worker setup with per-test handler overrides so components and fetch logic behave exactly as in production. - Accessibility & Coverage: axe-based a11y assertions in component tests plus coverage thresholds for utilities, hooks, and components. - Use Case: When adding tests to a legacy React form component, use this Skill to render it with production providers, mock its API calls with MSW, simulate real user input with userEvent, and assert on visible success or error states. ## Quick Start Write a React Testing Library test for my UserForm component that mocks the POST /api/users endpoint with MSW and asserts the success message appears after submission.

Frequently Asked Questions about react-testing

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I test React components with React Testing Library?▼

Render the component with its production providers, interact using accessible queries like getByRole and userEvent, and assert on visible output or observable side effects. Avoid inspecting component state, props, or render counts.

How to mock API requests in React tests with MSW?▼

Mock Service Worker intercepts requests at the network layer using a setupServer with route handlers. Configure onUnhandledRequest to error so unmocked requests fail loudly, and override handlers per test with server.use for error scenarios.

Vitest vs Jest for React testing, which should I use?▼

Vitest suits Vite, Remix, and modern setups with faster execution and native ESM, while Jest remains the default for Next.js, CRA, and established repositories. Pick one runner rather than mixing both in the same repo.

When should I use Playwright instead of React Testing Library?▼

Use Playwright Component Testing or E2E when tests need real layout, browser animations, scrolling, drag-and-drop, iframes, or downloads, since JSDOM cannot handle these. Hooks, presentational components, and form logic stay in RTL.

Why are my React hook tests flaky with React Query?▼

Flakiness occurs when the QueryClient is created inside the wrapper closure, resetting cache on every render. Instantiate the QueryClient once per test outside the wrapper and disable retries in defaultOptions.

Are snapshot tests recommended for React components?▼

Snapshot tests of rendered output are discouraged because they break on styling changes and test DOM structure rather than behavior. Use them only for pure serialization functions, and prefer Playwright screenshots for visual regression.

Related Skills

Explore More Software Engineering Skills→
ynittoynitto
1

react-frontend-unit-tester

Automate frontend unit testing for React components and Zustand stores.

Community
Intermediate
HotspotVPNHotspotVPN

test-automation

Define and implement automated test suites with Vitest, Playwright, or Cypress.

Community
Advanced
xfs96192xfs96192

test-driven-development

Guide the Red-Green-Refactor cycle with failing tests before implementation.

Community
Intermediate
pythoninthegrassespythoninthegrasses
1

e2e-testing-patterns

Automate end-to-end testing patterns for web apps with Playwright and Cypress.

Official
Advanced