Intro to Detox and Expo

Links

Setup guide can be found here

Prereqs

Ensure Node is 8.3.0 or higher.

Install applesimutils:

brew tap wix/brew
brew install applesimutils
copy

Install detox-cli:

npm install -g detox-cli
copy

Getting Started

1. Yarn add

yarn add detox detox-expo-helpers expo-detox-hook
copy

2. Add the following to package.json

"detox": {
  "configurations": {
    "ios.sim": {
      "binaryPath": "bin/Exponent.app",
      "type": "ios.simulator",
      "name": "iPhone 7"
    }
  }
}
copy

…and to the scripts object:

"scripts": {
    "e2e": "detox test --configuration ios.sim"
}
copy

3. Download IPA

Fetch the IPA file from here

4. Copy e2e files

Fetch/copy files from Github

Using Detox

A basic example of incorporating some useful detox calls:

const { reloadApp } = require('detox-expo-helpers');

describe('Login flow', () => {
  beforeEach(async () => {
    await reloadApp();
  });

  it('should login successfully', async () => {
    await device.reloadReactNative();
    await expect(element(by.id('email'))).toBeVisible();

    await element(by.id('email')).typeText('john@example.com');
    await element(by.id('password')).typeText('123456');
    await element(by.text('Login')).tap();

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

The element can be selected by making the most of using the testId — for example, the following test button has ID hello_button:

<TouchableOpacity
  testID="hello_button"
  onPress={this.onButtonPress.bind(this, 'Hello')}
>
  <Text style={{ color: 'blue', marginBottom: 20 }}>Say Hello</Text>
</TouchableOpacity>
copy

Running the tests

Finally, to run the test we can run yarn start in one terminal and yarn e2e on the other to run the e2e script. Note that you need to have live reload disabled, so better to also put the app into production mode before running the e2e tests. This can be done from the terminal following the instructions to set production mode.

Notes

You may need to add the --reuse flag to the e2e script. At the time of writing, the current version 0.55 is having issues on iOS with hanging. The requirement at the moment is that you have to open and close the Expo window. See this GitHub issue for more info.