Navigate back to the homepage

React native detox example

Infinitbility
React Native, Detox
January 6th, 2022 · 2 min read
React native detox example

Hello Friends 👋,

Welcome To Infinitbility! ❤️

React Native detox tutorial

Today, we will learn how to do end-to-end testing in react native and for end to end testing we wil use Detox devlop by Wix.

This tutorial is part of React native detox series and in this first part, we will implement detox in react native application and write some test case examples.

Detox provides the option to test the application end to end ( E2E ).

End-to-end testing is a technique used to test whether the flow of an application right from start to finish is behaving as expected. The purpose of performing end-to-end testing is to identify system dependencies and to ensure that data integrity is maintained between various system components and systems.

Let start with setup a new application.

React native application setup

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

1npx react-native init ReactNativeDetoxExample

Clean your gradlew and check application running or not properly.

1cd ReactNativeDetoxExample & cd android & gradlew clean

Run the application

1cd .. & npx react-native run-android
React native application running output
React native application running output

Detox setup in react native

On our first step of detox set up, we install required packages to run detox.

Step 1: Install Detox

Install Detox CLI globally on your pc to run detox commands.

1npm install -g detox-cli

Install detox package to your react native.

1npm install detox --save-dev

Step 2: Gradle Files changes

Go to your project/android/app/build.gradle file.

  1. Add following code lines to your android.defaultConfig

    1defaultConfig {
    2testBuildType System.getProperty('testBuildType', 'debug')
    3testInstrumentationRunner 'androidx.test.runner.AndroidJUnitRunner'
    4}
  2. Add following to android.buildTypes.release

    1proguardFile "${rootProject.projectDir}/../node_modules/detox/android/detox/proguard-rules-app.pro"
  3. Add the following code lines to your dependencies section.

    1androidTestImplementation('com.wix:detox:+') { transitive = true }
    2androidTestImplementation 'junit:junit:4.12'
    3implementation "androidx.annotation:annotation:1.1.0"
  4. Go to your project/android/build.gradle and add the following code in allprojects -> repositories.

    1maven {
    2 // All of Detox' artifacts are provided via the npm module
    3 url "$rootDir/../node_modules/detox/Detox-android"
    4}

Step 3: Native changes for detox

Go to your project/android/app/src.

Create Folder androidTest/java/com/applicationname.

After create all above folder create DetoxTest.java file in androidTest/java/com/applicationname.

file-path looks like below example path.

project/android/app/src/androidTest/java/com/applicationname/DetoxTest.java

Add the following code in your DetoxTest.java file.

DetoxTest.java

1package com.reactnativedetoxexample;
2
3import com.wix.detox.Detox;
4
5import org.junit.Rule;
6import org.junit.Test;
7import org.junit.runner.RunWith;
8
9import androidx.test.ext.junit.runners.AndroidJUnit4;
10import androidx.test.filters.LargeTest;
11import androidx.test.rule.ActivityTestRule;
12
13@RunWith(AndroidJUnit4.class)
14@LargeTest
15public class DetoxTest {
16
17 @Rule
18 public ActivityTestRule<MainActivity> mActivityRule = new ActivityTestRule<>(MainActivity.class, false, false);
19
20 @Test
21 public void runDetoxTests() {
22 Detox.runTests(mActivityRule);
23 }
24}

Don’t forget to replace package com.reactnativedetoxexample with your application name in DetoxTest.java.

Step 4: Jest Test runner setup for detox.

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

    1detox init -r jest

    The output will look likes this if its runs perfectly.

    React native jest output
    React native jest output

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

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

    1"detox": {
    2 "configurations": {
    3 "android.emu.debug": {
    4 "binaryPath": "android/app/build/outputs/apk/debug/app-debug.apk",
    5 "build": "cd android && ./gradlew assembleDebug assembleAndroidTest -DtestBuildType=debug && cd ..",
    6 "type": "android.emulator",
    7 "name": "Pixel_4_API_30"
    8 },
    9 "android.emu.release": {
    10 "binaryPath": "android/app/build/outputs/apk/release/app-release.apk",
    11 "build": "cd android && ./gradlew assembleRelease assembleAndroidTest -DtestBuildType=release && cd ..",
    12 "type": "android.emulator",
    13 "name": "Pixel_4_API_30"
    14 },
    15 "android.wallet.device": {
    16 "binaryPath": "android/app/build/outputs/apk/debug/app-debug.apk",
    17 "build": "cd android && ./gradlew assembleDebug assembleAndroidTest -DtestBuildType=debug && cd ..",
    18 "type": "android.attached",
    19 "name": "NOKIA2A"
    20 }
    21 },
    22 "test-runner": "jest"
    23}

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

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

    • To know your real device name connect your device and open CMD and enter the following command it will show the connected device name.
    1adb devices
    • To know your emulator device name go to your AVD folder below mine PC path example C:\Users\user\.android\avd.

    Delete your ‘.detoxrc.json’ file because already set up on the package.json file.

Now your DETOX setup is done let create UI and test cases.

Write Detox test cases

I have created a sample login page and now going to write test cases for it.

firstTest.e2e.js

1describe('Example', () => {
2 beforeAll(async () => {
3 await device.launchApp();
4 });
5 it('should have login screen', async () => {
6 await expect(element(by.id('loginView'))).toBeVisible();
7 });
8 it('should fill login form', async () => {
9 await element(by.id('emailInput')).typeText('[email protected]');
10 await element(by.id('passwordInput')).typeText('1234');
11 await element(by.id('loginButton')).tap();
12 });
13});

Run Detox testcases

To run detox test cases we have to first build APK.

Run the following command in your project/android folder to build debug APK.

1gradlew assembleDebug assembleAndroidTest -DtestBuildType=debug

Now, after successfully building APK.

Go to your project directory and start your metro bundler using npm start command.

Run following command test APK in emulator.

1detox test -c android.emu.debug

Run following command test APK in real devices.

1detox test --configuration=android.wallet.device
React native detox output
React native detox output

Thanks for reading …

Follow me on Twitter

Join our email list and get notified about new content

No worries, I respect your privacy and I will never abuse your email.

Every week, on Tuesday, you will receive a list of free tutorials I made during the week (I write one every day) and news on other training products I create.

Looking For React Native Tutorial?

we are trying to create the best Tutorial for react native developers.

When you want a daily updates about React Native Tutorial or infinitbility update subscribe to our newsletter.

Read React Native Tutorial

Request New Tutorial or Article on mail [email protected]

Guide book

Guidebook: The Javascript Monorepo

Tutorials

Categories

More articles from Infinitbility

React hoverable menu example using CSS

React hoverable menu example using CSS

Show sub menus on hover in react using css.

January 5th, 2022 · 1 min read
How to enable or disable scroll in flatlist react native?

How to enable or disable scroll in flatlist react native?

React Native, Enable or Disable flatlist scroll example.

January 4th, 2022 · 1 min read
© 2020–2022 Infinitbility
About
Link to $https://medium.com/infinitbilityLink to $https://www.facebook.com/InfinitbilityLink to $https://github.com/infinitbilityLink to $https://twitter.com/infinitbilityLink to $https://www.buymeacoffee.com/infinitbilityLink to $mailto:[email protected]