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 Testing refers to testing practices aimed at ensuring the stability and health of a mobile application (especially in React Native apps) by running end-to-end tests that simulate real user interactions. Detox is a popular end-to-end testing framework specifically designed for testing mobile applications on both iOS and Android platforms.

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

Detox Server runs on the device or simulator where your website is being tested. Detox Server understands the internal structure and processes.

• 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.

Collaboration between the Detox Client and Detox Server allows you to efficiently and accurately test your website. It makes sure your website functions flawlessly before sharing it with the world.

Features of Detox

Key Features of Detox are:

• Synchronous Testing: Unlike other testing frameworks that may be asynchronous, Detox runs tests synchronously, ensuring that each step (such as, tapping a button, loading data) is fully completed before the next step begins.
• Precise Synchronization: Detox automatically waits for animations, network requests, and other asynchronous events to finish before proceeding with the next action. This prevents flaky tests.
• Device Simulation: You can simulate real-world device conditions, such as poor network connectivity or different screen sizes, to ensure your app behaves well under various conditions.
• Mocking and Stubbing: Detox allows you to mock API calls, simulate different states, and stub responses, helping you isolate your app’s functionality from external services.
• Snapshot Testing: Detox also supports visual testing where you can take screenshots and compare them to baseline images to detect UI regressions.

Common Testing Types Supported by Detox

Detox supports the following types of testing:

• Functional Testing: Ensuring that the app behaves correctly by testing the user flows, UI elements, and interactions.
• Regression Testing: Verifying that new changes or updates do not break existing functionality.
• Performance Testing: Ensuring the app performs optimally, especially during navigation, data fetching, and complex UI transitions.
• Real Device Testing: Running tests on real devices to catch issues that may not appear on simulators or emulators. Detox can be seamlessly integrated with BrowserStack App Automate to run tests on real devices.
• UI Testing: Testing the visual appearance of your app to detect UI issues like layout shifts, broken animations, and screen rendering problems.

Steps for Setting up a Detox Testing Project

Step 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.

Step 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.

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

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

Step 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.

Step 5. Install Detox in your project:

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

Step 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’).

Step 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.

Step 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.

Talk to an Expert

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

Conclusion

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.