Documentation on using w/ React Native's officially sanctioned Expo tooling

[jackkinsella]

I was unable to get Detox working with Expo (despite following what was written in this thread: #147). Now I am hoping for a little guidance from the Detox library maintainers–even just a few sample guidance files. I am aware that the Expo maintainers are aware of this issue too (expo/expo#424), but there doesn't seem to be any movement on their side.

Expo is now recommended on page 1 of the official Getting Started With React Native page,
so this requested documentation would be sure to cover an overwhelmingly common use-case.

Bonus points: Document using Expo with Jest, since Jest is the officially preferred testing toolkit, and I imagine most new React programmers will go with the flow.

[jackkinsella]

Some thoughts:

1. Ideally the Expo app shouldn't be installed again on every run (we want to speed up our tests)
2. Ideally the intro screen for Expo gets avoided (who wants to write tests that start by clicking through that stuff?)
3. Ideally we don't need the Expo server running (from npm start) in another tab

[DanielMSchmidt]

As far as I know you should be able to use the same build commands as in the build a standalone version of your app and use this as a command in the build part of the detox configuration and the rest should behave like normally.

I didn't test it out, but I will try to come up with an example and link it here.
You are absolutely right @jackkinsella we should provide some documentation on this, that would make a lot of sense 👍

[rotemmiz]

Not sure about running things with expo, but regarding 1, you can use detox test --reuse to avoid reinstalling the app on every run.

[jackkinsella]

Is there another way to specify --reuse, for example through the code in my setup-for-jest.js file?

I got the impression from your docs that detox was test runner agnostic, but upon trying the CLI tools, I saw fatal errors because I am using Jest for my tests instead of Mocha.

$ detox test
node_modules/.bin/mocha e2e --opts e2e/mocha.opts
/bin/sh: node_modules/.bin/mocha: No such file or directory
child_process.js:524
    throw err;
    ^

[brentvatne]

Hello! I have investigated this and learned the following:

e2e/init.js should install the app and dismiss the welcome popup

For example:

require('babel-polyfill');
const detox = require('detox');
const config = require('../package.json').detox;

before(async () => {
  await detox.init(config);

  let url = 'exp://exp.host/@notbrent/detox-testing';
  await device.relaunchApp({ url, sourceApp: 'host.exp.exponent' });

  await expect(element(by.label('Got it'))).toBeVisible();
  await element(by.label('Got it')).tap();
});

after(async () => {
  await detox.cleanup();
});

We need to make it possible to disable live reload by default

Detox works great currently against published apps (if you run exp publish and open that url), but it does not work in development unless you manually disable live reload. You could do this with detox test --reuse if you open the app first and disable live reload. If we supported an option like exp start --no-live-reload then it would be ideal. The reason is synchronization waits for onchange network request to finish.

Expo needs to support starting the app with live reload disabled -- this makes it so things don't work in dev. We will work on this, I created an issue to track it internally.

After that, it works as expected

It can be helpful though to use this little script to reload your app in beforeEach:

const { UrlUtils } = require('xdl');
let url;

module.exports = async function() {
  if (!url) {
    url = await UrlUtils.constructManifestUrlAsync(process.cwd());
  }
  await device.relaunchApp({ url, sourceApp: 'host.exp.exponent' });
}

You will need to yarn add xdl -D for this to work. It basically just gets your local development url automatically so you don't need to think about that.

[brentvatne]

Actually it's possible to simplify it a bit further, so we don't need to manually dismiss the welcome screen:

const { UrlUtils } = require('xdl');
let url;

module.exports = async function() {
  if (!url) {
    url = await UrlUtils.constructManifestUrlAsync(process.cwd());
  }
  await device.relaunchApp({
    url,
    sourceApp: 'host.exp.exponent',
    launchArgs: { EXKernelDisableNuxDefaultsKey: true },
  });
};

Perhaps the best approach for us then is to add support for a NSUserDefaults key that disables live reload.

[rotemmiz]

@brentvatne you can disable network sync to specific hosts.

by using

await device.setURLBlacklist(['.*exp.direct.*']);

at the beginning of your test suite, you can continue working with live reload (I'm pretty sure Detox will still be able to sync on all bundle load events, so there should be no problem)

[rotemmiz]

@brentvatne, do you think you can format this as a documentation section ? I'd love to add a "Using Expo" section to the readme.

[brentvatne]

thanks @rotemmiz -- that worked nicely :) I'll try to find time for that soon. for now I created the following repos:

• https://github.com/expo/with-detox-tests
• https://github.com/expo/detox-expo-helpers

[jackkinsella]

Thanks for the docs! I was able to get this working on my (jest) project with one modification:

Whenever I tried using the exp start system, the tests would time out, even if I set my timeouts for jest to 1,000,000,000,000. However, when I ran the same tests after launching expo using npm start, it worked perfectly. Perhaps this has something to do with me initialising react-native with create-react-native-app instead of with exp.

[brentvatne]

not sure I understand @jackkinsella -- you should start the packager with exp start before running tests. we could probably find a way to support an alternative but I don't have time for that at the moment

[jackkinsella]

This is going to seem wacky to you, but my experience was that it worked out exactly the opposite way around for me–i.e. exp start failed, but npm start worked.

I don't expect you to change anything–I'm only mentioning this for the benefit of any other lost souls who might bypass their troubles by switching to an alternative initialisation process. Trawling Github issue comments is my number one source of salvation these days, and I expect this is true for many other programmers too!

[brentvatne]

haha that is strange! if you can share your project, i'd be happy to investigate, feel free to add me to private repo.

[oshimayoan]

Hi @jackkinsella, would you mind to share how did you integrate jest and detox with CRNA?

I did try to integrate them using https://github.com/expo/detox-expo-helpers and https://github.com/grabbou/react-native-detox-example but still no luck.

Here is the repo for the project that I tried to use detox with jest: https://github.com/oshimayoan/try-detox
And here is the detox log:

dyld: Library not loaded: @rpath/XCTest.framework/XCTest
  Referenced from: /Users/Me/projects/try-detox/node_modules/detox/Detox.framework/Frameworks/EarlGrey.framework/EarlGrey
  Reason: image not found

[jackkinsella]

@brentvatne @oshimayoan - I created a bare-bones repo that should help answer both your questions https://github.com/jackkinsella/initialisationWoes

[oshimayoan]

Thanks for your respond but I still got the same error from tail:

dyld: Library not loaded: @rpath/XCTest.framework/XCTest
  Referenced from: /Users/Me/projects/initialisationWoes/node_modules/detox/Detox.framework/Frameworks/EarlGrey.framework/EarlGrey
  Reason: image not found

The expo just closed after it launched, do you have any idea?

[anton6]

@oshimayoan have you ever managed to that error resolved? I am getting same problem.

[oshimayoan]

@anton6 Not yet using CRNA, but I did on React Native.

[peterpme]

See #630

[ersinakinci]

I'm still getting timeouts. I've isolated the problem to Device.js when executing launchApp, which never finishes executing await this.deviceDriver.waitUntilReady();.

I dug into Detox's code enough to realize that it expects DetoxManager to return a ready signal via WebSocket, which it just never receives. That led me to another (possibly n00b) question: how the heck does DetoxManager get onto the simulator? Edit: didn't realize that it was literally magic (https://github.com/wix/detox/blob/master/detox/src/devices/AppleSimUtils.js#L243)

(Yes, I'm using the detox-expo-helpers package and running reloadApp(), as described in #630.)

[xcarpentier]

@earksiinni also fall into timeout...
maybe related: #740
xcode version: 9.4.1

[noomorph]

Closing this issue since Expo docs have been merged already in #630.