At Ensolvers, we try to write as many automated test cases we can, in different layers of the software products we build, since it helps auto-documenting the code, ensure software quality and eases maintenance.
In our several React Native projects, we use Detox, a testing and automation library. Detox allows simulating user behaviour like taps, swipe, scroll, etc. in particular components and then assert for results - for instance, UI transformations. In this way, it is possible to replicate a full use-case flow in the application to test it from end to end.
1. Install Detox:
2. Install a test runner, you can choose Jest or Mocha (in my case was Jest):
3. Set up test-code scaffolds (automated)
this will create a e2e folder with config files and a first test.
4. Configuration
IOS
Add detox configuration to packaje.json:
Android
a. Set sdk root adding following line to bashrc:
b. Add Detox dependency to your root buildscript (i.e. android/build.gradle):
c. Add the following dependencies and defaultConfig to your app buildscript (i.e. app/build.gradle):
d. Add Kotlin to your classpath in the root build-script (i.e.android/build.gradle):
e. Create Android Test class:
Add a file android/app/src/androidTest/java/com/[your.package]/DetoxTest.java and fill as in the detox example app for NR. Don't forget to change the package name to your project's (create folder androidTest if you need).
f. Add Detox configuration to package.json
Note: You can get your list of available emulators with the following commands:
Let's assume we want to start a test interacting with a TouchableOpacity. First thing we need is to define a testID so we can reference the ponent via a Detox test:
Note: since Detox forces us to define IDs for the componentes, it is considered a "gray-box" testing framework due to the fact that the code will reflect the fact that it is tested with Detox through this property.
Create a .spec.js file inside e2e folder (or use the existing file firstTest.spec.js) and paste the following code:
Match the element andperform an action:
Set an expectation on theresult:
Step 4: Running the test.
Build the app:
Then, the tests can be run with the following commands
1. Android
2. IOS
The command above will run the test (files with extension .spec.js) inside e2e folder.
That's it. Your first failing Detox test is running!
You can create more complex tests using the Detox API:
• Matchers api
• Actions api
• Expectations api
Detox is a powerful library for testing your RN application in a simple and straightforward way taking three simple steps: match a component, perform an action and expect a result.
By following these 3 steps repeatedly we can generate the different flows of the application testing it end to end, in a really short time compared to the time it would take to do it manually.
