Guide for React Native End-To-End Testing with Detox

End-to-end (E2E) testing involves running your software on a real device or a simulator and interacting with it as a user could in the real world. To put it simply, this implies that a computer or robot is navigating your app and determining whether or not a button may be clicked, a phrase can be entered into the search bar, or anything else.

In this blog, I will show you guys the simplest step to use Detox framework to perform E2E testing. After reading this blog, you will have basic knowledge about how to apply Detox to your React Native application.

>> Read more: Top 5 React Native App Development Companies in 2023

What is Detox?

Detox, created by Wix, is a JavaScript end-to-end testing framework for mobile apps. Detox offers excellent abstractions for choosing and starting actions on components. Amazing projects like react-native-navigation and react-native-ui-lib are also maintained by Wix.

Detox offers tools and special code (APIs) to test your app's quality and behaviour. Detox framework guarantees your software looks great, operates well, and runs properly on phones and tablets.

A typical test appears as the code below:

/* eslint-env detox/detox, mocha */
import { by, device, expect, element } from "detox"

describe("Example", () => {
  beforeAll(async () => {
    await device.launchApp()
  })

  beforeEach(async () => {
    await device.reloadReactNative()
  })

  it("should have welcome screen", async () => {
    await device.reloadReactNative()
    await expect(element(by.text("username-input"))).toBeVisible()
  })
})

The syntax looks very similar to what we usually do with Unit tests. Let’s get started!

4 Steps for Implementing React Native End-to-End Testing with Detox

Step 1: Setting Up React Native Project

I will assume that you already know how to bootstrap a new React Native application. I prefer using the command react-native init to generate the code structure.

npx react-native init MyApp --template react-native-template-typescript

In this case, I’m using a Typescript template to init my code base. For Javascript lovers, feel free to use the Javascript one. This step will be very straightforward. So I will quickly keep it

React Native team just released new architecture recently. I tested and found out that detox didn’t support it yet.

Step 2: Setting Up Detox 

Because we are working with React Native, please make sure that we already have:

• Xcode

• Java

• Android SDK

• Android Emulator

• Brew (updated)

• Node

Before installing the Detox library into your React Native project. You will need to have some global cli.

Let’s install all of them step by step:

