Integrating React Native App with Jest

#reactnative #javascript #codenewbie #testing

Jest is a Javascript Testing Framework and it works with projects in Typescript, React, React Native, Vue, and more.
In this article, I'll cover how to install and configure jest in react native project.

Installation

For react-native projects created with init commands, it installs jest by default. But if your project doesn't have jest installed, then you can do it with this npm command.



npm install - save-dev jest

also, check the react-native preset in added in your package.json file



{
 "scripts": {
 "test": "jest"
 },
 "jest": {
 "preset": "react-native"
 }
}

Configuration

I used transformIgnorePatterns right below the preset of jest in the package.json file.
transformIgnorePatterns option can be used to specify which files shall be transformed by Babel. Many react-native npm modules unfortunately don't pre-compile their source code before publishing.
I have react-navigation package installed in my app so I added this regex value in transformIgnorePatterns.



"transformIgnorePatterns": [
 "node_modules/(?!(jest-)?@?react-native|@react-native-community|@react-navigation/(.*))"
]

If you have npm dependencies that have to be transformed you can customize this configuration option by including modules other than react-native by grouping them and separating them with the | operator.

Sample function and its test

Here I created a sample function the same as they defined it in the official docs of Jest.
I added the sum.js file and. wrote a function to simply add 2 variables and return the result.



function sum(a, b) {
 return a + b;
}
module.exports = sum;

and wrote the sample test function sum.test.js like this



const sum = require('../src/components/atoms/sum');

jest.useFakeTimers();

test('adds 1 + 2 to equal 3', () => {

 expect(sum(1, 2)).toBe(3);

});

Run test

Now to run the test, I wrote the npm run test command in the root folder of my project and get a result like this

In the end, I just want to mention that renderer.create in the App-test.js file should always have your <App/> component as an argument. And this <App/> component must be the one which is enclosed in the <NavigationContainer> tag.
That's all, Thanks for reading, and happy coding!