React Native UI testing with Detox & Genymotion SaaS

Source:

Published:

Keywords: Detox, Genymotion SaaS, React Native, UI testing, Android, E2E testing, Jest, detox.config.js

Document ID: https://genymotion.com/blog/tutorial/react_native_detox_genymotion_saas#split1

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.

Overview

Developing mobile applications in React Native has become more and more popular due to its cross-platform compatibility.

Detox framework stands out. Detox is fast and its asynchronous operations reduce testing flakiness.

Detox 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 SaaS.

Genymotion SaaS offers cloud-based Android Virtual Devices.

Good news. 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 teaser 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:

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.

For example:

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

The UUID can be retrieved using gmsaas recipes list command line. The comprehensive list of all currently available recipes UUIDs are available here.

Or

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

In addition, you can refer to this example for the name-based configuration.

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 an 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 --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:

npm run build:android

Step 5: Run your tests

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

Step 1: Setup Genymotion SaaS device (continued)

Step 2: Step 2: Setup Jest hooks (continued)

Step 3: Step 3 [OPTIONAL]: Add an e2e script (continued)

Step 4: Step 4: Build your application (continued)

Step 5: Step 5: Run your tests (continued)

Step 2: Requirements