An Ultimate Guide to 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 would. This ensures that all components of your application work together correctly. Detox, created by Wix, is a JavaScript testing framework for mobile apps, providing excellent abstractions for selecting and performing actions on components.

In this blog, I will show you guys the simplest steps to use Detox for E2E testing in your React Native application. By the end of this guide, you'll have a basic understanding of how to apply Detox to your project.

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

What is Detox?

Detox is a JavaScript end-to-end testing framework for mobile apps. It provides tools and APIs to test your app's quality and behavior, ensuring it looks great, operates well, and runs properly on phones and tablets. 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 Detox test looks like this:

/* 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 expect(element(by.text('username-input'))).toBeVisible();
  });
});

The syntax looks very similar to what we usually do with unit tests.

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

Step 1: Setting Up React Native Project

First, you'll need to bootstrap a new React Native application. For this example, we'll use a TypeScript template:

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

Note: Detox currently does not support the new React Native architecture.

Step 2: Setting Up Detox 

Prerequisites

Ensure you have the following installed:

• Xcode
• Java
• Android SDK
• Android Emulator
• Homebrew (updated)
• Node.js

Installation Steps

• Install Detox CLI:

yarn global add detox-cli
// or
npm install detox-cli --global

• Install AppleSimUtils:

brew tap wix/brew && brew install applesimutils

• Install Detox and Jest Circus:

yarn add detox -D
// or
npm install detox --save-dev

yarn add jest-circus -D

• Initialize Detox Configuration:

detox init -r jest

This will generate the following configuration files:

• .detoxrc.json
• e2e/config.json
• e2e/environment.json

You will need to update .detoxrc.json to specify the paths to your app binaries:

{
  "testRunner": "jest",
  "runnerConfig": "e2e/config.json",
  "skipLegacyWorkersInjection": true,
  "apps": {
    "ios": {
      "type": "ios.app",
      "build": "xcodebuild -workspace ios/MyApp.xcworkspace -scheme MyApp -configuration Debug -derivedDataPath ios/build",
      "binaryPath": "ios/build/Build/Products/Debug-iphonesimulator/MyApp.app"
    },
    "android": {
      "type": "android.apk",
      "binaryPath": "android/app/build/outputs/apk/debug/app-debug.apk",
      "build": "cd android && ./gradlew assembleDebug"
    }
  },
  "devices": {
    "simulator": {
      "type": "ios.simulator",
      "device": {
        "type": "iPhone 11"
      }
    },
    "emulator": {
      "type": "android.emulator",
      "device": {
        "avdName": "Pixel_3a_API_30_x86"
      }
    }
  }
}

Step 3: Writing Your First Detox React Native Test Case 

Preparing Your Environment

• Add TypeScript Support:

yarn add ts-jest -D

• Add ESLint Plugin for Detox:

yarn add eslint-plugin-detox -D

• Update .eslintrc Configuration:

{
  "plugins": ["detox"]
}

• Update e2e/config.json for TypeScript:

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

Writing Your First Test Case

Create a file e2e/firstTest.spec.ts with the following content:

/* 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 expect(element(by.text('Step One'))).toBeVisible();
  });
});

Step 4: Running your Detox React Native Test Case

• Build Your Application:

detox build

• Run Your Test Cases:

detox test

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

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

>> Read more:

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

Conclusion

Detox is an excellent framework for end-to-end testing of React Native applications. While it offers powerful abstractions and tools, you might occasionally encounter configuration challenges. For any issues, refer to the GitHub issues page and community forums for assistance. Give Detox a try to ensure your app is robust and reliable!

For further reading and support, check out the following resources:

• Detox Documentation
• React Native Documentation
• Detox GitHub Issues
• React Native GitHub Issues

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