About react-testing-library
A 43-rule testing guide for developers and AI agents writing React component tests with Testing Library. Its nine prioritized categories cover query selection, async behavior, user interaction, assertions, setup, accessibility, and debugging.
Key features
- 0143 rules across nine categories
- 02Query selection and async testing guidance
- 03User interaction and assertion practices
- 04Component setup and test structure
- 05Debugging and accessibility checks
Use cases
- 01Writing new React component tests
- 02Choosing queries and handling async results
- 03Reviewing tests for implementation-detail checks
- 04Testing focus management and ARIA states
Install
Copy the command and run it in a terminal.
$
npx skills add https:/ / github.com/ pproenca/ dot-skills --skill react-testing-libraryAfter installing, type/react-testing-libraryin Claude Code to confirm it loaded.
Bundled files
References and scripts installed along with SKILL.md.
metadata.jsonREADME.mdassets/templates/_template.mdreferences/_sections.mda11y-role-queries-verify.mda11y-test-aria-states.mda11y-verify-focus.mdanti-container-queries.mdanti-empty-waitfor.mdanti-implementation-details.mdanti-manual-cleanup.mdanti-redundant-roles.mdanti-unnecessary-act.mdassert-accessible-description.mdassert-have-value.mdassert-jest-dom-matchers.mdassert-text-content.mdassert-visible-over-in-document.mdasync-await-findby.mdasync-findby-over-waitfor.mdasync-no-side-effects-waitfor.mdasync-single-assertion-waitfor.mdasync-waitfor-disappear.mddebug-logroles.mddebug-screen-debug.mddebug-testing-playground.mdquery-avoid-testid.mdquery-get-vs-query.mdquery-label-text-forms.mdquery-prefer-role.mdDetails
From the project READMEReact 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 queriesquery-avoid-testid- Avoid getByTestId as primary queryquery-use-screen- Use screen for queriesquery-label-text-forms- Use getByLabelText for form fieldsquery-role-name-option- Use name option with getByRolequery-get-vs-query- Use getBy for present, queryBy for absentquery-within-scope- Use within() to scope queries
2. Async Handling (CRITICAL)
async-findby-over-waitfor- Use findBy instead of waitFor + getByasync-await-findby- Always await findBy queriesasync-single-assertion-waitfor- Single assertion in waitForasync-no-side-effects-waitfor- Avoid side effects in waitForasync-waitfor-disappear- Use waitForElementToBeRemoved
3. Common Anti-Patterns (CRITICAL)
anti-unnecessary-act- Avoid unnecessary act() wrappinganti-manual-cleanup- Remove manual cleanup callsanti-implementation-details- Avoid testing implementation detailsanti-empty-waitfor- Avoid empty waitFor callbacksanti-container-queries- Avoid using container for queriesanti-redundant-roles- Avoid adding redundant ARIA roles
4. User Interaction (HIGH)
user-prefer-userevent- Use userEvent over fireEventuser-setup-before-render- Setup userEvent before renderuser-await-interactions- Always await userEvent interactionsuser-keyboard-for-special-keys- Use keyboard() for special keysuser-clear-before-type- Use clear() before retyping
5. Assertions (HIGH)
assert-jest-dom-matchers- Use jest-dom matchersassert-visible-over-in-document- Use toBeVisible() for visibilityassert-text-content- Use toHaveTextContent() for textassert-have-value- Use toHaveValue() for inputsassert-accessible-description- Use toHaveAccessibleDescription()
6. Component Setup (MEDIUM)
setup-wrapper-providers- Use wrapper option for providerssetup-custom-render- Create custom render with providerssetup-mock-modules- Mock modules at module levelsetup-fake-timers- Configure userEvent with fake timerssetup-render-hook- Use renderHook for testing hooks
7. Test Structure (MEDIUM)
struct-arrange-act-assert- Follow Arrange-Act-Assert patternstruct-one-behavior-per-test- Test one behavior per teststruct-descriptive-names- Use descriptive test namesstruct-avoid-beforeeach-render- Avoid render() in beforeEach
8. Debugging (LOW-MEDIUM)
debug-screen-debug- Use screen.debug() to inspect DOMdebug-logroles- Use logRoles to find available rolesdebug-testing-playground- Use Testing Playground for queries
9. Accessibility Testing (LOW)
a11y-role-queries-verify- Role queries verify accessibilitya11y-verify-focus- Test focus managementa11y-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 |
Comments
Markdown supported