react-testing-library
SKILL.md
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 |
Weekly Installs
45
Repository
pproenca/dot-skillsGitHub Stars
71
First Seen
Feb 15, 2026
Security Audits
Installed on
gemini-cli42
github-copilot42
codex42
kimi-cli41
opencode41
amp40