React Native UI testing with Detox & Genymotion SaaS

Source:

Published:

Keywords: React Native, Detox, Genymotion SaaS, E2E testing, Jest, Android

Document ID: genymotion_com_blog_tutorial_react_native_detox_genymotion_saas

Date: 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 grown in popularity due to cross-platform compatibility. This is the reason for the increasing adoption of React Native for mobile development.

Detox reduces testing flakiness by its asynchronous operations. Detox integrates easily within the project code.

As application development code and features grow, there is a need to automate and scale the tests. The goal is to reduce bugs as early as possible.

Running tests on virtual devices has an advantage. Virtual devices can be started and stopped on demand at scale.

Genymotion SaaS offers cloud-based Android Virtual Devices. This service enables testing React Native applications on Android.

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, but the core integration is already available.

This tutorial previews a more detailed blog post and documentation that Wix will release later when the integration is complete. For now, to test please follow these instructions.

There are several 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.

For 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 are available here.

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

The recipeName is the name of the template to start. If several templates match the name, the first one in the list will be started. You can refer to this example.

Step 2: Setup Jest hooks Detox automatically handles the start of Genymotion devices with calls to global Detox init. Detox automatically handles the stop of Genymotion devices with cleanup callbacks in Jest’s hooks.

At project setup, init and 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 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.