TDD with React Native using Jest and Enzyme using latest versions

By the time I am writing this post, after a lots of search I did not find a unit testing document which will guide me step by step. This article is for my own future reference too. So here are the steps I followed :

Start a new react-native project , using command :

react-native init ReactNativeTDDStarterKit

This command will create a project for you. Now go to the application path

cd  ReactNativeTDDStarterKit

Use command react-native run-android , to check whether project is running fine



After build is successful you will see build success message.



Initially package.json will look like this :

{
   "name": "ReactNativeTDDStarterKit",
   "version": "0.0.1",
   "private": true,
   "scripts": {
   "start": "node node_modules/react-native/local-cli/cli.js start",
   "test": "jest"
},

"dependencies": {
   "react": "16.8.3",
   "react-native": "0.59.5"
},
"devDependencies": {
"@babel/core": "7.4.4",
"@babel/runtime": "7.4.4",
"babel-jest": "24.8.0",
"jest": "24.8.0",
"metro-react-native-babel-preset": "0.54.0",
"react-test-renderer": "16.8.3"

},

"jest": {
     "preset": "react-native"
 }
}

Now lets run a test with already created test file we have in __tests__ directory.



Awesome, it runs successfully. Let's setup enzyme and other dependencies.

Go to package.json and add some dev dependencies, for me it is

"devDependencies": {
    "@babel/core": "7.4.4",
    "@babel/runtime": "7.4.4",
    "babel-jest": "24.8.0",
    "babel-preset-flow": "^6.23.0",
    "babel-preset-react-native": "4.0.0",
    "enzyme": "^3.3.0",
    "enzyme-adapter-react-16": "^1.1.1",
    "enzyme-to-json": "^3.3.1",
    "jest": "24.8.0",
    "metro-react-native-babel-preset": "0.54.0",
    "react-dom": "^16.8.6",
    "react-test-renderer": "16.8.3"
}

Add these dependencies,now you have to create jest setup file

I created this in jest/setup.js path,you may choose whatever you want, but sure you are putting same path in jest config within package.json

In setup.js , just paste below code :

import { configure } from 'enzyme'import Adapter from 'enzyme-adapter-react-16'
configure({ adapter: new Adapter() })

Now add jest config within package.json :

"jest": {
    "preset": "react-native",
    "snapshotSerializers": [
      "enzyme-to-json/serializer"
    ],
    "setupFiles": [
      "<rootDir>/jest/setup.js"
    ]
 }

Now just run : rm -rf node_modules/ ,which will actually remove your node_modules folder.

And again run :  npm install

Well you are all set up, let's go to __tests__ folder now. Remove everything with this folder. And let's start writing our first unit test on App component.

Create a file App.test.js , and paste the code below

import {shallow} from 'enzyme'import App from '../App';
import React from 'react'describe('test login module',()=>{
    const appWrapper = shallow(<App/>);
    it('renders app module correctly',()=>{
        expect(appWrapper).toMatchSnapshot();
    });
});

Ok, we are all set up, now in terminal run this command :

npm run test -- --watchAll




And it works...Awesome. Let's run a coverage test now :

npm run test -- --coverage, here is the result

You may also like 

Testing redux store connected React Components using Jest and Enzyme | TDD | REACT | REACT NATIVE

React Fixed Table Header code without external library

Uploading file into azure blob storage using Azure Keyvault credentials with NodeJS and React

:) Thanks for your time