How to use Detox-End-to-End testing in your react native application
By: Dinuka Fernando
Tags: Automation Testing, Detox, React Native, JavaScript

In every software development team there is a dedicated QA who is responsible for testing features before releasing it to production.This is easy for QA if the app is less complicated.What will happen if the app scale is increased?You need to find a way to make those tests automated.

For automate react native application you can use Detox End-to-End testing.

What is Detox testing?

Detox is a JavaScript mobile testing framework.

Its test execution start when the app is launched.

This makes application test fast by executing written tests.

So lets have a look how we can use Detox :)

Step by Step Guide to E2E Detox

For the demo purposes I have already created sample react native application.

https://github.com/Dilshanf3/Detox-React-Native-Example.git

Detox is full support for the react native versions <=0.56 and Visibility edge-case for the versions >=0.57 <=0.61

To create a new react native application you can use following command.

react-native init yourProjectName

So lets go with step by steps for installing and setting up detox.

Step 1: Installing detox cli and package

You need to install detox command line tool globally in to your machine.

npm install -g detox-cli

2. As a next step you need to switch to your react-native project and install detox package

npm install detox --save-dev

Step 2: Do following changes to your android/build.gradle file

Add following code lines to your android.defaultConfig .

defaultConfig {

testBuildType System.getProperty('testBuildType', 'debug')

testInstrumentationRunner 'androidx.test.runner.AndroidJUnitRunner'

}

2. Add following to android.buildTypes.release

// Detox-specific additions to pro-guard

proguardFile "${rootProject.projectDir}/../node_modules/detox/android/detox/proguard-rules-app.pro"

3. Add the following code lines in to your dependencies section.

androidTestImplementation('com.wix:detox:+') { transitive = true }

androidTestImplementation 'junit:junit:4.12'

implementation "androidx.annotation:annotation:1.1.0"

Step 4: Creating DetoxTest.java

You have to create a folder called androidTest.

2. Inside that to have to create a folder called java

3. Inside that you have to create a folder called com

4. Then inside that folder you have to create another folder with your package

5. Then you have to create a file DetoxTest.java.

android/app/src/androidTest/java/com/[yourpackage]/DetoxTest.java

Step 5: detox configuration in package.json

You have to use jest as a test runner for that you have to run following command.

detox init -r jest

Output will look likes this if its runs perfectly.

detox[27185] INFO:[init.js] Created a file at path:e2e/config.json

detox[27185] INFO:[init.js] Created a file at path: e2e/init.js

detox[27185] INFO:[init.js] Created a file at path: e2e/firstTest.spec.js

detox[27185] INFO:[init.js] Patching package.json at path:

detox[27185] INFO:[init.js] json["detox"]["test-runner"] = "jest";

Above command will create init and configuration files in your ./src/e2e folder.

2. Then you have to add following configurations inside your package.json file.

"detox": {

"configurations": { "android.emu.debug": { "binaryPath": "android/app/build/outputs/apk/debug/app-debug.apk", "build": "cd android && ./gradlew assembleDebug assembleAndroidTest -DtestBuildType=debug && cd ..", "type": "android.emulator", "name": "Nexus_4" }, "android.emu.release": { "binaryPath": "android/app/build/outputs/apk/release/app-release.apk", "build": "cd android && ./gradlew assembleRelease assembleAndroidTest -DtestBuildType=release && cd ..", "type": "android.emulator", "name": "Nexus_4" }, "android.wallet.device": { "binaryPath": "android/app/build/outputs/apk/debug/app-debug.apk", "build": "cd android && ./gradlew assembleDebug assembleAndroidTest -DtestBuildType=debug && cd ..", "type": "android.attached", "name": "HXT7N189110016862" } }, "test-runner": "jest" }

In here I have added android wallet device so you can use your own mobile devices to test your application .

I have used “name”: “HXT7N189110016862” and this is my example device Id of my mobile device.

Step 6: Update your test spec file

you have to edit your firstTest.spec.js file to follow instructions for testing.

In my Demo application It is like this.

you can use my Detox example application for your testing purposes.

https://github.com/Dilshanf3/Detox-React-Native-Example.git

After everything is perfect you can start your testing for that you have to follow some instructions.

Step 7: Build your debug apk and run it

First change your location to android (cd android) and the run following code.

./gradlew assembleDebug assembleAndroidTest -DtestBuildType=debug

2. Change your location back to your repository by using

cd ..

3.Then you have to run following command and make sure you are running your metro bundle

detox test --configuration=android.wallet.device

or

detox test -c android.emu.debug

Then you you can see your test suite is running and gives you outputs according to your instructions.

example:

Hope this article is helpful for you .And also you can follow my Demo application for you learning purposes.

Thank you for reading .. Happy coding.. :)