Guide · Agent skill
How to use the React Testing Patterns agent skill
Updated · written with AI from the project's own documentation and checked against our catalogue data
The react-testing skill is a set of React testing conventions that an AI coding agent follows when you ask it to write or fix tests. Once it is installed, the agent favors tests that check what a user sees and does, using React Testing Library, userEvent, MSW for network mocking and axe for accessibility checks. This guide explains what the skill does, how to install it, how to ask for it and what it needs.
React Testing Patternsaffaan-m/ECC · MIT Download the skill Quick start
- 1Download the ZIP. Download the react-testing skill ZIP from this page.
- 2Unzip into a skills folder. Unzip it into ~/.claude/skills/ for all projects, or into .claude/skills/ in one project.
- 3Or upload it in the Claude apps. In the Claude apps, open Settings, go to Capabilities, then Skills, and upload the skill.
- 4Check your project setup. Confirm you have a React project with Vitest or Jest, @testing-library/react and @testing-library/user-event.
- 5Make a request. Ask for tests in plain language, naming the component, hook or page file.
- 6Review the output. Read the generated tests and setup files, then run your test runner.
What the react-testing skill makes the agent do
An agent skill is a folder with a SKILL.md file that gives an agent extra instructions for a certain kind of task. This skill covers React component tests, custom hook tests, page tests, accessibility assertions and network-level mocking. Its central rule is to test what the user sees and does, not implementation details.
In practice, the agent renders components with the same providers they have in production, finds elements with accessible queries such as getByRole and getByLabelText, and interacts with them through userEvent. It asserts visible output and observable effects, such as a callback being fired or a request being sent. It also avoids inspecting component state, counting renders or mocking React itself.
- Picks queries top-down: role, label and text first, test IDs as a last resort
- Uses await with userEvent and one userEvent.setup() per test
- Mocks HTTP requests with MSW and fails on unmocked requests
- Adds axe accessibility checks to interactive components
- Helps decide whether a test belongs in a component test or in Playwright or Cypress end-to-end tests
Install the react-testing skill
Download the ZIP for this skill from this page. Unzip it into one of two locations: ~/.claude/skills/ to make the skill available across your projects, or the .claude/skills/ folder inside a single project to share it with that project.
If you use the Claude apps instead, open Settings, go to Capabilities, then Skills, and upload the skill there.
- Personal install: unzip into ~/.claude/skills/
- Project install: unzip into .claude/skills/ in your project folder
- Claude apps: Settings → Capabilities → Skills, then upload the skill
Ask for it with natural requests
You do not need a special command. Describe the testing task in plain language, and the agent will apply the skill when the request matches its description: writing or fixing tests for React components, hooks or pages. The skill's description also covers accessibility checks and the choice between component tests and end-to-end runs, so you can ask about those too.
Name the file or component when you can. The more specific the request, the easier it is for the agent to pick the right queries and mocks.
- Write tests for the UserForm component in src/components/UserForm.tsx
- Fix the failing test in UserPage.test.tsx and keep the behavior the same
- Add an axe accessibility test to the UserCard component
- Write a test for the useCounter hook, including the initial value
- Migrate this Enzyme test to React Testing Library
Example: what the agent writes
For a form, the skill's pattern is to type into a field found by its label, click a button found by its role, and assert that the submit callback received the value. The query tiers in the skill are Accessible to everyone (getByRole, getByLabelText, getByPlaceholderText, getByText, getByDisplayValue), Semantic (getByAltText, getByTitle) and Test IDs (getByTestId) as the escape hatch.
For network calls, the skill sets up MSW handlers in a shared setup file and can override a handler for a single test, such as returning a 500 response to check an error message. Setup is configured with onUnhandledRequest set to error, so an unmocked request fails the test.
- Query order: getByRole first, getByTestId last
- Async content: use findBy queries or waitFor, not setTimeout
- Absence checks: use queryBy queries, which return null
screen.getByRole("button", { name: /save/i });What you need before using it
The skill is for a React project that already has a test runner, or is ready to set one up. The source names Vitest or Jest as runners, and @testing-library/react and @testing-library/user-event for component tests. The skill's network examples use MSW (Mock Service Worker), and its provider examples use @tanstack/react-query and a test-utils file.
Accessibility assertions are described as using axe. The skill's example imports jest-axe or vitest-axe, so you need one of those in the project to run them. The skill does not run scripts and does not use the network.
- A React project with Vitest or Jest
- @testing-library/react and @testing-library/user-event
- MSW for network mocking examples
- @tanstack/react-query and a test-utils file for provider examples
- axe for accessibility assertions (jest-axe or vitest-axe in the example)
Safety notes: scripts and network
According to the listing, this skill runs no scripts and uses no network. Its only file is SKILL.md, which contains written instructions. The agent still writes code into your project, so review the tests and any setup files it creates before you commit them, as you would for any code change.
Be aware that the skill's own examples use real-looking URLs such as /api/users. These are mocked by MSW in tests and are not calls to outside services.
- Scripts: none listed
- Network use: none listed
- Only file: SKILL.md
- Review generated tests and setup files before committing
Tips for getting better results
Give the agent your existing test-utils file or tell it which providers your app uses, so the render helper matches production. Tell it which runner you use, Vitest or Jest, so the imports are right.
Decide up front whether a behavior belongs in a component test or in Playwright or Cypress. The skill recommends picking one browser-level tool per repo unless you have a clear split between the two.
- Point the agent at your existing test-utils file
- State whether you use Vitest or Jest
- Do not mix RTL with Vitest and Playwright Component Testing in one repo without a clear split
- Use the skill for component-level work; use Playwright or Cypress for real browser needs
What people use it for
- Writing first tests for a React component with no existing coverage
- Fixing a failing test while keeping the behavior it checks
- Testing a custom hook, including its initial value and state changes
- Adding error-state tests that return a 500 response through MSW
- Migrating Enzyme or class-component tests to React Testing Library
Frequently asked questions
How do I install the react-testing agent skill?
Download the ZIP from this page and unzip it into ~/.claude/skills/ for personal use, or into .claude/skills/ inside a project. In the Claude apps, you can instead upload it under Settings, then Capabilities, then Skills.
Is the react-testing skill free?
The source lists the licence as MIT. The skill's files are published under that licence, so check the licence text in the repository before reuse. Pricing for any AI tool you run the skill with is separate.
What do I need to use the react-testing skill?
You need a React project with a test runner such as Vitest or Jest, plus @testing-library/react and @testing-library/user-event. MSW is needed for the network mocking examples, and axe for accessibility assertions.
Does the react-testing skill run scripts or use the internet?
According to the listing, it runs no scripts and uses no network. It consists of a SKILL.md file with instructions for the agent.
Is react-testing better than Playwright or Cypress for testing React?
They solve different problems. The skill focuses on component tests with React Testing Library, and it explains when a test belongs in Playwright or Cypress instead. For full end-to-end browser testing as the main goal, use Playwright or Cypress directly.
Why isn't the agent following the skill?
Check that the folder is in ~/.claude/skills/ or .claude/skills/, or that the upload under Settings, Capabilities, Skills succeeded. Then name the React testing task clearly, such as writing tests for a component, so the request matches the skill's description.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
Use this skill if you write or repair tests for React components, hooks or pages and want the agent to follow user-focused conventions with React Testing Library and MSW. Pick something else if your project is not React, or if your main need is full end-to-end browser testing with Playwright or Cypress, since this skill covers only the component side and the boundary between them.
Download the skill