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