react-testing-library
React Testing Library guides you through writing tests that mirror real user behavior rather than internal implementation. It emphasizes querying by role, label, and text—prioritizing accessibility—and provides utilities for simulating user interactions, handling async operations, and debugging. Master query types, user events, and common patterns like custom renders and hook testing.
React Testing Library helps you write React component unit tests using accessible queries and user-event simulation.
AI-generated summary based on this skill's SKILL.md
Decision gist · record as of 2026-07-18
React Testing Library helps you write React component unit tests using accessible queries and user-event simulation. React Testing Library guides you through writing tests that mirror real user behavior rather than internal implementation. It emphasizes querying by role, label, and text—prioritizing accessibility—and provides utilities for simulating user interactions, handling async operations, and debugging. Master query types, user events, and common patterns like custom renders and hook testing.
Use it when
- React Testing Library offers three query variants: `getBy*` (throws if not found), `queryBy*` (returns null if absent).
- React Testing Library recommends using `userEvent` instead of `fireEvent` because it simulates real user behavior more accurately.
Verify before relying
Read SKILL.md below before installing (7 files). Open directory: indexed for reading, not audited.
Install
itechmeat/llm-code/react-testing-library · repository language: Go
Open directory. Skills are indexed for reading, not audited. Review a skill's body before installing it.
Frequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
How do I test React components with testing library?
React Testing Library provides utilities to write tests that simulate real user behavior. Start by rendering your component with `render()`, then query elements using accessible queries like `getByRole()`, `getByLabelText()`, or `getByText()`. Simulate user interactions with `userEvent`, and use `findBy` or `waitFor()` for async operations. This approach prioritizes accessibility and makes tests more maintainable.
What are the main query types in React Testing Library?
React Testing Library offers three query variants: `getBy*` (throws if not found), `queryBy*` (returns null if absent), and `findBy*` (returns a promise for async elements). Query types include `getByRole()` for accessible elements, `getByLabelText()` for form inputs, `getByText()` for content, and `getByPlaceholderText()` for inputs. Role-based queries are preferred as they reflect how users interact with your app.
How should I simulate user interactions instead of fireEvent?
React Testing Library recommends using `userEvent` instead of `fireEvent` because it simulates real user behavior more accurately. Import `userEvent` from '@testing-library/user-event', then use methods like `userEvent.click()`, `userEvent.type()`, `userEvent.selectOptions()`, and `userEvent.hover()`. UserEvent fires multiple events in sequence, matching how browsers handle actual user input, making tests more reliable.
What patterns should I use for testing async behavior?
React Testing Library provides `findBy*` queries and `waitFor()` for async testing. Use `findBy*` when expecting elements to appear after async operations—it returns a promise that resolves when found. For more complex async scenarios, wrap assertions in `waitFor()` to poll until conditions are met. Avoid `act()` warnings by letting Testing Library handle updates automatically through user interactions and async queries.
How do I test React hooks with renderHook?
React Testing Library's `renderHook()` utility lets you test hooks in isolation. Import it from '@testing-library/react', call `renderHook(() => useMyHook())`, and access the hook's return value via `result.current`. For async hooks, use `waitFor()` to wait for state updates. Pass props through the `initialProps` option and update them with `rerender()` to test how hooks respond to prop changes.
What accessibility-first testing patterns does React Testing Library promote?
React Testing Library prioritizes accessible queries to encourage writing inclusive components. Use `getByRole()` to query semantic elements, `getByLabelText()` for form fields, and avoid implementation details like test IDs when possible. This approach ensures your tests verify that components work for all users, including those using assistive technologies. Custom render functions with providers and jest-dom matchers enhance accessibility testing.
SKILL.md
Rendered from the published skill. Quoted content, verbatim.
React Testing Library Skill
Quick Navigation
| Topic | Link |
|---|---|
| Queries | references/queries.md |
| User Events | references/user-events.md |
| API | references/api.md |
| Async | references/async.md |
| Debugging | references/debugging.md |
| Config | references/config.md |
Installation
Install: `npm install --save-dev @testing-library/react
(truncated - see the full file via the links below)
File tree — 7 files
skills/react-testing-library/SKILL.md
skills/react-testing-library/references/api.md
skills/react-testing-library/references/async.md
skills/react-testing-library/references/config.md
skills/react-testing-library/references/debugging.md
skills/react-testing-library/references/queries.md
skills/react-testing-library/references/user-events.md
Let your AI agent find skills like this
Example. Real query, live index.
You found this page by searching. An agent finds it by wishing: SkillFed indexes 56,283 agent skills by what they can do, searchable in plain language.
wish › “Write React component unit tests using accessible queries”
Give your agent the search over MCP, or paste the wish link into any chat. No install? Search from any chat →
Related skills
Master React Testing Library fundamentals through accessibility-first query selection, user-centric event simulation, and async handling patterns. Learn when to use getByRole, userEvent, and findBy queries, plus common pitfalls to avoid in component testing.
This skill teaches you to test React components effectively using Jest and React Testing Library. You'll learn configuration setup, query strategies, mocking techniques, async testing patterns, custom hooks testing, and integration approaches that follow user-behavior-first principles.
Master Testing Library and Vitest patterns for React components, custom hooks, and async workflows. This skill covers behavior-driven testing with userEvent, MSW for API mocking, renderHook for custom logic, and jest-axe for accessibility audits—everything except E2E tests and TDD enforcement.
This skill guides you through unit testing React components, hooks, and utilities with Vitest and React Testing Library. It enforces the Given/When/Then pattern, prioritizes accessible queries like getByRole, and requires userEvent for realistic interactions. Learn proper async handling, mocking strategies, and what to avoid when testing user-visible behavior.
Master React testing through practical patterns for Vitest, React Testing Library, and Jest. This skill covers component and hook testing, form validation, mocking APIs, and integration scenarios with context and routing. Apply behavior-focused testing practices to catch real bugs and build confidence in your code.
Master React Native testing workflows with this agent skill designed for AI coding assistants. It equips you to write, review, and refine component tests using Testing Library patterns, streamlining quality assurance in your React Native projects.
More skills react-native-testing (MIT) · Testing Qa (unlicensed) · react-testing (MIT)