• ``yarn global add detox-cli or npm install detox-cli --global`

• brew tap wix/brew && brew install applesimutils

The second step will take a little bit of time to complete. But it’s not that important, you can skip it.

The next step is to go to your root folder and install Detox as a Dev Dependency.

• yarn add detox -D or npm install detox --dev —-save

• yarn add jest-circus -D

Detox will use jest as a runner to run test cases. Jest is installed by default in React Native project. Please make sure the version of jest is above 28. If you are using react-native-reanimated library, you may face some issues with jest (unit test failing). You can check this issue in github, there are some workarounds to fix it https://github.com/software-mansion/react-native-reanimated/issues/3215

After that, we will initialize the configuration for Detox. This can easily be done by the command:

detox init -r jest

This command will generate some files:

.detoxrc.json: This is a basic configuration file for detox

{
  "testRunner": "jest",
  "runnerConfig": "e2e/config.json",
  "skipLegacyWorkersInjection": true,
  "apps": {
    "ios": {
      "type": "ios.app",
      "binaryPath": "SPECIFY_PATH_TO_YOUR_APP_BINARY"
    },
    "android": {
      "type": "android.apk",
      "binaryPath": "SPECIFY_PATH_TO_YOUR_APP_BINARY"
    }
  },
  "devices": {
    "simulator": {
      "type": "ios.simulator",
      "device": {
        "type": "iPhone 11"
      }
    },
    "emulator": {
      "type": "android.emulator",
      "device": {
        "avdName": "Pixel_3a_API_30_x86"
      }
    }
  },
  "configurations": {
    "ios": {
      "device": "simulator",
      "app": "ios"
    },
    "android": {
      "device": "emulator",
      "app": "android"
    }
  }
}

This is what it’s going to look like. You will have to edit this part:

"apps": {
	"ios": {
		"type": "ios.app",
		"binaryPath": "SPECIFY_PATH_TO_YOUR_APP_BINARY"
	},
	"android": {
		"type": "android.apk",
		"binaryPath": "SPECIFY_PATH_TO_YOUR_APP_BINARY"
	}
},

We need to update this part into this:

"apps": {
	"ios": {
		"type": "ios.app",
		"build": "xcodebuild -workspace ios/MyApp.xcworkspace -scheme MyApp -sdk iphonesimulator -derivedDataPath ios/build"
		"binaryPath": "ios/build/Build/Products/Debug-iphonesimulator/MyApp.app",
	},
	"android": {
		"type": "android.apk",
		"binaryPath": "android/app/build/outputs/apk/beta/debug/app-beta-debug.apk",
		"build": "cd android && ./gradlew assembleBetaDebug assembleBetaDebugAndroidTest -DtestBuildType=debug && cd .."
	}
},

• /e2e/config.json: This is the configuration file for Jest runner. You may need to update it in the future. We will just leave it for now.

• /e2e/environment.json

• You may need to use applesimutils command to get the correct name of ios simulator devices. You can also go to Xcode and checkout the list of available devices.

Step 3: Writing Your First Detox React Native Test Case 

Before getting started writing test cases, we will need to refactor our coding environment to make everything look good:

• Support typescript: yarn add ts-jest -D

• Add eslint plugin: yarn add eslint-plugin-detox -D

• Add detox to the plugins section of your .eslintrc configuration file. You can omit the eslint-plugin- prefix:

{ "plugins": ["detox"]}

• Add the following line to the top of your detox test files:

/* eslint-env detox/detox, mocha */

• Update /e2e/config.json to match typescript test case:

{
  "preset": "ts-jest",
  "maxWorkers": 1,
  "testEnvironment": "./environment",
  "testRunner": "jest-circus/runner",
  "testTimeout": 120000,
  "testRegex": "\\.spec\\.ts$",
  "reporters": ["detox/runners/jest/streamlineReporter"],
  "verbose": true
}

• Write your test cases in e2e folder with naming convention “*.spec.ts”

Our first test case will be look like:

/* eslint-env detox/detox, mocha */

import { by, device, expect, element } from  'detox';



describe('Example', () => {

beforeAll(async () => {

await  device.launchApp()

})

beforeEach(async () => {

await  device.reloadReactNative()

})

it('should have welcome screen', async () => {

await  device.reloadReactNative()

await  expect(element(by.text('Step One'))).toBeVisible()

})

})

Step 4: Running your Detox React Native Test Case

Before running your e2e test cases. You need to build your application first. Let’s use the command:

• detox build

This command will build your project and place the binary in the “binaryPath” directory (you can find it in .detoxrc.json). Then you can run to start testing:

• detox test

If everything is set up correctly, you will see the message show up in your terminal console:

PASS e2e/firstTest.spec.js (7.514s)
	Example
		✓ should have welcome screen  (260ms)

Now, your e2e testing is ready. You can read the documentation of detox React Native to write more test cases with complex logic.

>> Read more:

• Top 10 Best Open Source React & React Native IDEs in 2023
• An In-Depth Guide for Front-End Development with React

Conclusion

You should definitely give Detox a try while testing your React Native applications. Amazing mobile end-to-end testing software is available in Detox. After using it for a while, I’d say it has the advantages and disadvantages listed below:

• exceptionally well-abstracted syntax for matchers and for actions.

• Ability to execute tests in CI with excellent integration with Jest.

You could occasionally experience configuration difficulties, and it might take some time to figure out the right fix. The best course of action for this issue is to visit and carefully examine GitHub Issues.

>>> Follow and Contact Relia Software for more information!