Tests to a software development team are like legs to a whole body that bears 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. In this blog, you’ll learn how to set up React Native end-to-end testing with Detox and GitlabCI.

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.

React Native 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 React Native 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 React Native 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? Talk to Reactron’s Dev Team for further support

• 

It’s time for setup!

We will cover running Detox tests against Android Emulators. We hope the readers should already manage to run their Detox test on 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 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.

1234	[runners.docker]    image = “alpine”    privileged = true    disable_cache = true

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:

123	detox_e2e:   stage: test   image: reactnativecommunity/react-native-android

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.

12	before_script:    – echo fs.inotify.max_user_watches=524288 | tee -a /etc/sysctl.conf && sysctl -p

Finally: create an Android Emulator

Now we go to the fun part, the 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.

1234

script:    – mkdir -p /root/.android && touch /root/.android/repositories.cfg    – echo yes | $ANDROID_HOME/tools/bin/sdkmanager –channel=0 –verbose “system-images;android-27;default;x86_64”              – echo no | $ANDROID_HOME/tools/bin/avdmanager –verbose create avd –force –name “My_Test_Emulator” –package “system-images;android-27;default;x86_64” –sdcard 200M –device 11

Voilà! You’re good to go!

After ticking off all the steps in the above setup, the tests should be ready for execution. That’s how you set up React Native end-to-end testing with Detox and GitlabCI!

123	script:    – npx detox build -c android.emu.release.ci    – npx detox test -c android.emu.release.ci –headless

Psss do you want to save time and painlessly set up React Native End-to-End testing applications? Reactron is a React Native powerhouse with experts who have a burning passion for React Native! We provide everything you need to build a robust application! Check out our services.