React Native Testing Library with Jest Part 1: Setting Up

Attention: The following article was published over 4 years ago, and the information provided may be aged or outdated. Please keep that in mind as you read the post.

Unit testing allows developers to test code that they write. One of the main goals of unit testing is to catch bugs earlier by running the test(s) locally or through a process. For developers who may not have worked on the code, a unit test can also give them an idea of what the code should be doing when it executes.

In this series of 8 articles, we will go over setting up and testing React Native with Jest and Testing Library. We’ll learn how to test text, hidden elements, buttons, styles, and functionality.

Seriers Outline:

Part I: Setting Up – Current Article
Part II: Writing the First Test
Part III: Testing for an Element That Isn’t Present
Part IV: Button Testing
Part V: Testing Styles of a Component
Part VI: Functional Testing
Part VII: Further Helpful Information

In this post, Part 1 of the series, I’ll give a brief introduction to Jest, Testing Library, and React Native. Then, we’ll walk through how to set each of them up. This will prepare us for Part 2, creating our first test.

What is Jest?

Jest is a JavaScript testing library created by the same company behind React: Facebook. But while Jest was created by the same developers who created React, it is not limited to only React—it can also be used with other frameworks like Node, Angular, Vue.js, and Babel.

Highlights:

Zero configuration: No need to set up a config file. Just install, and start writing tests!
Snapshots: Ensure the UI (User Interface) doesn’t change unexpectedly.
Well-written documentation: All you need to know about Jest is maintained on one site. No need to waste time finding answers on other sites!

What is Testing Library?

Testing Library is a tool used for testing the UI of an application.

Highlights:

Packages for React, React Native, and other libraries
Provides easy to use tools to test React Native, which does not have a browser environment to test in
Has other useful tools for testing various aspects of the UI

What is React Native?

React Native allows you to create native iOS and Android applications using React. From one code base, you can deploy native apps to the Apple Store and/or Google Play.

Setting It All Up

Setting Up React Native

*If you have already set up React Native, skip this step.*

Go to React Native Environment Setup.
Choose either setting up via Expo CLI Quickstart or React Native CLI Quickstart.
Start the app!
If you haven’t encountered errors, feel free to stop the app.

Setting Up Jest and Testing Library

*If you set up using React Native CLI, skip down to Install Testing Library.*

If you set up using Expo CLI, follow these initial steps:

1. First, open up Terminal or command prompt.

2. Then, install jest-expo using yarn or npm.

For Yarn:

yarn add --dev jest-expo

For NPM:

npm install --save-dev jest-expo

3. After jest-expo is installed, open up package.json. Update package.json to include:

"scripts": {
  ...
  "test": "jest" 
},
...
"jest": {
  "preset": "jest-expo"
}

4. Your package.json should look like this:

React Native Testing Library and JEst

Install Testing Library

Install @testing-library/react-native and @testing-library/jest-native using yarn or npm.

For Yarn:

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

For NPM:

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

Add `jest.config.js`

1. In the root directory of the project, add a new file and name it jest.config.js.

2. Within jest.config.js, add this code:

module.exports = {
  preset: 'react-native',
  setupFilesAfterEnv: ['@testing-library/jest-native/extend-expect'],
};

3. Before continuing, there are a few things we should define.

present: A preset that is used as a base for Jest’s configuration. A preset should point to an npm module that has a jest-preset.json or jest-preset.js file at the root.

Cited from: https://jestjs.io/docs/en/configuration#preset-string

setUpFilesAfterEnv: A list of paths to modules that run some code to configure or set up the testing framework before each test file in the suite is executed.

Cited from: https://jestjs.io/docs/en/configuration#setupfilesafterenv-array

Summary

This post set us up with an overview of three key pieces of our series puzzle: Jest, Testing Library, and React Native. We discussed how to set each up which will bring us to Part II, where we will write our first test. Stay tuned!

subscribing