React Native technology is used for cross-platform mobile app development. For testing of React Native applications, there are two UI testing frameworks; Detox and Appium. This article covers the basics about Detox.
Detox is a quick and easy tool for the automated UI testing of React Native apps. Some features of Detox are:
- Detox is a gray-box testing tool that doesn’t use client-server architecture for test execution, so it’s faster than other frameworks.
- Detox monitors the asynchronous operations, which accelerates the testing process.
- It’s easy to connect to cloud testing services and CIs.
- It provides faster results and can be used with any test runner application.
In this article, we will explain basic steps to write a test using Detox.
How to Set-Up Detox for End-to-End Testing of React Native App:
The steps to set-up Detox for React Native apps are quite simple. This article explains iOS specific set-up for testing. Here are the prerequisites:
- macOS with Xcode
- Homebrew
- Node
- React Native CLI
- React Native App
1- Create React Native App:
We will create a React Native app naming “MyDetoxApp” and enable its UI testing using Detox.
Install required dependencies from macOS by using:
$ brew install node $ brew install watchman
Now, we can access ‘npm’ to install React Native and further work. Install React Native and create app by using:
$ npm install -g react-native-cli $ react-native init MyDetoxApp
React Native will generate the boilerplate code to build Android and iOS apps. So, we can run our apps in iOS simulator or Android emulator. Since we are working on iOS, we will use:
$ cd MyDetoxApp
$ react-native run-ios
Assume we have welcome text and a button in our app that is ready for UI testing.
2- Detox Configuration of react native app:
Install the applesimutils library and Detox command-line tools using these commands:
$ brew tap wix/brew $ brew install applesimutils $ npm install -g detox-cli
Now add Detox library to the project using:
npm install detox --save-dev
Run following to configure the app for using Detox UI test framework:
"detox": {
"configurations": {
"ios.sim.debug": {
"binaryPath": "ios/build/Build/Products/Debug-iphonesimulator/ MyDetoxApp.app",
"build": "xcodebuild -project ios/MyDetoxApp.xcodeproj -scheme MyDetoxApp -configuration Debug -sdk iphonesimulator -derivedDataPath ios/build",
"type": "ios.simulator",
"name": "iPhone Xʀ"
}
}
}
3- Detox Test for UI Testing:
Run this to add Detox test:
$ detox init -r jest
While preparing Detox test, make sure to:
- Add Test ID to make the app testable.
- Prepare a separate JavaScript file for scenarios.
- Identify UI elements on the screen.
- Reset the app between the scenarios if needed.
Now add this test:
describe('MyDetoxAppTest', () => {
beforeEach(async () => {
await device.reloadReactNative();
});
it('welcome screen', async () => {
await expect(element(by.id('welcome'))).toBeVisible();
});
it('show hello Rect after tap', async () => {
await element(by.id('hello_react')).tap();
await expect(element(by.text('React!!!'))).toBeVisible();
});
});
Build the app to run Detox test:
$ detox build
Execute the test by using:
$ detox test
You can see test output on your screen.
Conclusion:
Detox can fulfill the speed and reliability of the UI tests of the React Native apps and make the testing process quick and robust.
