Skip to content
Lightweight React Native testing utilities helping you write better tests with less effort
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.circleci docs: Publish website (#113) Feb 8, 2019
.github Esemesek/templates (#121) Feb 23, 2019
docs Docs: Remove shallow API from docs (#154) Apr 14, 2019
flow-typed/npm
src chore: bump Jest, remove flaky inline snapshot (#150) Apr 14, 2019
typings
website fix: change link colors (#155) Apr 23, 2019
.eslintignore feat: compile to ES5 for publishing (#50) Nov 23, 2018
.eslintrc chore: update @callstack/eslint-config to the latest version 🚀 (#134) Mar 16, 2019
.flowconfig chore: update metro and merge deps (#124) Mar 1, 2019
.gitignore feat: being able to fire custom events that do not need to start with… Apr 9, 2019
.npmignore
.prettierrc.js chore: bump Jest, remove flaky inline snapshot (#150) Apr 14, 2019
.release-it.json chore: add release-it for release and changelog automation (#38) Oct 17, 2018
CODE_OF_CONDUCT.md docs: Create CODE_OF_CONDUCT.md (#10) Oct 5, 2018
CONTRIBUTING.md chore: add release-it for release and changelog automation (#38) Oct 17, 2018
LICENSE
README.md
babel.config.js Add basic tests for render (#8) Oct 4, 2018
package.json Update @callstack/eslint-config to the latest version 🚀 (#160) Apr 23, 2019
yarn.lock Update @callstack/eslint-config to the latest version 🚀 (#160) Apr 23, 2019

README.md

owl

React Native Testing Library

Lightweight React Native testing utilities helping you write better tests with less effort.

Version PRs Welcome Chat Greenkeeper badge Sponsored by Callstack

Appreciation notice: This project is heavily inspired by react-testing-library. Go check it out and use it to test your web React apps.

The problem

You want to write maintainable tests for your React Native components without testing implementation details, but then you're told to use Enzyme, which you learn has no React Native adapter, meaning only shallow rendering is supported. And you want to render deep! But deep rendering may otherwise require jsdom (React Native isn't the web!), while doing deep rendering with react-test-renderer is so painful.

You would also like to use the newest React features, but you need to wait for your testing library's abstractions to catch up and it takes a while.

You finally want to approach testing using only best practices, while Enzyme may encourage assertions on implementation details.

This solution

The react-native-testing-library is a lightweight solution for testing your React Native components. It provides light utility functions on top of react-test-renderer letting you always be up to date with latest React features and write any component tests you like. But really not any, it prevents you from testing implementation details because we stand this is a very bad practice.

This library is a replacement for Enzyme. It is tested to work with Jest, but it should work with other test runners as well.

Example

import { render, fireEvent } from 'react-native-testing-library';
import { QuestionsBoard } from '../QuestionsBoard';
import { Question } from '../Question';

function setAnswer(question, answer) {
  fireEvent.changeText(question, answer);
}

test('should verify two questions', () => {
  const { getAllByType, getByText } = render(<QuestionsBoard {...props} />);
  const allQuestions = getAllByType(Question);

  setAnswer(allQuestions[0], 'a1');
  setAnswer(allQuestions[1], 'a2');

  fireEvent.press(getByText('submit'));

  expect(props.verifyQuestions).toBeCalledWith({
    '1': { q: 'q1', a: 'a1' },
    '2': { q: 'q2', a: 'a2' },
  });
});

Installation

Open a Terminal in your project's folder and run:

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

This library has a peerDependencies listing for react-test-renderer and, of course, react. Make sure to install them too!

As you may have noticed, it's not tied to React Native at all – you can safely use it in your React components if you feel like not interacting directly with DOM.

API / Usage

The public API of react-native-testing-library is focused around these essential methods:

  • render – deeply renders given React element and returns helpers to query the output components.
  • fireEvent - invokes named event handler on the element.
  • waitForElement - waits for non-deterministic periods of time until your element appears or times out.
  • flushMicrotasksQueue - waits for microtasks queue to flush.

Note to users who are more familiar with react-testing-library: This API does not expose cleanup because it doesn't interact with the DOM. There's nothing to clean up.

Made with ❤️ at Callstack

React Native Testing Library is an open source project and will always remain free to use. If you think it's cool, please star it 🌟. Callstack is a group of React and React Native geeks, contact us at hello@callstack.com if you need any help with these or just want to say hi!


Supported and used by Rally Health.

You can’t perform that action at this time.