Rendering Components with React Native Testing Library
Use render from @testing-library/react-native to mount components, query elements by text or testID, and assert that expected content is visible.
What Is React Native Testing Library?
React Native Testing Library (RNTL) is the standard tool for writing component tests in React Native. It lets you render a component in a simulated environment, query the output for elements, and make assertions about what the user would see.
RNTL follows the Testing Library philosophy: test components the way users interact with them — by visible text, accessibility labels, and roles — rather than by internal implementation details like component names or state values. This produces tests that are resilient to refactoring.
Installing React Native Testing Library
Install RNTL and its peer dependency @testing-library/jest-native for extended matchers. The jest-native package adds React Native-specific matchers like toBeVisible() and toHaveTextContent().
Add the setup file to your Jest config so the matchers are available in every test file without manual imports. Import @testing-library/jest-native/extend-expect in the Jest setup file.
npm install --save-dev @testing-library/react-native @testing-library/jest-native
// jest.config.js — add setup file
module.exports = {
preset: 'jest-expo',
setupFilesAfterFramework: ['@testing-library/jest-native/extend-expect'],
};
// Or in package.json:
'jest': {
'preset': 'jest-expo',
'setupFilesAfterFramework': ['@testing-library/jest-native/extend-expect']
}All lessons in this course
- Setting Up Jest in a React Native Project
- Rendering Components with React Native Testing Library
- Firing Events and Testing User Interaction
- Mocking Native Modules and Async Code