Back to Blog

React Native End-to-End testing with Detox and GitlabCI setup

Testing and Mobile Application development process

Tests to a software development team are like legs to a whole body that bear the weight of technical complexities in the pursuit of good-quality products. Without tests, the fast cycle of iterations and the market’s requirement of quick releases often seen in modern software development will easily overwhelm the business itself. 

Disclaimer: The brands, names, and companies listed in this blog are purely for information and educational purposes. We have no affiliation with the mentioned brands, names, and companies, nor do we endorse the readers from using their services.

End-to-End testing

The spectrum of software testing spans from static analysis, unit testing, integration testing, and end-to-end testing, in an order of increasing setup difficulty. However, the more difficult end-to-end testing is to set up, the closest it resembles how end-users interact with a product. Hence, end-to-end testing is a “must”, especially in software with complex features and user flow. In the mobile development space, there exist many end-to-end testing solutions that target different frameworks and needs, one of which is Detox. It happens to be the most suitable end-to-end testing solution since the project is written with React Native as the primary target in the first place. In fact, the React Native website even recommends using Detox as the go-to solution for end-to-end testing.

At Reactron, we use Gitlab as the git management service which also includes a built-in Continuous Integration (CI) system – GitlabCI. Since we maintain many React Native projects, running the tests, especially end-to-end tests automatically in the CI, will ensure that we deliver our projects in the smoothest and highest-quality way possible. We figured that there hasn’t been any guide that helps development teams set up Detox on their own, so we believe this blog post would serve a good purpose for anyone who is interested in running their Detox end-to-end tests on GitlabCI. We also believe in the openness of the software industry, so we have made our own suggestion to Detox’s documentation website here.

Have questions about Detox’s documentation?

It’s time for setup!

In this blog post, we will cover running Detox tests against Android Emulators. We hope the readers should already manage to run their Detox test in their own device. If not, be sure to check out the awesome walkthrough from the Detox team.

First step: register runner

We notice that even though Gitlab provides 2000 minutes of running in their own CI machines for free, those do not support emulation, and therefore, we cannot boot up an emulator to run our tests. Thus, we had to register our own runner (since Gitlab made this as their first-class support) with machine support emulations. In this case, we chose Digital Ocean and created a virtual machine there with 8GB of RAM and 4vCPU. Other popular cloud providers that also offer this feature are AWS (with c5 instance types), Google Cloud, and Azure. In addition, we need to register the runner to run in the privileged mode, since invoking virtual machines / emulation requires privileged access to use the KVM module.

Second step: get correct docker base image

GitlabCI’s runner spawns docker containers in order to run the test. Fortunately, the React Native community already provided an awesome docker image specifically for React Native Android. So that will be the base image of this end-to-end job:

Third step: don’t forget the File Watcher

During the setup of the test, we noticed that the default file watcher limit is too low for React Native to make the JS build, so make sure that you bump the file watcher limit before the build starts.

Finally: create an Android Emulator

Now we go to the fun part, creation of the Android Emulator, and let Detox run the tests in it! We noticed that the React Native Android Docker image provides multiple variants of sdkmanager and avdmanager, which are the command-line tools to get the Android OS image and create emulators. The default variant resides in $ANDROID_HOME/cmdline-tools, which is not the one Detox is expecting (which resides in $ANDROID_HOME/tools/bin). Hence, when detox runs the tests, it cannot find the emulator! In order for Detox to run the tests without issues, we need to make sure that we are using the correct path for the mentioned command-line tools.

Voilà! You’re good to go!

After ticking off all the steps in the above setup, the tests should be ready for execution.

P/s: Do you want to save time and painlessly set up End-to-End tests in your own React Native applications?

Other blog

How React Native has changed the face of cross-platform solutions

React Native uses Javascript, which is the most widely adopted language in the world at the current time of writing. That eases the mass-adoption of the technology. The way React Native is created paves the way to achieving the best performance possible from a mobile application while allowing community contributions to make React Native even better.

Continue reading

Introducing React Native Android Location Enabler

React Native Android Location Enabler Blog's banner

It is now easier to be able to enable the location service in Android devices without requesting users to open the device setting and enable that manually.

Continue reading