Agent skill

React Testing Library

React Testing Library best practices for writing maintainable, user-centric tests.

MITAuto-check passedDevelopment

Install React Testing Library

skills CLI

$ npx skills add pproenca/dot-skills --skill react-testing-library -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI

$ gh skill install pproenca/dot-skills react-testing-library --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy

$ git clone --depth 1 https://github.com/pproenca/dot-skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/.experimental/react-testing-library .claude/skills/react-testing-library && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Paste into Claude Code

Install the "react-testing-library" agent skill from https://github.com/pproenca/dot-skills/tree/master/skills/.experimental/react-testing-library into .claude/skills/react-testing-library/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "react-testing-library", then confirm the skill loads.

Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

$skill-installer

$skill-installer install https://github.com/pproenca/dot-skills/tree/master/skills/.experimental/react-testing-library

Type this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.

skills CLI

$ npx skills add pproenca/dot-skills --skill react-testing-library -a codex

Project install goes to .agents/skills/; add -g for ~/.codex/skills/.

GitHub CLI

$ gh skill install pproenca/dot-skills react-testing-library --agent codex

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/pproenca/dot-skills.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/.experimental/react-testing-library .agents/skills/react-testing-library && rm -rf skills-src

Use ~/.agents/skills/ instead of .agents/skills for a personal install.

Codex skills documentation · loads skills from .agents/skills/

Paste into Codex

Install the "react-testing-library" agent skill from https://github.com/pproenca/dot-skills/tree/master/skills/.experimental/react-testing-library into .agents/skills/react-testing-library/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "react-testing-library", then confirm the skill loads.

Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add pproenca/dot-skills --skill react-testing-library -a cursor

Project install goes to .agents/skills/; add -g for ~/.cursor/skills/.

GitHub CLI

$ gh skill install pproenca/dot-skills react-testing-library --agent cursor

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/pproenca/dot-skills.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/.experimental/react-testing-library .cursor/skills/react-testing-library && rm -rf skills-src

Use ~/.cursor/skills/ instead of .cursor/skills for a personal install.

Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/

Paste into Cursor

Install the "react-testing-library" agent skill from https://github.com/pproenca/dot-skills/tree/master/skills/.experimental/react-testing-library into .cursor/skills/react-testing-library/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "react-testing-library", then confirm the skill loads.

Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

gemini skills install

$ gemini skills install https://github.com/pproenca/dot-skills.git --path skills/.experimental/react-testing-library

--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.

skills CLI

$ npx skills add pproenca/dot-skills --skill react-testing-library -a gemini-cli

Project install goes to .agents/skills/; add -g for ~/.gemini/skills/.

GitHub CLI

$ gh skill install pproenca/dot-skills react-testing-library --agent gemini-cli

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/pproenca/dot-skills.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/.experimental/react-testing-library .gemini/skills/react-testing-library && rm -rf skills-src

Use ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.

Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/

Paste into Gemini CLI

Install the "react-testing-library" agent skill from https://github.com/pproenca/dot-skills/tree/master/skills/.experimental/react-testing-library into .gemini/skills/react-testing-library/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "react-testing-library", then confirm the skill loads.

Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

GitHub CLI

$ gh skill install pproenca/dot-skills react-testing-library

Installs for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).

skills CLI

$ npx skills add pproenca/dot-skills --skill react-testing-library -a github-copilot

Project install goes to .agents/skills/; add -g for ~/.copilot/skills/.

Manual copy

$ git clone --depth 1 https://github.com/pproenca/dot-skills.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/.experimental/react-testing-library .github/skills/react-testing-library && rm -rf skills-src

Use ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.

GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/

Paste into GitHub Copilot

Install the "react-testing-library" agent skill from https://github.com/pproenca/dot-skills/tree/master/skills/.experimental/react-testing-library into .github/skills/react-testing-library/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "react-testing-library", then confirm the skill loads.

GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add pproenca/dot-skills --skill react-testing-library -a opencode

OpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.

GitHub CLI

$ gh skill install pproenca/dot-skills react-testing-library --agent opencode

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/pproenca/dot-skills.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/.experimental/react-testing-library .opencode/skills/react-testing-library && rm -rf skills-src

Use ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.

OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/

Paste into OpenCode

Install the "react-testing-library" agent skill from https://github.com/pproenca/dot-skills/tree/master/skills/.experimental/react-testing-library into .opencode/skills/react-testing-library/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "react-testing-library", then confirm the skill loads.

OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

Facts

