React Native Testing Library
- React Native course
- Intermediate
- Lesson 95/116
- 5 min
Learn the React Native Testing Library.
What is React Native Testing Library?
React Native Testing Library (RNTL) is a library that renders components in a test environment and interacts with them. It provides functions like render, getByText and fireEvent. It works together with Jest.
The RNTL philosophy is that tests focus on what is shown, not how it is drawn. It queries what the user sees (text, behavior) rather than the app's internals (state, child components). This makes tests resilient to refactoring. A render(<App />) call draws the component into the test environment; from the result you get queries.
Render with render
render draws a component in the test environment. It returns query functions as the result: getByText, getByTestId and more. Writing const { getByText } = render(<App />) both renders and grabs the query.
RNTL draws React Native components in a JavaScript test environment instead of a real device; this is very fast. The render result is an object; it is common to ignore it and only take its queries. You can render the same component multiple times; each call is an independent render. RNTL cleans up automatically at the end; no afterEach is needed.
Practice Write a render test
An App component is already defined; it returns <Text>Hello</Text>. Write a test that calls render(<App />). Use test('hello is shown', () => { ... }).
Starter code
// Import render from @testing-library/react-native
// Write a test named 'hello is shown'; render AppSample solution
import { render } from "@testing-library/react-native";
import { Text } from "react-native";
function App() {
return <Text>Hello</Text>;
}
test("hello is shown", () => {
render(<App />);
});Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 Match each concept to its role
| Term | Meaning |
|---|---|
Jest |
Runs tests |
RNTL |
Renders components |
render |
Mounts in test env |
getByText |
Finds by text |
2 render import
import { ____ } from '@testing-library/react-native';import { render } from '@testing-library/react-native';Explanation: render is imported from RNTL.
3 What does RNTL do?
import { render } from '@testing-library/react-native';- Builds an APK
- Manages a database
- Renders components in a test env Correct answer
- Applies a theme
Explanation: RNTL renders components in a test environment.