e2e testing of react native app (Android) using detox — a step by step guide

6 min readOct 6, 2019

I have been working as react native developer for past 1 year. In our team we have a dedicated QA who is responsible for feature testing as well as sanity testing before any release. This will work when your team is small and you have a less complicated app, but once you hit a scale you need to find some way to make those testings automated. Maybe you want to have smoke testing of your app daily at certain time using CI/CD pipeline or you want to have a sanity testing against each Pull Request merged on your repository. This is where end-to-end testing comes into picture. It’s like testing your app on emulator/real device similar to how a real world user would do. If you are aware about selenium in web, you know what I am talking about.

In this article, I’ll show you step by step process on how to setup detox in your react native app for e2e testing. Scope of this article is limited to Android only but a similar steps can be performed on ios as well. Note that as of now detox is not yet supported in native Android but it’s there for native ios as well as react native apps (Android + ios). You can check the official examples here.

Setting up Detox in Android

For the demo purpose, I have already created a sample react native Android app using react-native init and performed all steps for setting up detox. You can check complete source code at https://github.com/varunon9/rn-e2e-testing-detox

Step 1: Installing detox cli and package

Install the detox command line tool globally in your machine
npm install -g detox-cli
Next go to your react-native app repository and install detox package
yarn add detox -D

Step 2: Making changes to android/build.gradle file

Add following configuration inside allprojects.repositories

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

2. Change minSdkVersion to 18 and add kotlinVersion = "1.3.41" in ext block

ext {
    buildToolsVersion = "28.0.3"
    minSdkVersion = 18
    compileSdkVersion = 28
    targetSdkVersion = 28
    kotlinVersion = "1.3.41"
}

3. Add the Kotlin Gradle-plugin to your classpath

dependencies {
    classpath("com.android.tools.build:gradle:3.4.2")
    classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlinVersion"

    // NOTE: Do not place your application dependencies here;
    // they belong in the individual module build.gradle files
}

Step 3: Making changes to app/build.gradle file

Add the following two lines in android.defaultConfig block

defaultConfig {
  testBuildType System.getProperty('testBuildType', 'debug')
  testInstrumentationRunner 'androidx.test.runner.AndroidJUnitRunner'
}

2. Add the following line in android.buildTypes.release block

// Detox-specific additions to pro-guard
proguardFile "${rootProject.projectDir}/../node_modules/detox/android/detox/proguard-rules-app.pro"

3. Add the following lines in 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

Add the file android/app/src/androidTest/java/com/[your.package]/DetoxTest.java. Don’t forget to change the package name to your project’s.

Refer DetoxTest.java for content.

Step 5: detox configuration in package.json

Hit detox init -r jest to use jest as test-runner. Its output will be something like-

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 ./src/e2e folder.

2. Add the following configuration inside package.json-

"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_API_23"
      },
      "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_API_23"
      }
    },
    "test-runner": "jest"
  }

3. Note that in above configuration, I am using "name": "Nexus_4_API_23". This is the name of my emulator device. You can find yours using-

// ANDROID_HOME = Android Sdk directory (/Android/Sdk)
$ANDROID_HOME/emulator/emulator -list-avds

Step 6: Editing the test spec file

Edit ./e2e/firstTest.spec.js file to have your app specific testing instructions. For my demo app, it would be-

describe('Login flow test', () => {
  beforeEach(async () => {
    //await device.reloadReactNative();
  });

  it('should have login screen', async () => {
    await expect(element(by.id('loginView'))).toBeVisible();
  });

  it('should fill login form', async () => {
    await element(by.id('usernameInput')).typeText('varunk');
    await element(by.id('passwordInput')).typeText('test123\n');
    await element(by.id('loginButton')).tap();
  });

  it('should show dashboard screen', async () => {
    await expect(element(by.id('dashboardView'))).toBeVisible();
    await expect(element(by.id('loginView'))).toNotExist();
  });
});

