How to use React Native Testing Library (RNTL)

React Native is a popular framework for developing mobile applications that allows developers to build cross-platform apps using JavaScript and React. Its ability to create native-like experiences on both iOS and Android with a single codebase has made it a go-to choice for many developers.

React Native Testing Library (RNTL) complements this by offering a robust solution for writing software tests for React Native applications. Efficient testing is crucial in app development for ensuring performance, stability, and user satisfaction.

What is the React Native Testing Library?

The React Native Testing Library (RNTL) is a testing framework designed to simulate user interactions and test the functionality of React Native components. It focuses on the behavior of components, ensuring that our app works as expected for the end user.

Setting up RNTL

Install dependencies: We need to ensure we have React Native set up. Then, we install RNTL via npm or yarn.

npm install --save-dev @testing-library/react-native

Or 

yarn add --dev @testing-library/react-native

Basic setup: We import RNTL in our test file.

import { render } from '@testing-library/react-native';

Writing tests

Let's create a basic React Native application that we can test using RNTL.

We first create a file called Greeting.js:

import React from 'react';
import { Text, View } from 'react-native';
const Greeting = ({ name }) => (
  <View>
    <Text>Hello, {name}!</Text>
  </View>
);
export default Greeting;

This Greeting.js component takes a name prop and renders a greeting message.

In the main app file, App.js, we can use this Greeting component as follows:

import React from 'react';
import Greeting from './greeting';
const App = () => {
  return (
    <Greeting name="React Native User" />
  );
};
export default App;

Next, we create a basic test in the Greeting.test.js file. If we run the tests (by executing npm test in the terminal), we can see that our tests pass for this component.

import React from 'react';
import { render } from '@testing-library/react-native';
import Greeting from './Greeting';
describe('Greeting component', () => {
  it('displays the correct greeting message', () => {
    const { getByText } = render(<Greeting name="Test User" />);
    
    expect(getByText('Hello, Test User!')).toBeTruthy();
  });
});

Code explanation

Let's break down what's happening in the above code:

  • Lines 1–3: We import the necessary modules such as React, the render function from the React Native Testing Library (RNTL), and the Greeting component itself.

  • Line 5: The describe function is used to group together similar tests. Here, we add tests related to the Greeting component.

  • Lines 6–7: Inside the describe block, the it function defines an individual test. This test calls the render function to render the Greeting component with the prop name set to "Test User". After rendering, the test uses the getByText function to verify whether 'Hello, Test User!' is present in the output.

  • Line 9: A truthy return value from getByText('Hello, Test User!') confirms that the component displays the correct greeting, leading to a passed test. Conversely, a falsy return value results in a test failure.

Conclusion

React Native Testing Library (RNTL) is a powerful tool for ensuring the quality of our React Native applications. By focusing on user behavior and providing easy-to-use utility functions, RNTL makes writing tests more straightforward and effective.

Free Resources

Copyright ©2025 Educative, Inc. All rights reserved