End to End Detox Testing Tutorial

Detox is like having a virtual assistant that automatically tests your app by mimicking user interactions. It’s designed specifically for mobile apps.  What’s cool about Detox is its “Grey Box” testing model.

Detox doesn’t rely on a Webdriver, a common testing tool. Instead, it communicates directly with the native layers of the mobile devices, like Android’s Espresso and iOS’s EarlGrey. This means Detox can interact with the app as a real user without any unnecessary delays.

What is Detox Testing?

Detox is like a toolkit for testing mobile apps. It’s made with JavaScript and helps you test every part of your app, from how users interact to ensuring everything works smoothly. It provides tools and special code (APIs) to help you check if your app behaves as expected and is high quality.

With Detox, you can write automated tests to simulate various user scenarios. For example, you can create a test that mimics a user searching for nearby rides, selecting a destination, and booking a ride. Detox will validate that the available rides are displayed accurately, the destination is correctly set, and the booking process completes smoothly.

Detox Mobile Testing ensures your app looks great, works well, and performs smoothly on mobile phones and tablets.

Understanding the Architecture of Detox Framework

Imagine you’re building a website from scratch and want to ensure it functions perfectly before launching it. Detox is like having a reliable friend who helps you test and spot any issues.

In this case, the Detox Client is like your testing assistant. It’s the one you communicate with and give instructions on what tests to perform on your website. It’s like having a knowledgeable friend who understands testing frameworks like Jest or Mocha.

• When you want to run a test, tell your Detox Client what actions to perform on your website. It then communicates with the Detox Server, which interacts directly with your website’s different components and elements. 
• They use a WebSocket connection to communicate between the Detox Client and Detox Server. They’re chatting back and forth, exchanging information and ensuring smooth coordination. 
• The Detox Server executes the commands received from the Detox Client and reports back the results.

This friendly collaboration between the Detox Client and Detox Server allows you to efficiently and accurately test your website. It’s like someone making sure your website functions flawlessly before sharing it with the world.

Steps for Setting up a Detox Testing Project

1. Install the necessary prerequisites on your macOS machine. Ensure you have macOS High Sierra 10.13 or above, Xcode 10.1 or above, and Homebrew installed.

2. You’ll also need Node 8.3.0 or above and Apple Simulator Utilities.

You can use the following commands to install them:

• Run brew update && brew install node to update Homebrew and install Node.
• Run brew tap wix/brew && brew install applesimutils to install Apple Simulator Utilities.

3. Install the Detox CLI by running the following command:

• Run npm install -g detox-cli to install the Detox CLI globally.

4. Create a new React Native project using the following command:

• Run npx react-native init MyDetoxProject to create a new React Native project. You can replace “MyDetoxProject” with the desired name of your project.

5. Install Detox in your project:

• Run npm install detox –save-dev to install Detox as a development dependency in your project.

6. Configure Detox in your project:

• Create a file called “detox.config.js” in the root directory of your project.
• Add the following code to the “detox.config.js” file:

module.exports = {
  configurations: {
    ios: {
      type: 'ios.simulator',
      binaryPath: 'path/to/your/app',
      build: 'path/to/your/xcodeproj',
      device: {
        type: 'iPhone 11'
      }
    }
  }
}

Replace the “path/to/your/app” and “path/to/your/xcodeproj” with the actual paths to your app and Xcode project files. Also, specify the desired device type (e.g., ‘iPhone 11’).

7. Write your first Detox test:

Create a file called “firstTest.spec.js” in your project’s “e2e” directory.

Add the following example test code to “firstTest.spec.js”:

describe('Example', () => {
  beforeEach(async () => {
    await device.reloadReactNative();
  });

  it('should have welcome screen', async () => {
    await expect(element(by.id('welcome'))).toBeVisible();
  });
});

This is just an example test. You can customize it based on your specific requirements.

8. Run your Detox test

To run your Detox test, use the following command:

Run detox test –configuration ios to run the Detox test on the iOS simulator.

Detox End-to-End Testing Tutorial

Write your first Detox test: You can write your first Detox test in a file called firstTest.spec.js in the e2e directory of your project. 

Here’s an e2e Detox testing example:

describe('Example', () => {
  beforeEach(async () => {
    await device.reloadReactNative();
  });

  it('should have welcome screen', async () => {
    await expect(element(by.id('welcome'))).toBeVisible();
  });
});

Integrate Detox into your development workflow: You can integrate Detox into your development workflow by adding Detox commands to your package.json file. 

Here’s an example:

"scripts": {
  "test:e2e": "detox test --configuration ios",
  "test:e2e:build": "detox build --configuration ios"
}

Sample Detox test

Here’s an example of a Detox test that interacts with a login screen:

describe('Login Screen', () => {
  beforeEach(async () => {
    await device.reloadReactNative();
  });

  it('should show error message on invalid login', async () => {
    await element(by.id('username')).typeText('invalid_username');
    await element(by.id('password')).typeText('invalid_password');
    await element(by.id('loginButton')).tap();
    await expect(element(by.id('errorMessage'))).toBeVisible();
  });

  it('should navigate to home screen on valid login', async () => {
    await element(by.id('username')).typeText('valid_username');
    await element(by.id('password')).typeText('valid_password');
    await element(by.id('loginButton')).tap();
    await expect(element(by.id('homeScreen'))).toBeVisible();
  });
});

This test checks if the login screen shows an error message on invalid login and navigates to the home screen on valid login.

Running Detox tests on a Real Device Cloud

BrowserStack Real Device Cloud lets you test your app on actual devices. This is crucial because real devices give you the most accurate representation of user experience. It supports over 400 combinations of devices and operating systems. 

BrowserStack App Automate essentially provides Detox-based testing for React Native apps, offering a more reliable gray-box testing approach It also has beta support for running detox tests on Android.

To use BrowserStack’s App Automate for Detox testing:

• Upload your Android app to BrowserStack.
• Set up Detox to run on BrowserStack.
• Execute your test script using BrowserStack’s App Automate.

Sign Up Now

Closing Notes

Detox testing brings powerful benefits to mobile app development. It enables comprehensive testing of native apps, reduces flaky tests, and integrates seamlessly with CI/CD pipelines. With Detox, you can automate end-to-end tests, save time and effort, and ensure the quality of your app across iOS and Android platforms. Its support for React Native, rich API, and flexibility make Detox a valuable tool for developers aiming to deliver robust and reliable mobile applications.