Setup Jest in React Native

Jest unit testing tool

Which dependencies are needed?

By default, if you run the below command in your project directory

npm test 

C:\Users\Project>npm test

> Project@0.0.1 test C:\Users\Project
> jest
‘jest’ is not recognized as an internal or external command,
operable program or batch file.
npm ERR! Test failed. See above for more details

What happened? looks like an error! Yes, you are right. 😨

Okay, No worries. It says Jest is not installed so we are going to install a package name called Jest which is a development dependency.

Getting Started · Jest

Now go to the project directory again and run this command

npm install — save-dev jest

As from React native version 0.38, the project will have a Jest setup included by default when you create the react-native project.

Below is the configuration that will be added to your package.json file automatically.

Package.json

"scripts": { 
  "test": "jest"
},
"devDependencies":{
 "@types/jest": "^25.2.3",
 "babel-jest": "^25.1.0",
 "jest": "^25.5.4",
 "react-test-renderer": "16.13.1",
}, 
"jest": {
 "preset": "react-native" 
}

Have you observed in your project directory that the __tests__ folder is autogenerated when you created the react-native project? That is a key point. Remember that tests are always run from the __tests__ folder and App-test.tsx file auto-generates in this folder.
Under App-test.tsx,

import ‘react-native’;
import React from ‘react’;
import App from ‘../App’;
// Note: test renderer must be required after react-native.
import renderer from ‘react-test-renderer’;
it(‘renders correctly’, () => {
     renderer.create(<App />);
});

Here, read the below line of the test-renderer package.

import renderer from 'react-test-renderer';
react-test-renderer package provides a React renderer that can be used to render React components to pure JavaScript objects, without depending on the DOM or a native mobile environment.

Essentially, this package helps to write snapshot testing.

‘it’ is a keyword to write test-cases. You can use either ‘it’ or ‘test’ to write test-cases. You can use the below test-case which is perfectly fine,

test(‘ renders correcttly ’, () => {
 renderer.create(<App/>);
}

So, What does this test case do internally?

It creates a copy of the JSON tree to a file. Then it checks in your tests that it matches with a saved copy of the JSON tree.

Now run the test in the project directory using the below command:

C:\Project > npm test

and if you want to run jest as a command then the slight difference

C:\Project\node_modules\.bin> jest

It will run the test successfully and will produce the below result.

C:\Project>npm test
> Project@0.0.1 test C:\Project
> jest
RUNS __tests__/App-test.tsx
SUCCESS  __tests__/App-test.tsx
  ● Test suite successfully to run
Test Suites: 1 success, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        28.211s
Ran all test suites.
Test success. 

That’s it. This is the end of setting up Jest and running the default test case in the project.

In the next blog, I will come up with more test cases and what matchers are needed for different scenarios.

Thank you so much for being with me to the end. Please clap, follow and if you have any doubts or errors, please post them in the comments. I would like to answer each. Let’s start your journey along with me 🌱👩‍🏫👩‍💻👋, see you soon.