React Native Automation Testing Using Detox

Detox is a JS-based end-to-end automation testing framework developed by Wix. Detox tests your mobile app while it's running on a real device or simulator, interacting with it just like an actual end user.

Appium is a popular mobile test automation framework that is often regarded as industry standard. Appium is based on black box testing, which simulates how an actual end user would interact with the app. In theory, this sounds great, but Appium tests are extremely unreliable. They frequently produce inconsistent results on different devices and are prone to frequent integration failures, resulting in slower tests.

Detox is inherently designed to solve the problem of slowness and flakiness for mobile UI testing. Detox offers the following features:

• Since Detox is based on “Grey Box” testing which means that the tester has some knowledge of the internal workings of the application and this allows the framework to monitor the app from within and synchronize with it. Not only Grey Box testing is more stable than Black Box testing, but it's also much faster.
• Detox does not rely on WebDriver and interacts directly with the native layers of the app
• It synchronizes with the app's activity i.e. it times its actions to run only when your app is idle, meaning it has determined that your app has finished work, such as React Native load, animations, network requests, etc.
• Relatively easy setup process and the tests are also quite simple, readable, and can even be shared between platforms.

To get started with Detox, we’ll have to install the Detox command-line tools and the applesimutils library using the following commands.

Detox includes support for popular testing frameworks like Jest and Mocha. We'll use jest in this case. Detox should be added as a dependency to your react native project, and jest should be used as the test runner.

$ yarn add --dev detox jest-circus

Initialize detox in your app using the following command:

$ detox init -r jest

This will create an e2e folder containing a few config files.

Step 1: Update .detoxrc.json

Detox for iOS does not require any additional setup; just go to the.detoxrc.json file and replace its content with the following: Make sure you replace "AppName” with the name of the app you have created.

Step 2: Test the build

If everything is set up correctly, running the following command should build the app correctly.

$ detox build -c ios

Step 1: Update the android/build.gradle file

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

Add the following configuration inside allprojects.repositories

Step 2: Update android/app/build.gradle file

Add the following two lines in android.defaultConfig block

Add the following lines in the dependencies section

Step 3: Create detox test class

Create a DetoxTest.java file at the following location: android/app/src/androidTest/java/com/reactnativedetox/DetoxTest.java and refer here for the contents of the file. Don’t forget to change the package name of the file to that of your own project.

Step 4: Enable clear-text (unencrypted) traffic for Detox (For Android SDK v28 & above) 

Add the following content in network_security_config.xml,

android/app/src/main/res/xml

In the app's AndroidManifest.xml, add the following -

Step 5: Update .detoxrc.json

Step 6: Test the build

If everything is set up correctly, running the following command should build the app.

$ detox build -c android

You can start writing your test cases in the e2e/firstTest.e2e.js file, which you should rename to something relevant as per your app. For this demo, we’ll test a simple login using email and password.

Add a testID property to the component that you want to find, like this:

You can write test cases like this:

• Build on the specific platform you want to test using the above-mentioned build command.
• Run the tests

Android :

$ detox test -c android

iOS:

$ detox test -c ios

Note: Starting with Xcode 9, Detox runs the iOS simulator in headless mode. If you are running the tests and the simulator does open up, then use Spotlight to pull up the simulator and hit enter, and it will bring all the simulators, detox has opened to the front.

Detox is a great testing framework to speed up the testing process. It is easy to configure, readable, and fast. However, there are a few cons to detox, such as -

• No support for expo
• Web Views are not supported; hence testing auth flows like Google, and Facebook is impossible. However, you can mock the external API to give you a predetermined auth token. Refer here for how to mock an API in detox.

Link to Demo Repo

Detox official docs

Detox Element matchers

Detox Actions