React Testing Library

React Testing Library (@testing-library/react) is a lightweight wrapper around react-dom and react-dom/test-utils (or react-test-renderer for React Native) that provides utilities for rendering React components and querying the resulting DOM the way an actual user would — by text, label, or role — rather than by internal implementation details like component instances or state. It exposes render(), fireEvent, screen (from the shared @testing-library/dom query engine), and renderHook() for testing custom hooks in isolation, plus an automatic cleanup that unmounts components between tests.

The library deliberately avoids exposing shallow rendering or internal component instances, pushing tests toward asserting on rendered output and user-observable behavior — the guiding principle behind the whole Testing Library family (DOM Testing Library, Vue Testing Library, and others). Since v13, it also absorbed the renderHook API previously shipped as the now-deprecated @testing-library/react-hooks package, making it the single canonical package for testing both components and hooks in React.

What You Get

• render() to mount a React component into a jsdom container and get back query utilities (getByRole, getByText, etc.)
• screen, exported from @testing-library/dom, for querying the whole rendered document without holding onto a render() result
• fireEvent (and userEvent, in the companion @testing-library/user-event package) to simulate user interactions
• renderHook() for testing custom React hooks in isolation, without needing to build a host component
• Automatic component cleanup between tests plus configuration hooks (configure()) for test-id attribute names and async utility timeouts

Common Use Cases

• Testing that a component renders expected text, roles, and accessible labels after user interaction
• Testing custom React hooks (state, effects, context) in isolation via renderHook()
• Writing integration-style tests for forms, modals, and interactive widgets that assert on DOM output rather than internal state
• Replacing shallow-rendering-based test suites (e.g. from Enzyme) with behavior-driven, DOM-query-based tests

Under The Hood

Architecture The library’s core (src/pure.js) implements render() by mounting a component into a detached DOM container via react-dom/client’s createRoot (or react-dom for older React versions), wrapping updates in act() (src/act-compat.js handles cross-React-version act compatibility), and returning the container along with query helpers bound to it via @testing-library/dom’s getQueriesForElement; fireEvent (src/fire-event.js) dispatches native DOM events through the same act()-wrapped path so React’s state updates are flushed synchronously in tests.

Tech Stack Plain JavaScript (not TypeScript, though type declarations are hand-maintained under types/), built with kcd-scripts (Kent C. Dodds’ shared build/lint/test tooling), depending on @testing-library/dom for the actual query engine so DOM-querying logic is shared across the whole Testing Library family rather than reimplemented per framework.

Code Quality Extensively tested against its own behavior (src/tests covers render, rerender, cleanup, auto-cleanup, act compatibility, renderHook, error handling, and end-to-end scenarios), with CI-enforced coverage via codecov.yml and a validate script (lint + typecheck + test) gating changes — appropriate rigor for a library whose job is to be a trustworthy foundation for everyone else’s tests.

API Design The API is intentionally minimal — render, screen, fireEvent, renderHook, cleanup — and consistently steers users toward querying by accessible role/label/text rather than test IDs or component internals, which is the library’s core design philosophy; the tradeoff is that tests requiring instance-level assertions (rare in idiomatic usage) require dropping down to raw DOM APIs.