React Native UI testing with Detox & Genymotion SaaS

2024-04-23

> Note: This article is a copy of https://medium.com/genymobile/scale-your-e2e-react-native-ui-testing-with-detox-on-genymotion-cloud-android-virtual-devices-b3effbc7eccc. Reproduced by courtesy of its author, Elinor Kwok.

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.
• its asynchronous operations reduces testing flakiness.
• it integrates easily within the project code.

As 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 a React Native application on Android, you could run them on Genymotion SaaS.

Genymotion SaaS offers cloud-based Android Virtual Devices.

Wix has been working on a tight integration with Genymotion SaaS to ease the run of end-to-end Detox testing for Android.

The integration is not completely finished yet and made official but the core integration is already there.

This tutorial is a teasing for a more detailed blogpost and documentation that Wix will release later once everything is completely integrated.

For now, if you wish to test please follow these instructions.

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

Step 1: Setup Genymotion SaaS 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.

Use recipeUUID

For example:

| | devices: { | | | "genymotion.emulator.uuid": { | | | type: "android.genycloud", | | | device: { | | | recipeUUID: "2e7c77b9-b2a8-4e7f-9289-b3cb05adac5c", | | | } | | | } |

Use recipeUUID as the recipe uuid.

You can refer to this example.

The UUID can be retrieved using gmsaas recipes list command line.

The comprehensive list of all currently available recipes UUIDs are available here.

Use recipeName

For example:

| | devices: { | | | "genymotion.emulator.name": { | | | type: "android.genycloud", | | | device: { | | | recipeName: "xxxx", | | | } | | | } |

Use 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.

Step 2: Setup Jest hooks

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:

| | module.exports = | | | globalSetup: 'detox/runners/jest/globalSetup', | | | globalTeardown: 'detox/runners/jest/globalTeardown' |

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

Step 3 [OPTIONAL]: Add an e2e script

If you wish to run your tests in parallel, add e2e script to run your tests in parallel in your package.json file:

JSON "test:android-genycloud-release-ci":"detox test --configuration android.genycloud.release -l verbose --workers 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.

There is also an example here.

Step 4: Build your application

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

At the root of your project, run:

Bash npm run build:android

Step 5: Run your tests

This will start the devices, run the tests and stop the devices:

Bash 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 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 read Genymotion SaaS 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.