End-to-end testing in React Native with Detox
Tags: reactnative, javascript, testing
Published: 2019-10-10 16:46:50

---
title: End-to-end testing in React Native with Detox
published: true
tags: reactnative, javascript, testing 
canonical_url: https://blog.logrocket.com/end-to-end-testing-in-react-native-with-detox/
cover_image: https://thepracticaldev.s3.amazonaws.com/i/1c0q5lli3p3pnnx28y40.jpeg
---
**Written by [Emanuel Suriano](https://blog.logrocket.com/author/emanuelsuriano/)**✏️

End-to-end testing is a technique that is widely performed in the web ecosystem with frameworks like [Cypress](https://github.com/cypress-io/cypress), [Puppeteer](https://github.com/GoogleChrome/puppeteer), or maybe with your own custom implementation.

But when it comes to the mobile world, this practice is not that common, and there are several existing solutions to address. I have a theory that most mobile developers think testing mobile application is hard and requires a lot of setup and configuration, and therefore they just skip it.

The goal of this article is to explain how to implement the end-to-end testing framework [Detox](https://github.com/wix/Detox) in a React Native application, write a bunch of interaction tests, and, finally, integrate it into your development workflow.

> **⚠Disclaimer⚠:** Given the length of this article, I will only focus on the iOS flow. Nevertheless, I plan to release a second part covering Android, too.

[![LogRocket Free Trial Banner](https://i0.wp.com/blog.logrocket.com/wp-content/uploads/2017/03/f760c-1gpjapknnuyhu8esa3z0jga.png?resize=1200%2C280&ssl=1)](https://logrocket.com/signup/)

## A quick introduction to end-to-end testing [📖](https://s.w.org/images/core/emoji/12.0.0-1/72x72/1f4d6.png)

Let’s start with a definition of end-to-end from [Software Testing Dictionary](https://www.tutorialspoint.com/software_testing_dictionary/end_to_end_testing.htm):

> End-to-end testing is a technique used to test whether the flow of an application right from start to finish is behaving as expected. The purpose of performing end-to-end testing is to identify system dependencies and to ensure that data integrity is maintained between various system components and systems.

In contrast to unit testing, end-to-end testing tries to cover as much of your application’s functionality as it can. The more it covers, the more reliable your tests will be. Therefore, it includes all the stages of an application:

- Set up environment
- Installation of the application (if it’s necessary)
- Initialization
- Executing routines
- Expecting events or behaviors to happen

This is how end-to-end testing looks in the browser using Cypress:

![End-To-End Testing On Web With Cypress](https://i1.wp.com/blog.logrocket.com/wp-content/uploads/2019/10/e2e-cypress-demo.gif?resize=730%2C397&ssl=1)

Cypress is able to create an instance of Chrome, run a URL, and then start interacting with the webpage by selecting elements (`div`, `button`, `input`) using native selectors (`getElementById`, `getElementByName`, `getElementByClassName`), and then triggering events (`click`, `change`, `focus`).

At any point in the tests, the developer can `assert`/`expect` something to happen or to have a specific value. In case all the expectations were true, the result of the test suite will be successful.

## End-to-end testing in mobile [🤯](https://s.w.org/images/core/emoji/12.0.0-1/72x72/1f92f.png)

The process of testing mobile applications is actually quite similar to the web. Let’s go thought the previously described steps:

- **Set up environment:** create an instance of an emulator (Android/iOS device)
- **Installation:** install the application
- **Initialization:** run the application
- **Executing routines:** Depending on the framework this may change, but all of them are using native directives to get the reference of an element (`Button`, `View`, `TextInput`) and then executing actions (`press`, `type`, `focus`)
- **Expecting events:** Using the same functions described before, they can `assert`/`expect` values or events that happened

This is how end-to-end testing looks like in mobile using Detox:

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/f78iesirol0x657phww5.gif)

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/j3x6pr6xpkeq7vru411o.gif)

## What is Detox, and why should you pick it? [⭐](https://s.w.org/images/core/emoji/12.0.0-1/72x72/2b50.png)

Detox is an end-to-end framework for mobile apps developed by [Wix](https://www.wix.engineering), one of the top contributors inside the React Native community. They also maintain amazing projects such as react-native-navigation, react-native-ui-lib, and, of course, Detox.

What I like about this framework is the great abstraction it provides to select and trigger actions on elements. This is how a normal test looks:

```jsx
describe('Login flow', () => {
  it('should login successfully', async () => {
    await device.reloadReactNative();
    // getting the reference of an element by ID and expecting to be visible
    await expect(element(by.id('email'))).toBeVisible();

    // Getting the reference and typing
    await element(by.id('email')).typeText('john@example.com');
    await element(by.id('password')).typeText('123456');

    // Getting the reference and executing a tap/press
    await element(by.text('Login')).tap();

    await expect(element(by.text('Welcome'))).toBeVisible();
    await expect(element(by.id('email'))).toNotExist();
  });
});
```

As you can see, the syntax is quite readable, and by using `async/await`, you can write synchronous and easy-to-understand tests. Let’s jump into the demo!

## Ready, set, code! [🏎](https://s.w.org/images/core/emoji/12.0.0-1/72x72/1f3ce.png)

In case you want to skip the explanation and check the code, I’ll give you the [link for the repository](https://github.com/EmaSuriano/e2e-react-native-detox) with the project already bootstrapped and the tests in place.

As the focus of this article is testing and not explaining how to set up React Native, I suggest bootstrapping your project using `react-native init`, which creates a pretty simple and clean React Native project.

Start by installing the dependency and creating the fresh new project.

```jsx
~ npm install react-native -g
~ react-native init testReactNativeDetox

               ######                ######
             ###     ####        ####     ###
            ##          ###    ###          ##
            ##             ####             ##
            ##             ####             ##
            ##           ##    ##           ##
            ##         ###      ###         ##
             ##  ########################  ##
          ######    ###            ###    ######
      ###     ##    ##              ##    ##     ###
   ###         ## ###      ####      ### ##         ###
  ##           ####      ########      ####           ##
 ##             ###     ##########     ###             ##
  ##           ####      ########      ####           ##
   ###         ## ###      ####      ### ##         ###
      ###     ##    ##              ##    ##     ###
          ######    ###            ###    ######
             ##  ########################  ##
            ##         ###      ###         ##
            ##           ##    ##           ##
            ##             ####             ##
            ##             ####             ##
            ##          ###    ###          ##
             ###     ####        ####     ###
               ######                ######


                  Welcome to React Native!
                 Learn Once Write Anywhere

✔ Downloading template
✔ Copying template
✔ Processing template
✔ Installing dependencies
✔ Installing CocoaPods dependencies (this may take a few minutes)

  Run instructions for iOS:
    • cd testReactNativeDetox && react-native run-ios
    - or -
    • Open testReactNativeDetox/ios/testReactNativeDetox.xcworkspace in Xcode or run "xed -b ios"
    • Hit the Run button

  Run instructions for Android:
    • Have an Android emulator running (quickest way to get started), or a device connected.
    • cd testReactNativeDetox && react-native run-android
```

After this step, you can try running the application in the emulator by executing:

```jsx
~ cd testReactNativeDetox
~ react-native run-ios
```

![React Native Bootstrapped Application](https://i1.wp.com/blog.logrocket.com/wp-content/uploads/2019/10/e2e-react-native-bootstrap.png?resize=730%2C1460&ssl=1)

## Time to test! [🔧](https://s.w.org/images/core/emoji/12.0.0-1/72x72/1f527.png)

Before jumping into testing, you need to have the following [prerequisites](https://github.com/wix/Detox/blob/master/docs/Introduction.GettingStarted.md#prerequisites):

- [Xcode](https://developer.apple.com/xcode/) installed
- [Homebrew](https://brew.sh) installed and updated
- Node.js installed (`brew update && brew install node`)
- `applesimutils` installed (`brew tap wix/brew; brew install applesimutils;`)
- `detox-cli` installed (`npm install -g detox-cli`)

Start by adding Detox as a dev dependency for the project.

```jsx
~ yarn add detox -D
```

Inside the CLI, they provide a command that can automatically set up the project. You need to run:

```jsx
~  detox init -r jest

detox[34202] INFO:  [init.js] Created a file at path: e2e/config.json
detox[34202] INFO:  [init.js] Created a file at path: e2e/init.js
detox[34202] INFO:  [init.js] Created a file at path: e2e/firstTest.spec.js
detox[34202] INFO:  [init.js] Patching package.json at path: /Users/USERNAME/Git/testReactNativeDetox/package.json
detox[34202] INFO:  [init.js]   json["detox"]["test-runner"] = "jest";
```

This will create a new folder called `e2e` with a basic test and some initial configuration such as `init.js`, which is the file that tells `jest` to start the simulator and so on. Let’s modify this initial test to check if the two first sections are visible.

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

  it('should have "Step One" section', async () => {
    await expect(element(by.text('Step One'))).toBeVisible();
  });

  it('should have "See Your Changes" section', async () => {
    await expect(element(by.text('See Your Changes'))).toBeVisible();
  });
});
```

Next, you need to add a configuration for Detox inside your `package.json`. Add the following object to the `detox` key, replacing the name of `testReactNativeDetox` with the name of your application:

```jsx
{
  "detox": {
    "test-runner": "jest",
    "configurations": {
      "ios.release": {
        "binaryPath": "./ios/build/Build/Products/Release-iphonesimulator/testReactNativeDetox.app",
        "build": "xcodebuild -workspace ios/testReactNativeDetox.xcworkspace -configuration release -scheme testReactNativeDetox -sdk iphonesimulator -derivedDataPath ios/build",
        "type": "ios.simulator",
        "name": "iPhone X"
      }
    }
  }
}
```

Once done, try to build the application by running:

```jsx
~ detox build
```

In case your build failed with the message `clang: error: linker command failed with exit code 1 (use -v to see invocation)`, please refer to this [solution in GitHub issues](https://github.com/facebook/react-native/issues/4210#issuecomment-171944483) and try running the command again.

Finally, time to run the test!

```jsx
~ detox test

 PASS  e2e/firstTest.spec.js (7.514s)
  Example
    ✓ should have "Step One" section (260ms)
    ✓ should have "See Your Changes" section (278ms)
```

![Running Initial Detox Test](https://i0.wp.com/blog.logrocket.com/wp-content/uploads/2019/10/e2e-react-native-base-detox.gif?resize=730%2C668&ssl=1)

## Time to make it fancier! [💅](https://s.w.org/images/core/emoji/12.0.0-1/72x72/1f485.png)

Let’s put those boring and flat sections inside a colorful carousel! Because who doesn’t love them?

[CAROUSEL IMAGE]

In order to save time, I decided to use an existing carousel component built by the community. For this demo, I used [react-swipeable-views-native](https://github.com/oliviertassinari/react-swipeable-views). I’m sure there must be better alternatives out there, but this one was the perfect match for my needs.

Also, in order to generate nice random colors, I used [randomColor](https://github.com/davidmerfield/randomColor).

Install both libraries as dependencies for the project:

```jsx
~ yarn add react-swipeable-views-native randomcolor
```

Then I made a few modifications inside `App.js` — you can find the code [here](https://github.com/EmaSuriano/e2e-react-native-detox/blob/master/App.js). This is the summary of changes:

- Wrap all the sections inside `SwipeableViews` to enable swiping behavior
- Wrap each section inside a custom `View` called `Slide` that implements properties like `padding` and `backgroundColor`
- Add a `Button` and a `TextInput` component to the last two slides

And this is the result:

![Demo React Native App With Carousel](https://i0.wp.com/blog.logrocket.com/wp-content/uploads/2019/10/e2e-react-native-demo-carousel.gif?resize=472%2C957&ssl=1)

## Writing Detox tests [🧪](https://s.w.org/images/core/emoji/12.0.0-1/72x72/1f9ea.png)

In order to make things easier, let’s add two new `scripts` into the `package.json`:

```jsx
{
  "scripts": {
    "e2e:test": "detox test -c ios.release",
    "e2e:build": "detox build -c ios.release"
  }
}
```

Now that the application has changed, you need to create a new build of it in order to run tests with the modified version. Execute the following command:

```jsx
~ yarn e2e:build
```

This process may take some time. In the meantime, let’s take a quick look at the existing tests:

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

  it('should show "Step One"', async () => {
    await expect(element(by.text('Step One'))).toBeVisible();
  });

  it('should show "See Your Changes"', async () => {
    await expect(element(by.text('See Your Changes'))).toBeVisible(); // THIS TEST WILL FAIL!
  });
});
```

The second test will definitely fail because the “See Your Changes” section is now in the second slide of the Carousel, which is not visible for the user until they swipe. Therefore, let’s make Detox move to that slide!

```jsx
describe('Example', () => {
  // previous tests here

  it('should render "See Your Changes" in the second slide', async () => {
    // getting the reference of the slides and make a swipe
    await element(by.id('slides')).swipe('left');
    await expect(element(by.text('See Your Changes'))).toBeVisible(); // no this will pass!
  });
});
```

At this point, you can execute the end-to-end tests, and they should pass! The command is:

```jsx
~ yarn e2e:test

 PASS  e2e/firstTest.spec.js (7.514s)
  Example
    ✓ should have "Step One" section (260ms)
    ✓ should render "See Your Changes" in the second slide (993ms)
```

![Running A Basic End-To-End Test With Detox](https://i1.wp.com/blog.logrocket.com/wp-content/uploads/2019/10/e2e-basic-test.gif?resize=730%2C666&ssl=1)

Let’s add a few more tests to cover the following scenarios:

- Test that the carousel allows the user to move back and forth inside the slides.
- Move the third slide and interact with the `Button`
- Move the last slice and interact with the `TextInput`

```jsx
describe('Example', () => {
  // previous tests here

  it('should enable swiping back and forth', async () => {
    await expect(element(by.text('Step One'))).toBeVisible();
    await element(by.id('slides')).swipe('left');
    await element(by.id('slides')).swipe('right');
    await expect(element(by.text('Step One'))).toBeVisible();
  });

  it('should render "Debug" and have a Button to click in the third slide', async () => {
    await element(by.id('slides')).swipe('left');
    await element(by.id('slides')).swipe('left');
    await expect(element(by.text('Debug'))).toBeVisible();

    await element(by.text('Click here!')).tap();
    await expect(element(by.text('Clicked!'))).toBeVisible();
  });

  it('should render "Learn More" and change text in the fourth slide', async () => {
    await element(by.id('slides')).swipe('left');
    await element(by.id('slides')).swipe('left');
    await element(by.id('slides')).swipe('left');
    await expect(element(by.text('Learn More'))).toBeVisible();

    const docsInput = element(by.id('docsInput'));

    await expect(docsInput).toBeVisible();

    await docsInput.clearText();
    await docsInput.typeText('Maybe later!');

    await expect(docsInput).toHaveText('Maybe later!');
  });
});
```

Feature fully tested! Let’s run the tests again.

```jsx
~ yarn e2e:test

 PASS  e2e/firstTest.spec.js (22.128s)
  Example
    ✓ should have "Step One" section (268ms)
    ✓ should render "See Your Changes" in the second slide (982ms)
    ✓ should enable swiping back and forth (1861ms)
    ✓ should render "Debug" and have a Button to click in the third slide (2710ms)
    ✓ should render "Learn More" and change text in the fourth slide (9964ms)
```

![Running The Full End-To-End Test With Detox](https://i2.wp.com/blog.logrocket.com/wp-content/uploads/2019/10/e2e-full-test.gif?resize=730%2C661&ssl=1)

## Bonus: Running E2E test in CI [🎁](https://s.w.org/images/core/emoji/12.0.0-1/72x72/1f381.png)

Running tests inside CI is quite important; they basically eliminate the need to do manual testing and prevent shipping bugs to production (in case we have the proper set of tests). For this example, I decided to use [TravisCI](https://travis-ci.org) because it has an amazing integration with GitHub and also provides an unlimited plan for open source projects.

In case you are using GitHub, you can install the [Travis Application](https://github.com/marketplace/travis-ci), create a new plan, and allow it to access your repositories.

After that, you need to create a new file inside your project called `.travis.yml`, which defines the steps you want to run in CI.

I tweaked the CI configuration inside the [Official Documentation of Detox](https://github.com/wix/Detox/blob/master/docs/Guide.RunningOnCI.md#-running-detox-on-travis-ci) a little bit, and this is the one that works in my case.

```jsx
language: objective-c
osx_image: xcode10.2

branches:
  only:
    - master

env:
  global:
    - NODE_VERSION=stable

install:
  - brew tap wix/brew
  - brew install applesimutils
  - curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.2/install.sh | bash
  - export NVM_DIR="$HOME/.nvm" && [ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh"
  - nvm install $NODE_VERSION
  - nvm use $NODE_VERSION
  - nvm alias default $NODE_VERSION

  - npm install -g react-native-cli
  - npm install -g detox-cli
  - npm install
  - cd ios; pod install; cd -;

script:
  - npm run e2e:ci
```

One last thing: add the command `e2e:ci` into your `package.json`. This command will build the application (`detox build`), run the tests (`detox test`), and close the emulator in order to finish the execution (`--cleanup` flag).

```jsx
{
  "scripts": {
    "e2e:test": "detox test -c ios.release",
    "e2e:build": "detox build -c ios.release",
    "e2e:ci": "npm run e2e:build && npm run e2e:test -- --cleanup"
  }
}
```

Once you pushed all the changes into your `master` branch, try to open a new pull request. You should see a new pull request checker has been added, which will call Travis, and this one runs the Detox tests.

![End-To-End PR Checker](https://i0.wp.com/blog.logrocket.com/wp-content/uploads/2019/10/e2e-pr-checker.png?resize=730%2C541&ssl=1)

[Here](https://travis-ci.org/EmaSuriano/e2e-react-native-detox/builds/585643904) is the link to the full log in Travis for that pull request.

## Closing words

In case you were thinking of adding tests to your React Native application, I highly encourage you to go and try Detox! Detox is an amazing end-to-end testing solution for mobile, and after using it for quite some time, these are the pros and cons:

- [✅](https://s.w.org/images/core/emoji/12.0.0-1/72x72/2705.png) Very well abstracted syntax for matchers and to trigger specific actions
- [✅](https://s.w.org/images/core/emoji/12.0.0-1/72x72/2705.png) Integration with Jest is just wonderful
- [✅](https://s.w.org/images/core/emoji/12.0.0-1/72x72/2705.png) Possibility to run tests in CI
- [❌](https://s.w.org/images/core/emoji/12.0.0-1/72x72/274c.png) Sometimes you might encounter configuration errors, and finding the proper solution may take some time. The best way to address this problem is to go and take a deep look at the [GitHub Issues](https://github.com/wix/Detox/issues)

Let’s keep building stuff together! [👷](https://s.w.org/images/core/emoji/12.0.0-1/72x72/1f477.png)

## References and further reading

- [Demo Repository](https://github.com/EmaSuriano/e2e-react-native-detox)
- [Detox Documentation](https://github.com/wix/Detox/blob/master/docs/README.md)
- [react-swipeable-views-native](https://github.com/oliviertassinari/react-swipeable-views)
- [react-native-cli](https://github.com/react-native-community/cli)
- [randomColor](https://github.com/davidmerfield/randomColor)
- [End-to-End Testing](https://www.tutorialspoint.com/software_testing_dictionary/end_to_end_testing.htm)
- [Wix Engineering](https://www.wix.engineering)

* * * 
**Editor's note:** Seeing something wrong with this post? You can find the correct version [here](https://blog.logrocket.com/end-to-end-testing-in-react-native-with-detox/).

## Plug: [LogRocket](https://logrocket.com/signup/), a DVR for web apps
 
![LogRocket Dashboard Free Trial Banner](https://i2.wp.com/blog.logrocket.com/wp-content/uploads/2017/03/1d0cd-1s_rmyo6nbrasp-xtvbaxfg.png?resize=1200%2C677&ssl=1)
 
[LogRocket](https://logrocket.com/signup/) is a frontend logging tool that lets you replay problems as if they happened in your own browser. Instead of guessing why errors happen, or asking users for screenshots and log dumps, LogRocket lets you replay the session to quickly understand what went wrong. It works perfectly with any app, regardless of framework, and has plugins to log additional context from Redux, Vuex, and @ngrx/store.
 
In addition to logging Redux actions and state, LogRocket records console logs, JavaScript errors, stacktraces, network requests/responses with headers + bodies, browser metadata, and custom logs. It also instruments the DOM to record the HTML and CSS on the page, recreating pixel-perfect videos of even the most complex single-page apps.
 
[Try it for free](https://logrocket.com/signup/).
* * *
The post [End-to-end testing in React Native with Detox](https://blog.logrocket.com/end-to-end-testing-in-react-native-with-detox/) appeared first on [LogRocket Blog](https://blog.logrocket.com).