React Native Testing Library reimplements APIs from React Testing Library for React Native, which has no DOM. It uses React Test Renderer in a custom Node.js environment. The team created it after finding that direct use of the renderer was cumbersome and Enzyme tests often depended on component internals, especially as React Hooks approached.
What Is React Native Testing Library
Mike from Callstack explains what React Native Testing Library does and demonstrates how its queries and events help teams test apps through user-facing behavior.
The library aims to make tests that assert on component internals difficult. Its queries find elements by text, accessibility labels, or input values, while avoiding direct state changes and lookups by component name. The goal is for tests to resemble how people use the app.
Mike walks through a test that imports `render` and `fireEvent`, sets up data and mocks, and renders a component with chosen props. The returned helpers can find elements by accessibility label or text. Finding an input by its accessibility label can also help developers check that it is usable with tools such as VoiceOver.
Tests can use `fireEvent` to emulate user actions, including changing text, pressing, and scrolling. Mike demonstrates finding a submit control, pressing it, and checking whether `onSubmit` received the expected data.
Takeaways
- Prefer queries based on text and accessibility labels to keep tests focused on what users can find.
- Avoid tests that change component state or depend on internal properties, since implementation changes can make them brittle.
- Use `fireEvent` to simulate common interactions and verify the resulting behavior.
- Accessible labels can help both assistive technology users and test authors locate interactive elements.
Mentioned in this talk
Search inside this talk
What was claimed 8
- featureReact Native Testing Library: Reimplements APIs inspired by React Testing Library and DOM Testing Library for React Native
“a reimplementation of the same APIs in the React Native realm”
YouTube Unverified1 source· Talk
- usesa thin abstraction layer
“we use React Test Renderer”
YouTube Verified4 sources· Talk
- featureReact Native Testing Library: Provides queries for finding elements by text, accessibility helpers, or input values
“find elements on your screen by text, accessibility helpers, or input values”
YouTube Unverified1 source· Talk
- featureReact Native Testing Library: Makes it hard to assert on component implementation details and aims to reflect user interactions
“make it very hard to assert on the implementation details”
YouTube Unverified1 source· Talk
- uses
“It's hosted on GitHub Pages”
YouTube Unverified1 source· Talk
- uses
“We build it with Docusaurus”
YouTube Unverified1 source· Talk
- feature
Callstack: Supports React Native Testing Library“we're proud that we can support so many libraries”
YouTube Unverified1 source· Talk
- featureReact Native Testing Library: Provides fireEvent helpers for changing text, pressing, and scrolling
“changing text, pressing, and scrolling”
YouTube Unverified1 source· Talk
