Security News
ESLint is Now Language-Agnostic: Linting JSON, Markdown, and Beyond
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
@testing-library/react-native
Advanced tools
Simple and complete React Native testing utilities that encourage good testing practices.
@testing-library/react-native is a testing library for React Native applications. It provides utilities to test React Native components in a way that resembles how users interact with your app. The library encourages writing tests that are more maintainable and less coupled to the implementation details of the components.
Rendering Components
This feature allows you to render React Native components and query them for assertions. The example demonstrates rendering a simple Text component and verifying its content.
const { render } = require('@testing-library/react-native');
const { Text } = require('react-native');
const { getByText } = render(<Text>Hello, World!</Text>);
expect(getByText('Hello, World!')).toBeTruthy();
Fire Events
This feature allows you to simulate user interactions such as pressing a button. The example shows how to render a Button component and simulate a press event.
const { render, fireEvent } = require('@testing-library/react-native');
const { Button } = require('react-native');
const handlePress = jest.fn();
const { getByText } = render(<Button title="Press me" onPress={handlePress} />);
fireEvent.press(getByText('Press me'));
expect(handlePress).toHaveBeenCalled();
Async Utilities
This feature provides utilities to handle asynchronous operations in your components. The example demonstrates how to wait for a state change in a component that updates after a timeout.
const { render, waitFor } = require('@testing-library/react-native');
const { useEffect, useState } = require('react');
const { Text } = require('react-native');
const AsyncComponent = () => {
const [data, setData] = useState(null);
useEffect(() => {
setTimeout(() => {
setData('Loaded');
}, 1000);
}, []);
return <Text>{data}</Text>;
};
const { getByText } = render(<AsyncComponent />);
await waitFor(() => expect(getByText('Loaded')).toBeTruthy());
Enzyme is a JavaScript testing utility for React that makes it easier to test your React Components' output. It provides a more detailed API for interacting with components, but it is more tightly coupled to the implementation details compared to @testing-library/react-native.
React Test Renderer is a package from the React team that allows you to render React components to pure JavaScript objects without depending on the DOM or a native mobile environment. It is useful for snapshot testing but does not provide the user-centric querying and event simulation features of @testing-library/react-native.
Jest is a delightful JavaScript Testing Framework with a focus on simplicity. While Jest itself is not specific to React Native, it is often used in conjunction with @testing-library/react-native for assertions and mocking. Jest provides a comprehensive testing solution but lacks the specific utilities for interacting with React Native components that @testing-library/react-native offers.
Simple and complete React Native testing utilities that encourage good testing practices.
You want to write maintainable tests for your React Native application. You love Kent Dodds' testing library, and you want to be able to write maintainable tests for your React Native application. You don't want to use a library that renders components to a fake DOM, and you've had a hard time finding what you need to write tests using that philosophy in React Native.
native-testing-library
is an implementation of the well-known testing-library API that works for
React Native. The primary goal is to mimic the testing library API as closely as possible while
still accounting for the differences in the platforms.
import React from 'react';
import { Button, Text, TextInput, View } from 'react-native';
import { act, fireEvent, render, wait } from '@testing-library/react-native';
function Example() {
const [name, setUser] = React.useState('');
const [show, setShow] = React.useState(false);
return (
<View>
<TextInput value={name} onChangeText={setUser} testID="input" />
<Button
title="Print Username"
onPress={() => {
// let's pretend this is making a server request, so it's async
// (you'd want to mock this imaginary request in your unit tests)...
setTimeout(() => {
setShow(!show);
}, Math.floor(Math.random() * 200));
}}
/>
{show && <Text testID="printed-username">{name}</Text>}
</View>
);
}
test('examples of some things', async () => {
const { getByTestId, getByText, queryByTestId } = render(<Example />);
const famousWomanInHistory = 'Ada Lovelace';
const input = getByTestId('input');
fireEvent.changeText(input, famousWomanInHistory);
const button = getByText('Print Username');
fireEvent.press(button);
await wait(() => expect(queryByTestId('printed-username')).toBeTruthy());
expect(getByTestId('printed-username')).toHaveTextContent(famousWomanInHistory);
expect(rootInstance).toMatchSnapshot();
});
This module should be installed in your project's devDependencies
:
npm install --save-dev @testing-library/react-native
You will need react
and react-native
installed as dependencies in order to run this project.
If you are interested in testing a custom hook, check out react-hooks-testing-library.
The more your tests resemble the way your software is used, the more confidence they can give you.
We try to only expose methods and utilities that encourage you to write tests that closely resemble how your apps are used.
Utilities are included in this project based on the following guiding principles:
In summary, we believe in the principles of testing-library
, and adhere to them as closely as
possible. At the end of the day, what we want is for this library to be pretty light-weight, simple,
and understandable.
Huge thanks to Kent C. Dodds for evangelizing this approach to testing. We could have never come up
with this library without him 🙏. Check out his awesome work and learn more about testing with
confidence at testingjavascript.com (you won't regret purchasing
it), and of course, use this library's big brother, react-testing-library
for your DOM
applications as well!
The hook testing ability of this library is the same implementation as
react-hooks-testing-library. The only
reason it was included in this package is because we need you to import render from us, not the
dom-testing-library
, and that's an important blocker. Some day, maybe we'll try to allow use of
that library with this one somehow.
Thanks goes to these wonderful people (emoji key):
Brandon Carroll 💻 📖 🚇 ⚠️ | Tommy Graves 🤔 🚧 👀 | Kent C. Dodds 🤔 | Piotr Szlachciak 💻 | mcgloneleviROOT 🐛 💻 | Kevin Sullivan 📖 | Ely Alvarado 💻 |
Lewis Barnes 💻 💬 | James DiGioia 💻 | mana 💻 | Mateusz Mędrek 💻 |
This project follows the all-contributors specification. Contributions of any kind welcome!
FAQs
Simple and complete React Native testing utilities that encourage good testing practices.
The npm package @testing-library/react-native receives a total of 649,497 weekly downloads. As such, @testing-library/react-native popularity was classified as popular.
We found that @testing-library/react-native demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 15 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
Security News
Members Hub is conducting large-scale campaigns to artificially boost Discord server metrics, undermining community trust and platform integrity.
Security News
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.