Note that in my demo app, I am using testID=loginView in login form to identify login component and likewise. You can check all types of matchers here. Above test case is written for this file.

Step 7: Build the debug apk and run test on it

Build a debug apk using detox build -c android.emu.debug
Run e2e testing detox test -c android.emu.debug

If everything goes well, you will have your first e2e testing on your app. You can also check this git diff https://github.com/varunon9/rn-e2e-testing-detox/commit/8536e816cd256e75794a8327a94400f462326f03 for better understanding of changes to be made.

Bonus: Writing test files as JSON config

In above steps, we saw that we are going to have test cases in Javascript file something like this-

describe('Login flow test', () => {
  it('should fill login form', async () => {
    await element(by.id('usernameInput')).typeText('varunk');
    await element(by.id('passwordInput')).typeText('test123\n');
    await element(by.id('loginButton')).tap();
  });
});

Now imagine that we have to write 10–20 test files covering all our app flows. There will be too much boilerplate code. Additionally it can be a bit more technical for your QA person if he/she has to write those test cases. In most of the test cases, all we need is a way of identifying elements and performing some actions or assertions. A simple idea is to have a JSON config file for test cases and a parser for the same. Above Javascript test file can be converted into following JSON file-

{
  "describe": "Login flow test", 
  "flow": [
    {
      "it": "should fill login form",
      "steps": [
        {
          "type": "action",
          "element": {
            "by": "id",
            "value": "usernameInput"
          },
          "effect": {
            "key": "typeText",
            "value": "varunk"
          }
        },
        {
          "type": "action",
          "element": {
            "by": "id",
            "value": "passwordInput"
          },
          "effect": {
            "key": "typeText",
            "value": "test123\n"
          }
        },
        {
          "type": "action",
          "element": {
            "by": "id",
            "value": "loginButton"
          },
          "effect": {
            "key": "tap",
            "value": ""
          }
        }
      ]
    }
  ]
}

Required parser would be-

const parseSpecJson = (specJson) => {
  describe(specJson.describe, () => {
    for (let i = 0; i < specJson.flow.length; i++) {
      const flow = specJson.flow[i];
      it(flow.it, async () => {
        for (let j = 0; j < flow.steps.length; j++) {
          const step = flow.steps[j];
          const targetElement = element(by[step.element.by](step.element.value));
          if (step.type === 'assertion') {
            await expect(targetElement)[step.effect.key](step.effect.value);
          } else {
            await targetElement[step.effect.key](step.effect.value);
          }
        }
      });
    }
  });
};

Now we can use both Javascript test file as well as JSON config file with parser, e.g. content of ./e2e/firstTest.spec.js can be-

const parseSpecJson = (specJson) => {
  // parser logic goes here
}

parseSpecJson(require('./tests/Login.json'));
require('./tests/Signup.js');

Conclusion

Before analyzing Detox for end-to-end testing, I had also looked into Firebase test lab possibilities by uploading Robo script json file. Robo script can be created using Android Studio. All you have to do is browse through your app, covering all flows and then those steps will be recorded by Android Studio and dumped into a JSON file. This file then can be uploaded to Firebase Test Lab Console for testing on multiple devices.

While Firebase Test Lab is great for native Android apps, it did not work as expected for react native Android apps. Elements were not getting identified and there was some random behaviour. On the other hand, Detox is great for react native apps but it has no support for native Android apps. It would be really interesting to see what happens in nearby future.

Resources

Detox official repository: https://github.com/wix/Detox
Element matchers: https://github.com/wix/Detox/blob/master/docs/APIRef.Matchers.md
Actions on Element: https://github.com/wix/Detox/blob/master/docs/APIRef.ActionsOnElement.md
Assertions: https://github.com/wix/Detox/blob/master/docs/APIRef.Expect.md
Demo app: https://github.com/varunon9/rn-e2e-testing-detox