Scale your e2e React Native UI testing with Detox on Genymotion SaaS Android virtual devices

[2022.11.15] UPDATED version for Detox 20

Developing mobile applications in React Native has become more and more popular due to its cross-platform compatibility. To run end-to-end testing on React Native applications, Detox framework stands out :
- it is fast and its asynchronous operations reduces testing flakiness
- it integrates easily within the project code

As your application development code and features grow, there is a need to automate and scale those tests to reduce bugs as early as possible. Running those tests on virtual devices has an advantage : devices can be started and stopped on demand at scale.

To test your React Native application on Android, you could run them on Genymotion Cloud. It offers cloud-based Android Virtual Devices. Good news, Wix has been working on a tight integration with Genymotion Cloud to ease the run of end-to-end Detox testing for Android.

There are different steps :
1/ Setup the devices to run the tests on
2/ Run the tests : devices are automatically started & stopped by detox

Requirements

- Python 3 environment
- Android SDK platform tools with adb installed
- A working detox installation with Jest as a test runner
- gmsaas installed and configured

1/ Setup Genymotion Cloud device

In your detox.config.js file, add android.genyclouddevice type. You can tell which device to start by giving its recipe uuid or its name.

For example :

with recipeUUID as the recipe uuid. You can refer to this example. The UUID can be retrieved usinggmsaas recipes list command line. The comprehensive list of all currently available recipes UUIDs are available here

or

with recipeName as the name of the template to start. Please note that if several templates match the name, the first one of the list will be started. You can refer to this example.

2/ Detox automatically handles the start and stop of Genymotion devices with calls to global Detox init and cleanup callback in Jest’s hooks.

At project setup, init & teardown callbacks are automatically defined in jest config file like this

Please make sure that globalSetup and globalTeardown callbacks are defined in the jest config file

3/ [OPTIONAL] If you wish to run your tests in parallel, add e2e script to run your tests in parallel in your package.json file

"test:android-genycloud-release-ci":"detox test --configuration android.genycloud.release -l verbose --maxWorkers 2 --record-logs all --take-screenshots all

In this example it will start 2 devices and run the tests in parallel where android-genycloud-release is the final configuration of the device to run the tests. Please refer to this guide on how to configure a device.

4/ Build your application

You should have a line like this in your package.json file

At the root of your project, run npm run build:android-release

5/ Run your tests

It will start the devices, run the tests and stop the devices

npm run test:android-genycloud-release-ci

You can refer to the demo-react-native-jest project for a complete example.

At the end of this tutorial, you should be able to start and stop Genymotion Cloud SaaS virtual devices directly from your detox tests. You can also refer to Detox official documentation.

If you have any questions, feel free to contact us on our website, on Genymotion SaaS platform. To find more information, please visit our help center or read our documentation.

If you wish to contribute to the Detox project please go through the Contribution Guide

Special thanks to Wix for doing an amazing job on the integration and to Amit and Yaroslav for reviewing the accuracy of the tutorial.