SYSTEM Cited by 2 sources
React Testing Library¶
What it is¶
React Testing Library (RTL) is a testing utility for React
that queries the rendered DOM rather than the React component
tree. Its canonical APIs are screen.getByRole(...),
getByText(...), getByLabelText(...), getByPlaceholderText(...),
getByDisplayValue(...), getByAltText(...), getByTitle(...),
getByTestId(...) — in descending priority order for
accessibility-driven test selectors. queryBy* variants return
null instead of throwing (use for non-existence checks), and
findBy* variants wait asynchronously.
The library's philosophy — "the more your tests resemble the way your software is used, the more confidence they can give you" — is a deliberate reaction against Enzyme's component-instance-based testing.
Contrast with Enzyme¶
| Axis | Enzyme | RTL |
|---|---|---|
| What is tested | React component tree | Rendered DOM |
| Selector style | wrapper.find('ComponentName'), .instance(), .props() |
getByRole, getByText, getByTestId |
| React 18 support | Abandoned | First-class |
| Coupling to internals | High (component instance, state) | Low (renders only) |
| User-event simulation | wrapper.simulate('click') |
userEvent.click(...) from @testing-library/user-event |
The context problem (canonical for AI-assisted migration)¶
The correct RTL query depends on what the rendered DOM looks
like at runtime — specifically whether the component exposes
an accessibility role (getByRole), a data-testid
(getByTestId), visible text (getByText), etc. This context
is not visible in the test source code — the test file
creates the component, but the resolved DOM depends on the
component's implementation, its props, any conditional
rendering, its children.
This is why Slack's AI-powered migration pipeline had to capture the rendered DOM per test case and feed it to the LLM — see concepts/dom-context-injection-for-llm and systems/enzyme-to-rtl-codemod (Source: sources/2024-06-19-slack-ai-powered-conversion-from-enzyme-to-react-testing-library).
Seen in¶
- sources/2024-06-19-slack-ai-powered-conversion-from-enzyme-to-react-testing-library
— target framework for Slack's 15,000+ test migration. Post
discloses a specific query-priority order baked into the
codemod's LLM prompt:
getByRole→getByPlaceholderText→getByText→getByDisplayValue→getByAltText→getByTitle→getByTestId;query*reserved for non-existence checks; text matchers normalised to lowercase regex (screen.getByText(/text/i)). - sources/2025-01-07-slack-automated-accessibility-testing-at-slack
— RTL considered but rejected as the integration surface
for Slack's Axe accessibility checks.
Slack explored wrapping RTL's
rendermethod with a custom render that would auto-run Axe; blocked by Slack's customised Jest setup. Slack pivoted to Playwright-based integration via the fixture- extension pattern. A vanilla Jest + RTL setup would likely have supported therender-wrapping approach — canonical wiki datum for framework-customisation closing off otherwise-clean integration paths.
Related¶
- systems/enzyme — the predecessor framework
- systems/enzyme-to-rtl-codemod — Slack's AI-powered migration tool
- systems/jest — underlying test runner
- concepts/dom-context-injection-for-llm — why RTL migration needs DOM context