Skill name: react-testing-library
GitHub stars: 214
Token cost: ~1.7k tokens
SKILL.md length: 441 words
Files: 48 (incl. references, assets)
Skills in repo: 182
Repo updated: Aug 15, 2026
First seen: Oct 7, 2026
Licence: MIT

At a glance

React Testing Library best practices for writing maintainable, user-centric tests.

Works in 9 steps: Query Selection (CRITICAL) → Async Handling (CRITICAL) → Common Anti-Patterns (CRITICAL) → …
Refactoring RTL tests
SKILL.md covers When to Apply, Rule Categories by Priority, Quick Reference and How to Use, plus 1 more section
Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

React Testing Library is an agent skill from pproenca/dot-skills. React Testing Library best practices for writing maintainable, user-centric tests. Use when writing, reviewing, or refactoring RTL tests. Triggers on test files, testing patterns, getBy/queryBy queries, userEvent, waitFor, and component testing.

Its SKILL.md is about 1.7k tokens, which your agent loads only when the skill is triggered. The skill folder holds 50 other files, including reference files and assets (for example `README.md`, `assets/templates/_template.md` and `metadata.json`).

It sits in Development, covering Test strategy and Refactoring. It works with Testing Library. The repository describes itself as: A collection of AI agent skills following the Agent Skills open format. The licence is MIT.

When your agent uses it

Refactoring RTL tests
Testing patterns
GetBy/queryBy queries
Component testing

Example prompts

“/react-testing-library”

Workflow steps

9 steps, taken from the step headings in SKILL.md.

Query Selection (CRITICAL)
Async Handling (CRITICAL)
Common Anti-Patterns (CRITICAL)
User Interaction (HIGH)
Assertions (HIGH)
Component Setup (MEDIUM)
Test Structure (MEDIUM)
Debugging (LOW-MEDIUM)
Accessibility Testing (LOW)

What it can do on your machine

Read from SKILL.md and the folder at commit cf93c57. It shows what the files ask for, not the result of running them.

Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
No scripts in the folder and no shell commands in SKILL.md.
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

React Testing Library loads about 1.7k tokens when it runs, and up to ~17k if it reads all its reference files. Until then it costs about 67 tokens; SKILL.md has 441 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it: ~67
When it runs · the whole SKILL.md, loaded when a task matches: ~1.7k
With references · SKILL.md plus every file in references/, read only if the agent opens them: ~17k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from pproenca/dot-skills at commit cf93c57, republished under its MIT licence (© pproenca). 441 words, ~1,656 tokens.

