Testing react native applications with Detox
React Native is getting pretty popular amongst developers and more and more applications are now being built on the top of it. One of the important things to consider while developing any mobile application is to have proper tests. While developers often tend to focus more on unit and integration tests, the end to end tests are equally important and often get overlooked to save time. There are several advantages to writing e2e tests:
- While unit tests check if the blocks of code function independently, these tests ensure that the entire flow of the application works in real-world scenarios.
- We will also end up saving a lot of time doing manual testing if the tests are automated.
We at Skyscanner are using Detox for end to end testing our mobile applications. Detox is a gray box end-to-end testing and automation library which has support for react native and pure native projects. Detox supports both Android and iOS. This is a small tutorial that explains how you can get Detox up and running in no time for your own application. I will only focus on iOS in this tutorial but running the same tests on android requires very few changes.
I have written a really simple react native application for this tutorial. The source code for it is available here. This application
just consists of one button that toggles the visibility of an image. The main component
App.js file looks like this:
This application looks something like this:
You will see a special property called
testID assigned to some of the views. This is how react native uniquely
identifies the views. We will see this in action when we start writing our tests. Follow this guide to get
detox up and running. Detox can basically run with any test runner of our choice. We will be using jest in
You can check if detox is correctly installed by using:
If everything is fine, you should see the list of commands supported by detox. First,
we need to add configuration required for detox in
package.json. Sample configuration looks like this:
The configuration basically tells detox how to build the application, and what simulator to use. Make sure you have the chosen simulator available before you run the tests.
Now let’s write a test. Run:
You will see a new directory in your project called
e2e with some basic code to run the first test. Let’s add our first
test to the file
firstTest.spec.js. We will test if the only button in our application indeed toggles the visibility
of the image.
Let’s see this bit by bit. Before each test, we reload the react native application using
To reduce flakiness of the tests, Detox provides us with a special function that will synchronize the test with the app.
You can do this by using
Let’s see our first test case:
This just checks if a view with
testID equal to
mainScreen is visible when the app is launched.
Our next test is a little more complicated but still easy to understand:
We first try to find the button and then tap it. This is done in the
We used the
withTimeout function because UI tests are flaky and it takes undetermined time for the screen to render.
If our tests run before the screen is rendered, they will fail. Once the button is tapped, we just check if our secret
image is visible. Our next test checks if tapping the button twice again hides the secret image.
To run the tests, use:
This will build the application file that can be installed in the simulator. Next, run:
Usually, when running the test suite, the device runs in headless mode. But if you open Simulator.app in OSX, you should see the tests in action.
That’s it. We have our first e2e tests ready.
Let me know what you think of this article on twitter @ankitchandawala or leave a comment below!