Integration with jest

[grabbou]

Hey,

Thanks for the library! I've managed to set it up with jest since that's the default runner in React Native.

I was wondering whether:
a) we should use jest by default since it's default for React Native (might be tricky to integrate with Wix infrastructure)
b) add an example to repo
c) write a blog post

I guess c will happen anyway tomorrow :)

[DanielMSchmidt]

Would love to see some documentation around it and an example, that would be cool 🎉

[talkol]

No real Wix-related objections with jest by default.. We actually use jest internally for all our unit tests now.

The only reason I waited with changing the defaults is because we don't have the runner requirements yet for running iOS and Android in parallel. For example, assume you want to mark some tests for iOS and some tests for Android. Maybe even use the RN convention of file extensions when you want to split behavior per platform. Once we have the requirements we'll need to see which runner supports them best and then we'll probably adopt it as the default

Awesome stuff though! Blog post will be amazing!

[rotemmiz]

The main difference between runners like Mocha or AVA to Jest is that they don't an expectation library bundled inside, they are solely test runners.
Detox has it's own expect object, which will override Jest's expect when running detox.init().

To sanely support Jest, and not confuse users, we would need to provide a way to control the the globals we export, maybe a different init function that doesn't do that, and let users import/require expect as they see fit.

[mobinni]

Hey there, I was able to setup Jest usage as well although it seemed a bit hacky. https://github.com/rangle/react-native-example/pull/19/files#diff-33b5654ffcc43d384eab9191d8b93768

[grabbou]

@rotemmiz the way I did it so far is that, inside init file of Jest, I detect whether I am running __tests__ folder or __e2e__ folder. If latter, I init detox. Developers are expecting Jest expect to be modified in the context of that folder. So as long as it's e2e folder, Jest becomes just a runner.

The benefit is that it's integrated testing environment and less dependencies to please my json

[samin]

@grabbou do you have an example?

[AlanFoster]

@samin I couldn't find the blog mentioned - but I did find a repository:

https://github.com/grabbou/react-native-detox-example

[rumax]

Maybe it would be even better to avoid integrated test runners at all? And instead: detox provides init, relaunchApp, by, element, etc. and it will be possible to use any runner on no runner, just some scripts.

[AlanFoster]

I am currently integrating detox onto a project right now; and everything worked great.

The steps I took were:

Updating the package.json file to add two entry points for running jest, for both unit and e2e tests separately:

  "scripts": {
    // Splitting out 'test' for unit tests by default, and 'test-e2e' for detox
    "test": "jest __tests__ --setupTestFrameworkScriptFile=./jest/setup-unit-tests.js",
    "test-e2e": "jest __e2e__ --setupTestFrameworkScriptFile=./jest/setup-e2e-tests.js --bail",
  },

  // Nothing additional required here - added only for visibility
  "jest": {
    "preset": "react-native",
    "transformIgnorePatterns": [
      "node_modules/(?!react-native|tcomb-form-native|react-navigation)"
    ]
  },

  // Adding the detox config
  "detox": {
    "configurations": {
      "ios.sim.debug": {
        "binaryPath": "ios/build/Build/Products/Debug-iphonesimulator/example.app",
        "build": "xcodebuild -project ios/example.xcodeproj -scheme example -configuration Debug -sdk iphonesimulator -derivedDataPath ios/build",
        "type": "ios.simulator",
        "name": "iPhone 7"
      }
    }
  }

The ./jest/setup-e2e-tests.js file looks like:

import detox from 'detox';
import packageFile from '../package.json';
const detoxConfig = packageFile.detox;

jasmine.DEFAULT_TIMEOUT_INTERVAL = 120000;

beforeAll(async () => {
  await detox.init(detoxConfig);
});

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

beforeEach(async () => {
  await device.reloadReactNative();
});

As well as dropping in a basic test within __e2e__/example.spec.js:

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

That was everything required to get jest + detox working; Just kick it off with npm run test-e2e and then the simulator etc opens up. I can run unit tests as normal via npm run test

[grabbou]

@AlanFoster yeah, I ended up not writing an article, but made an example in the repository. Also, I think that your example is similar to mine - happy to see we are both following in the right direction!

@rotemmiz I would be happy to chat the requirements in order to get such integration working w/o any hacks - hit me up on Slack.

[IkerArb]

How can I use the detox test --reuse command with jest? I don't want the app to be reinstalled each time but I don't know how to use this flag with jest

[stereodenis]

@AlanFoster how to choose detox configuration?

[isnifer]

@stereodenis detox test --configuration ios.sim.release for example :)

[stereodenis]

@isnifer it's for detox cli, but I wanted to know about jest

[isnifer]

@stereodenis I don't know how are you starting your tests with jest.
But I did simple omitBy to select configuration:

// ...
import { omitBy } from 'lodash'
import pkg from '../../../package.json'

const {
  PLATFORM = 'ios',
} = process.env

export default async function runnerDetox() {
  const configurations = omitBy(pkg.detox.configurations, (value, key) => (
    !key.startsWith(PLATFORM)
  )
  await detox.init({ configurations })

  // ...

}

My package.json

"detox": {
  "configurations": {
    "ios.sim.release": { ... },
    "android.emu.release": { ... }
  }
}

Sure, you can create something like this

[MoOx]

Maybe a simple section in the doc to say that there is nothing special to do according to #143 (comment) (except of normal jest usage?)

[tengrobert]

I would like to know the solution to the same problem as @IkerArb mentioned. Has anyone found yet? : )

[dariocravero]

@tengrobert @IkerArb the problem is that reuse isn't an API configuration but a CLI argument https://github.com/wix/detox/blob/d882d0e74174dfece282af66d91ad34b747fb770/detox/src/devices/Device.js#L28. Unfortunately jest fails if you use an unrecognised argument in the CLI, otherwise, you could just add --reuse to jest.

That line could be replaced by if (!argparse.getArgValue('reuse') || this._deviceConfig.reuse) { and then the config would look like:

  // Adding the detox config
  "detox": {
    "configurations": {
      "ios.sim": {
        "binaryPath": "example.app",
        "type": "ios.simulator",
        "name": "iPhone 7",
        "reuse": true
      }
    }
  }

That's the simplest without changing the code too much. Ideally, a global reuse: true sitting at the level of configurations would work better as it would be closer to how the CLI is instructed to work.

I don't have time to do a PR now, so feel free to submit one if everyone's happy either approach.

[sibelius]

jest-haste-map: watch error:
  SyntaxError: Unexpected string in JSON at position 4089
    at JSON.parse (<anonymous>)
    at module.exports (app/node_modules/metro-bundler/node_modules/jest-haste-map/build/worker.js:65:29)
    at Promise (app/node_modules/metro-bundler/node_modules/jest-haste-map/build/index.js:492:7)
    at Promise (<anonymous>)
    at _workerPromise.message (app/node_modules/metro-bundler/node_modules/jest-haste-map/build/index.js:491:7)
    at HasteMap._processFile (app/node_modules/metro-bundler/node_modules/jest-haste-map/build/index.js:404:42)
    at changeQueue.then (app/node_modules/metro-bundler/node_modules/jest-haste-map/build/index.js:705:32)
    at <anonymous>

anybody got this error?

[sonianin]

Is there a way to choose configuration when running tests with Jest?

[DanielMSchmidt]

@sonianin Not yet documented, but you could use environment variables to set the config and choose the right config by filtering the list of configurations by it in the setupTestFrameworkScriptFile, like in the solution @isnifer has shown