React Native UI testing with Detox & Genymotion SaaS

Source:

Published:

Keywords: Detox, Genymotion SaaS, React Native, UI testing, end-to-end testing, Jest, Android, Genymotion

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

Detox is an end-to-end testing framework for React Native applications.

Detox reduces testing flakiness by performing asynchronous operations.

Detox integrates easily within the project code.

As your application development code and features grow, there is a need to automate and scale tests to reduce bugs as early as possible. Running tests on virtual devices has an advantage because devices can be started and stopped on demand at scale. 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. 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, please follow these instructions.

There are different steps:

Requirements

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.

Example: 

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

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

Or 

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


// detox.config.js

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 the 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 wish to read more information, please read Genymotion SaaS documentation.