Unit Testing with Detox in React-Native

-

Unit Testing

In the past year, react-native become a very popular language for cross-platform application development. Unit testing means writing test cases to ensure that the individual component will work as expected. The Jest is the default testing library supported by the react-native. There are a couple of more libraries available for testing are Detox, Appium, and react-native-testing-library.

Why unit testing is required?

When we start thinking about unit testing one question in our mind comes is, Why we need to write the test cases? 

So, there are some key benefits to write the unit testing for the application.

  • The unit testing helps us to ensure that the individual component is working as expected.
  • In the process of development, we have to integrate the new modules to the application and unit testing is helpful to ensure that the code is still working as expected after updating the new changes.
  • This helps us to determine the small bugs in the code so it will not become a big failure.
  • Help the new teammates to understand the expected results and behavior of the component.
  • Reduces the manual QA efforts.     

Detox 

Detox is the testing library with the key advantage of running the test cases on a real device/simulator. The detox interacts with the application just like the real user.

Key benefits to choose the Detox are :

  • Detox uses the grey box testing method to overcome the issues of flakiness.
  • It uses the E2E software technique for testing.
  • Detox does not rely on any web drivers.
  • Detox synchronizes with your apps to support the network request, heavy logic, and animation.
  • Detox is built from the ground up for native to support the react-native application supports.  

Environment Setup for Detox:

Install Node

Detox requires node version 10.0.0 or above. If you have an older version of the node you can update it or install the node on your machine.

Install Detox Command Line Tool

npm install -g detox-cli 

Install Detox To Project

npm install detox --save-dev
OR
yarn add detox --dev

Supported Libraries for Apple simulators

brew tap wix/brew
brew install applesimutils

Setup Test Runner

Detox supports the most popular Jest and Mocha libraries. 

Jest is the recommended test runner for Detox and for the react-native application. Please check the packgage.json file and ensure that the jest is available for the project.

"scripts": { 
"test": "jest"
}

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

Installing Jest

yarn add jest jest-circus --dev
OR
npm install jest jest-circus --save-dev

Initialize the detox for the project: 

detox init

If everything works fine you will see the below output in the terminal.

detox-success





Now the e2e directory is auto generated within the project with the sample code. The e2e folder have config , environment and firstTest.e2e.js file.

If you want to learn more about the .detoxrc.json or the configuration file the please visit this link.


Update the .detoxrc.json file

Open the .detoxrc.json file and specify the build path and build script for the device. 

For Android

"apps": {
    "android": {
      "type": "android.apk",
      "binaryPath": "android/app/build/outputs/apk/debug/app-debug.apk",
      "build": "cd android && gradlew assembleDebug"
    }
}

For iOS

"apps": {
    "ios": {
      "type": "ios.app",
      "binaryPath": "ios/build/Build/Products/Debug-iphonesimulator/example.app",
      "build": "xcodebuild -project ios/example.xcodeproj -scheme example -configuration Debug -sdk iphonesimulator -derivedDataPath ios/build" 
    }
  } 

Build and Run the test case 

Build

detox build --configuration android

To build the apk file. You can run any configuration based on your requirement. In above example I am using the android configuration defined in the .detoxrc file.

Run

detox test --configuration android

To run the test case.

Configuration for Device 

You can also update the .detoxrc as per you requirement, For an example if you want to run the script in device then you have to add a new configuration to it.

"configurations": {
    "android": {
      "device": "device_name",
      "app": "android"
    }
  }

"devices": {
    "device_name": {
      "type": "android.attached",
      "device": {
        "adbName": "0d40239bd216"
      }
    }
  },

That's it!!  

I hope you enjoyed this blog and stay connected for a more new thing. I will learn and keep posting the amazing things here. Thanks!

Comments

Post a Comment