React Native Automation Testing Using Detox

What is 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.

Issues with Appium

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.

Advantages of Detox

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.

Setting Up Detox

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

$ xcode-select --install
$ brew tap wix/brew
$ brew install applesimutils
$ npm install -g detox-cli

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.

iOS Configuration

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.

{
"testRunner": "jest",
"runnerConfig": "e2e/config.json",
"configurations": {
"ios": {
"type": "ios.simulator",
- "binaryPath": "SPECIFY_PATH_TO_YOUR_APP_BINARY",
+ "binaryPath": "ios/build/Build/Products/Debug-iphonesimulator/AppName.app",
+ "build": "xcodebuild -workspace ios/YourAppName.xcworkspace -scheme AppName -configuration Debug -sdk iphonesimulator -derivedDataPath ios/build",
"device": {
"type": "iPhone 11"
}
}
}

Step 2: Test the build

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

$ detox build -c ios

Android Configuration

Step 1: Update the android/build.gradle file

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

ext {
buildToolsVersion = "29.0.2"
minSdkVersion = 18
compileSdkVersion = 29
targetSdkVersion = 29
kotlinVersion = "1.3.41"
}

Add the following configuration inside allprojects.repositories

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

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

Add the following two lines in android.defaultConfig block

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

Add the following lines in the dependencies section

androidTestImplementation('com.wix:detox:+')

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

<?xml version="1.0" encoding="utf-8"?> 
<network-security-config> 
<domain-config cleartextTrafficPermitted="true"> 
<domain includeSubdomains="true">10.0.2.2</domain> 
<domain includeSubdomains="true">10.0.3.2</domain> 
<domain includeSubdomains="true">localhost</domain> 
</domain-config> 
</network-security-config>

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

<manifest>
<application
...
android:networkSecurityConfig="@xml/network_security_config">
</application>
</manifest>

Step 5: Update .detoxrc.json

"configurations": {
"ios": {
...
},
"android": {
"binaryPath": "android/app/build/outputs/apk/release/app-release.apk",
"build": "cd android && ./gradlew assembleRelease assembleAndroidTest -DtestBuildType=release && cd ..",
"type": "android.emulator",
"name": "Pixel_4_API_29" // Replace with your own emulator name
}
}

Step 6: Test the build

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

$ detox build -c android

Writing Your First Detox Test Case

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:

<Text
style={{
...
}}
testID="Login"
>
Login
</Text>

You can write test cases like this:

describe('Example', () => {
beforeAll(async () => {
await device.launchApp();
});
beforeEach(async () => {
await device.reloadReactNative();
});
it('should login successfully', async () => {
await expect(element(by.id('Login'))).toBeVisible();
await element(by.id('Email')).typeText('saloni@geekyants.com');
await element(by.id('Password')).typeText('goldtree9');
await element(by.id('LoginButton')).tap();
await waitFor(element(by.id('WelcomeText')))
.toBeVisible()
.withTimeout(2000);
await element(by.id('LogoutButton')).tap();
});
});

• 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.

Conclusion

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.