react-testing-library
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.
How do I install this agent skill?
npx skills add https://github.com/pproenca/dot-skills --skill react-testing-libraryIs this agent skill safe to install?
- Gen Agent Trust Hubpass
The skill is a comprehensive guide to React Testing Library best practices. It contains no malicious code, data exfiltration patterns, or unauthorized commands. All external references are to official documentation and trusted industry resources.
- Socketpass
No alerts
- Snykpass
Risk: LOW · No issues
- Runlayerpass
2/48 files flagged
- ZeroLeakspass
Score: 93/100 · 2 sections analyzed
What does this agent skill do?
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 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 |
How can the creator link this skill?
Add the canonical catalog link to the repository README so users can inspect current installs and available audits. The publishing guide covers the complete discovery path.
<a href="https://skillzs.dev/skills/pproenca/dot-skills/react-testing-library">View react-testing-library on skillZs</a>