{"componentChunkName":"component---src-templates-post-js","path":"/blog/setup-detox-tests-android","result":{"data":{"markdownRemark":{"html":"

Detox is an end to end testing library for your react native app that enables you to emulate user behavior and test how your app reacts to it, automatically.

\n

In this blog post, I will be going over setting up Detox from scratch in a React Native project for Android. In the future, I am planning to write another post where I will go through the iOS setup.

\n

Setting up the Project

\n

The first step is to set upΒ our React Native project. I am assuming you already have your development environment setup for react native and android. If not, then you can go through the official documentation to set up your environment.

\n

We will be using react-native cli for this. The following steps should bootstrap a react-native app.

\n
$ npx react-native init ReactNativeDetox\n$ cd ReactNativeDetox
\n

First, you should have your android emulator running, and then you can run the following to start the ReactNativeDetox app in your emulator.

\n
$ yarn android\n$ yarn start
\n

yarn android will take a while to complete and it should ask you to run the metro bundler but in case it doesn't you can do that manually by running yarn start. After running those command the app should look like the following screenshot.

\n
\n  \n \n \"start\n \n 
Startup screen of ReactNativeDetox App
\n
\n

Adding Detox

\n

Detox needs to be set upΒ with a test runner like Jest or Mocha. It supports both but I am going to be using Jest for this tutorial since its recommended by Detox themselves.

\n

First, we need to install detox locally from npm.

\n
$ yarn add detox
\n

Now we need to setup Detox with Jest. Thankfully, we don't have to do this on our own. The Detox cli can do this for us.

\n
$ npx detox init -r jest\n\ndetox[43072] INFO:  [init.js] Created a file at path: e2e/config.json\ndetox[43072] INFO:  [init.js] Created a file at path: e2e/environment.js\ndetox[43072] INFO:  [init.js] Created a file at path: e2e/firstTest.e2e.js\ndetox[43072] INFO:  [init.js] Created a file at path: e2e/config.json
\n

After running the above command, Detox will create four files for us. For the scope of this tutorial, we don't need to be concerned with e2e/config.json and e2e/environment.js. But if you are interested you can read about them Β here.

\n

You will also need to install jest and jest-circus as dev dependencies.

\n
$ yarn add jest jest-circus
\n

Editing .detoxrc.json

\n

First, you need to find out the name of the emulator you are running. You can do that by running the following -

\n
$ emulator -list-avds\n\nPixel_2_API_29
\n

As you can see, my emulator name is Pixel_2_API_29.

\n

Now, you will need to replace the configuration object in .detoxrc.json file with the following -

\n
  \"configurations\": {\n    \"android.emu.debug\": {\n      \"binaryPath\": \"android/app/build/outputs/apk/debug/app-debug.apk\",\n      \"build\": \"cd android ; ./gradlew assembleDebug assembleAndroidTest -DtestBuildType=debug ; cd -\",\n      \"type\": \"android.emulator\",\n      \"device\": {\n        \"avdName\": \"YOUR_EMULATOR_NAME\"\n      }\n    },\n    \"android.emu.release\": {\n      \"binaryPath\": \"android/app/build/outputs/apk/release/app-release.apk\",\n      \"build\": \"cd android ; ./gradlew assembleRelease assembleAndroidTest -DtestBuildType=release ; cd -\",\n      \"type\": \"android.emulator\",\n      \"device\": {\n        \"avdName\": \"YOUR_EMULATOR_NAME\"\n      }\n    }\n  }
\n

For me, it would look like the following -

\n
\n  \n \n \"screenshot\n \n 
.detoxrc.json file
\n
\n

We have added the detox configurations for the debug and release builds of our app. We told Detox about the binaryPath of our app and also the emulator which Detox will use to run the tests.

\n

Adding Detox dependency to the Android project

\n
    \n
  1. Open your root buildscript (i.e. android/build.gradle) and register both google() and detox as repository lookup points in all projects:
    2. \n
\n
allprojects {\n    repositories {\n        mavenLocal()\n        maven {\n            // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm\n            url(\"$rootDir/../node_modules/react-native/android\")\n        }\n        maven {\n            // Android JSC is installed from npm\n            url(\"$rootDir/../node_modules/jsc-android/dist\")\n        }\n\n        /* πŸ‘‡ */\n        maven {\n            // All of Detox' artifacts are provided via the npm module\n            url \"$rootDir/../node_modules/detox/Detox-android\"\n        }\n\n        google()\n\n        /* πŸ‘† */\n        jcenter()\n        maven { url 'https://www.jitpack.io' }\n    }\n}
\n

We also need to update our minSdkVersion to 18 as required by detox and add Kotlin. As of now, the latest version of Kotlin is 1.3.70 so, I will use that.

\n

In android/build.gradle file, add the following code -

\n
buildscript {\n    ext {\n        buildToolsVersion = \"28.0.3\"\n        ext.kotlinVersion = \"1.3.70\" /* πŸ‘ˆ */\n        minSdkVersion = 18  /* πŸ‘ˆ */\n        compileSdkVersion = 28\n        targetSdkVersion = 28\n    }\n    repositories {\n        google()\n        jcenter()\n    }\n    \n    dependencies {\n        classpath(\"com.android.tools.build:gradle:3.5.2\")\n        classpath \"org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlinVersion\" /* πŸ‘ˆ */\n\n        // NOTE: Do not place your application dependencies here; they belong\n        // in the individual module build.gradle files\n    }\n}
\n
    \n
  1. We need to add the following dependencies in our app's buildscript. Open up android/app/build.gradle file and update the dependencies section as follows -
    2. \n
\n
dependencies {\n   //...\n   //...\n\n    if (enableHermes) {\n        def hermesPath = \"../../node_modules/hermes-engine/android/\";\n        debugImplementation files(hermesPath + \"hermes-debug.aar\")\n        releaseImplementation files(hermesPath + \"hermes-release.aar\")\n    } else {\n        implementation jscFlavor\n    }\n    androidTestImplementation('com.wix:detox:+') /* πŸ‘ˆ */\n}
\n

We also need to add the following to the defaultConfig subsection in the same file -

\n
    defaultConfig {\n        applicationId \"com.demorntester\"\n        minSdkVersion rootProject.ext.minSdkVersion\n        targetSdkVersion rootProject.ext.targetSdkVersion\n        versionCode 1\n        versionName \"1.0\"\n        testBuildType System.getProperty('testBuildType', 'debug')  /* πŸ‘ˆ */ \n        testInstrumentationRunner 'androidx.test.runner.AndroidJUnitRunner' /* πŸ‘ˆ */\n    }
\n
    \n
  1. We need to create an Android Test class. Add the file android/app/src/androidTest/java/com/reactnativedetox/DetoxTest.java with the following code -
    2. \n
\n
package com.reactnativedetox;\n\nimport com.wix.detox.Detox;\n\nimport org.junit.Rule;\nimport org.junit.Test;\nimport org.junit.runner.RunWith;\n\nimport androidx.test.ext.junit.runners.AndroidJUnit4;\nimport androidx.test.filters.LargeTest;\nimport androidx.test.rule.ActivityTestRule;\n\n@RunWith(AndroidJUnit4.class)\n@LargeTest\npublic class DetoxTest {\n\n    @Rule\n    // Replace 'MainActivity' with the value of android:name entry in \n    // <activity> in AndroidManifest.xml\n    public ActivityTestRule<MainActivity> mActivityRule = new ActivityTestRule<>(MainActivity.class, false, false);\n\n    @Test\n    public void runDetoxTests() {\n        Detox.DetoxIdlePolicyConfig idlePolicyConfig = new Detox.DetoxIdlePolicyConfig();\n        idlePolicyConfig.masterTimeoutSec = 60;\n        idlePolicyConfig.idleResourceTimeoutSec = 30;\n\n        Detox.runTests(mActivityRule, idlePolicyConfig);\n    }\n}
\n

That's all the setup we need to do. We are now ready to write the tests!! πŸš€

\n

Writing our first test

\n

Detox has already written some tests for us in the e2e/firstTest.spec.js file. But the tests will fail as our app starting screen is different and it won't be able to find elements by testID. Instead of updating our tests, for this tutorial we will update the contents of our App.js file according to the tests Detox has written. Copy over the contents from Β here to your App.js.

\n

Now, we are ready to run the tests. There is just one little thing we need to do. We need to add scripts in our package.json file to run the detox tests.

\n

Open up package.json file and add the following to the scripts section -

\n
\"scripts\": {\n  \"android\": \"react-native run-android\",\n  \"ios\": \"react-native run-ios\",\n  \"start\": \"react-native start\",\n  \"test\": \"jest\",\n  \"lint\": \"eslint .\",\n  \"build:android-debug\": \"detox build --configuration android.emu.debug\", /* πŸ‘ˆ */\n  \"test:android-debug\": \"detox test --configuration android.emu.debug\", /* πŸ‘ˆ */\n  \"e2e:android-debug\": \"yarn build:android-debug && yarn test:android-debug\" /* πŸ‘ˆ */\n},
\n

Now, we need to start our react-native packager Β -

\n
$ yarn start
\n

And then in a new terminal run the following script to start running the tests -

\n
$ yarn e2e:android-debug
\n

We are running the detox tests in debug mode. This is will take a while when running for the first time. After completing the tests should start running in your simulator and the output will be displayed in your terminal as following -

\n
\n  \n \n \"detox\n \n 
Output after running the tests.
\n
\n

That's it! Now, you can start writing tests and exlpore detox. You can learn more about detox from their documentation Β here. The source code of this tutorial is available on Β Github.

","timeToRead":7,"frontmatter":{"title":"Setting up Detox Tests in a React Native App","date":"2020-06-24T00:00:00.000Z","tags":["Javascript","React Native"]}}},"pageContext":{"slug":"setup-detox-tests-android"}},"staticQueryHashes":["3649515864","63159454"]}