Download SKILL.mdSave it as .claude/skills/react-testing-library/SKILL.md (or your agent's skills folder). This skill also uses 47 other files; get the full folder from GitHub.

name: react-testing-library
description: React Testing Library best practices for writing maintainable, user-centric tests. Use when writing, reviewing, or refactoring RTL tests. Triggers on test files, testing patterns, getBy/queryBy queries, userEvent, waitFor, and component testing.

React Testing Library Best Practices

Comprehensive testing guide for React components using Testing Library, designed for AI agents and LLMs. Contains 43 rules across 9 categories, prioritized by impact to guide test writing and code review.

When to Apply

Reference these guidelines when:

Writing new component tests with React Testing Library
Selecting queries (getByRole, getByLabelText, etc.)
Handling async operations in tests (findBy, waitFor)
Simulating user interactions (userEvent)
Reviewing tests for anti-patterns and implementation detail testing

Rule Categories by Priority

Priority	Category	Impact	Prefix
1	Query Selection	CRITICAL	`query-`
2	Async Handling	CRITICAL	`async-`
3	Common Anti-Patterns	CRITICAL	`anti-`
4	User Interaction	HIGH	`user-`
5	Assertions	HIGH	`assert-`
6	Component Setup	MEDIUM	`setup-`
7	Test Structure	MEDIUM	`struct-`
8	Debugging	LOW-MEDIUM	`debug-`
9	Accessibility Testing	LOW	`a11y-`

Quick Reference

1. Query Selection (CRITICAL)

query-prefer-role - Prefer getByRole over other queries
query-avoid-testid - Avoid getByTestId as primary query
query-use-screen - Use screen for queries
query-label-text-forms - Use getByLabelText for form fields
query-role-name-option - Use name option with getByRole
query-get-vs-query - Use getBy for present, queryBy for absent
query-within-scope - Use within() to scope queries

2. Async Handling (CRITICAL)

async-findby-over-waitfor - Use findBy instead of waitFor + getBy
async-await-findby - Always await findBy queries
async-single-assertion-waitfor - Single assertion in waitFor
async-no-side-effects-waitfor - Avoid side effects in waitFor
async-waitfor-disappear - Use waitForElementToBeRemoved

3. Common Anti-Patterns (CRITICAL)

anti-unnecessary-act - Avoid unnecessary act() wrapping
anti-manual-cleanup - Remove manual cleanup calls
anti-implementation-details - Avoid testing implementation details
anti-empty-waitfor - Avoid empty waitFor callbacks
anti-container-queries - Avoid using container for queries
anti-redundant-roles - Avoid adding redundant ARIA roles

4. User Interaction (HIGH)

user-prefer-userevent - Use userEvent over fireEvent
user-setup-before-render - Setup userEvent before render
user-await-interactions - Always await userEvent interactions
user-keyboard-for-special-keys - Use keyboard() for special keys
user-clear-before-type - Use clear() before retyping

Show full SKILL.md (170 more words)Show less

5. Assertions (HIGH)

assert-jest-dom-matchers - Use jest-dom matchers
assert-visible-over-in-document - Use toBeVisible() for visibility
assert-text-content - Use toHaveTextContent() for text
assert-have-value - Use toHaveValue() for inputs
assert-accessible-description - Use toHaveAccessibleDescription()

6. Component Setup (MEDIUM)

setup-wrapper-providers - Use wrapper option for providers
setup-custom-render - Create custom render with providers
setup-mock-modules - Mock modules at module level
setup-fake-timers - Configure userEvent with fake timers
setup-render-hook - Use renderHook for testing hooks

7. Test Structure (MEDIUM)

struct-arrange-act-assert - Follow Arrange-Act-Assert pattern
struct-one-behavior-per-test - Test one behavior per test
struct-descriptive-names - Use descriptive test names
struct-avoid-beforeeach-render - Avoid render() in beforeEach

8. Debugging (LOW-MEDIUM)

debug-screen-debug - Use screen.debug() to inspect DOM
debug-logroles - Use logRoles to find available roles
debug-testing-playground - Use Testing Playground for queries

9. Accessibility Testing (LOW)

a11y-role-queries-verify - Role queries verify accessibility
a11y-verify-focus - Test focus management
a11y-test-aria-states - Test ARIA states and properties

How to Use

Read individual reference files for detailed explanations and code examples:

Section definitions - Category structure and impact levels
Rule template - Template for adding new rules

Reference Files

File	Description
references/_sections.md	Category definitions and ordering
assets/templates/_template.md	Template for new rules
metadata.json	Version and reference information

Files

SKILL.md and 47 other files (references, assets) in skills/.experimental/react-testing-library of pproenca/dot-skills.

SKILL.md
README.md
assets/templates/_template.md
metadata.json
references/_sections.md
references/a11y-role-queries-verify.md
references/a11y-test-aria-states.md
references/a11y-verify-focus.md
references/anti-container-queries.md
references/anti-empty-waitfor.md
references/anti-implementation-details.md
references/anti-manual-cleanup.md
references/anti-redundant-roles.md
references/anti-unnecessary-act.md
references/assert-accessible-description.md
references/assert-have-value.md
references/assert-jest-dom-matchers.md
references/assert-text-content.md
… and 30 more

Open the folder on GitHubat commit cf93c57

Compare with similar skills

React Testing Library next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

React Testing Library compared with similar skills
Skill	Stars	Used in	Tokens	Auto-check	Licence	Repo updated
React Testing Library this skillpproenca/dot-skills	214	—	~1.7k	Automated safety check: Pass	MIT	1 mo ago
Write Vibe Testsmistralai/mistral-vibe	5.1k	—	~1.2k	Automated safety check: Pass	Apache-2.0	yesterday
Tsh Writing HooksTheSoftwareHouse/copilot-collections	284	—	~3k	Automated safety check: Pass	MIT	2 days ago
Senior QAalirezarezvani/claude-skills	28k	1 repos	~2.1k	Automated safety check: Pass	MIT	1 mo ago
React Testingcitypaul/.dotfiles	739	—	~3.6k	Automated safety check: Pass	Custom licence	4 days ago
Front End Testingcitypaul/.dotfiles	739	—	~6.2k	Automated safety check: Pass	Custom licence	4 days ago

Similar skills

Write Vibe Tests
mistralai/mistral-vibe
Official
Guides writing or refactoring tests for the Mistral Vibe CLI agent so they check behavior through stable boundaries, like tool invocation or saved session shape, instead of internal calls.
5.1k GitHub stars~1.2k tokensUpdated yesterday
Testing & QAAuto-check passed
Tsh Writing Hooks
TheSoftwareHouse/copilot-collections
Custom hook and composable patterns — naming, composition, stable return shapes, lifecycle cleanup, and testing strategies.
284 GitHub stars~3k tokensUpdated 2 days ago
DevelopmentAuto-check passed
Senior QA
alirezarezvani/claude-skills
Generates unit tests, integration tests, and E2E tests for React/Next.js applications.
28k GitHub starsUsed in 1 repo~2.1k tokens
Testing & QAAuto-check passed
React Testing
citypaul/.dotfiles
React component testing patterns including components, hooks, context, and forms.
739 GitHub stars~3.6k tokensUpdated 4 days ago
Testing & QAAuto-check passed
Front End Testing
citypaul/.dotfiles
Behavior-driven UI testing patterns across Vitest Browser Mode, Playwright E2E evidence boundaries, and DOM Testing Library.
739 GitHub stars~6.2k tokensUpdated 4 days ago
Testing & QAAuto-check passed
Mcaf Testing
managedcode/Storage
Add or update automated tests for a change using the repository’s verification rules in AGENTS.md.
138 GitHub stars~1.2k tokensUpdated today
Testing & QAAuto-check passed

Questions about React Testing Library

What does React Testing Library do?

React Testing Library best practices for writing maintainable, user-centric tests. React Testing Library is an agent skill from pproenca/dot-skills. React Testing Library best practices for writing maintainable, user-centric tests.

When should I use React Testing Library?

React Testing Library fits situations like: refactoring RTL tests; testing patterns; getBy/queryBy queries; component testing.

How do I install React Testing Library in Claude Code?

Run `npx skills add pproenca/dot-skills --skill react-testing-library -a claude-code`. Or copy the skill folder (skills/.experimental/react-testing-library in pproenca/dot-skills) into .claude/skills/react-testing-library in your project. Claude Code loads it when a task matches its description.

How do I install React Testing Library in Codex?

Run `npx skills add pproenca/dot-skills --skill react-testing-library -a codex`. Or copy the skill folder (skills/.experimental/react-testing-library in pproenca/dot-skills) into .agents/skills/react-testing-library in your project. Codex loads it when a task matches its description.

Can I use React Testing Library in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add pproenca/dot-skills --skill react-testing-library -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/react-testing-library, .gemini/skills/react-testing-library, .github/skills/react-testing-library and .opencode/skills/react-testing-library in your project.

What does React Testing Library need to run?

SKILL.md names no scripts, command-line tools or credentials: React Testing Library is instructions for the agent only.

Does React Testing Library access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is React Testing Library safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does React Testing Library use?

React Testing Library is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does React Testing Library use?

About 1.7k tokens (SKILL.md is roughly 6.6k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 16k tokens, read only when the agent opens those files.

What are the alternatives to React Testing Library?

Skills that share tags, products or a category with React Testing Library: Write Vibe Tests (mistralai/mistral-vibe, 5.1k stars), Tsh Writing Hooks (TheSoftwareHouse/copilot-collections, 284 stars), Senior QA (alirezarezvani/claude-skills, 28k stars) and React Testing (citypaul/.dotfiles, 739 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains React Testing Library?

pproenca (a GitHub user) maintains it in pproenca/dot-skills, which has 214 GitHub stars. The repository holds 182 skills in this directory. The repository was last updated on August 15, 2026.

Source: pproenca/dot-skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.

Install React Testing Library

Facts

At a glance

What it does

When your agent uses it

Example prompts

Workflow steps

What it can do on your machine

Tool permissions

Runs code

Network

Credentials

Context cost

Safety

SKILL.md

React Testing Library Best Practices

When to Apply

Rule Categories by Priority

Quick Reference

1. Query Selection (CRITICAL)

2. Async Handling (CRITICAL)

3. Common Anti-Patterns (CRITICAL)

4. User Interaction (HIGH)

5. Assertions (HIGH)

6. Component Setup (MEDIUM)

7. Test Structure (MEDIUM)

8. Debugging (LOW-MEDIUM)

9. Accessibility Testing (LOW)

How to Use

Reference Files

Files

Compare with similar skills

Similar skills

More from pproenca/dot-skills

Related

Questions about React Testing Library