React Native Testing docs/setup appears to be broken

[jwhitley]

tl;dr: Setting up and running tests for a new React Native project appears to be broken when following the official documentation. The error received is at least superficially similar to #3999.

Repro steps

1. npm install -g react-native-cli
2. react-native install ReactNativeTesting
3. cd ReactNativeTesting

Now, following the instructions RN Testing docs (@ 0.21) and Jest Getting Started:

1. npm install --save-dev jest-cli
2. Update package.json per the Testing docs.
3. Add the sum.js file from Jest Getting started to the project root.
4. Likewise, add the sum-test.js file to <rootDir>/__tests__
5. npm test

Actual results

$ npm test

> [email protected] test /Users/whitley/src/ReactNativeTesting
> jest

Using Jest CLI v0.9.0, jasmine2

Error: Failed to build DependencyGraph: @providesModule naming collision:
  Duplicate module name: RelativeImageStub
  Paths: /Users/whitley/src/ReactNativeTesting/node_modules/react-native/Libraries/Image/RelativeImageStub.js collides with /Users/whitley/src/ReactNativeTesting/node_modules/jest-cli/src/HasteModuleLoader/__tests__/test_root/RelativeImageStub.js

This error is caused by a @providesModule declaration with the same name accross two different files.

This is most likely a setup or configuration issue. To resolve a module name collision, change or blacklist one of the offending modules. See http://facebook.github.io/jest/docs/api.html#config-modulepathignorepatterns-array-string
npm ERR! Test failed.  See above for more details.

Platform notes

React Native 0.20.0 and 0.21.0
node v5.5.0 (npm v3.3.12) and node v5.7.0 (npm v3.6.0)
Platform: OS X 10.11.3

Sample repo

I've created a sample repo with the major steps (r-n init, testing config, etc.) broken into separate commits. Please see jwhitley/ReactNativeTesting.

Notes

This sample does about the simplest thing possible in terms of its code. No ES6+, no import, no import/require of react-native (cf. #700), and so forth. Yet it's still breaking hard. There are very few public RN projects that appear to use any testing whatsoever, and each of those appears to have some different, cobbled-together solution to get tests running. Heck, I ran into one today trying to sort out my own First Test issues that had previously working tests and broke with this error. See benoitvallon/react-native-nw-react-calculator#22 for the PR that nominally fixed the issue for that repo. A similar change (jest testPathDirs and adding a rn-cli.config.js with a custom blacklist) wasn't ultimately effective in my case.

It seems that the official process for setting up and getting to First Test should, at minimum, be something that runs as a CI job against this repo. (e.g. using something similar to the repro steps outlined here.) Being unable to get any tests running is particularly frustrating.

Going a step further, as RN matures, I'd suggest baking in support for basic test setup into react-native init, preferably by default, possibly including an option to disable test scaffolding generation.

[ghost]

I build RN with Webpack and that too is devoid of tests. It'd be nice to see a focus on stabilization and encouraging best practices in the near future.

[brentvatne]

cc @cpojer

[cpojer]

@jwhitley I'm sorry, you unfortunately hit an issue with a transitive dependency that broke Jest yesterday. We just published a major update to Jest and redid the entire website ( http://facebook.github.io/jest/ ) on Friday as well and I'm currently rewriting the react-native documentation for Jest. Deleting node-haste and jest-cli from your node_modules and re-installing it should make the error that you saw go away.

Now that Jest 0.9.0 is done I will focus my efforts on improving Jest support for react-native, and as you suggested, we will include it in react-native init in the next few weeks :) We are committed at FB to make Jest+react-native work really well together.

[brentvatne]

Awesome stuff @cpojer :) ✋

[cpojer]

To unblock you, I recommend installing jest-cli 0.9.0 and babel-jest 9.0.1 with the babel-preset-react-native. See the Getting Started guide of Jest on how that works: http://facebook.github.io/jest/docs/getting-started.html#content please also remove the scriptPreprocessor in your Jest config, which is not needed any longer if you are using babel-jest.

I'll keep this issue open until I'm done rewriting the documentation both for react-native and until I added better documentation on RN testing to the Jest website. The react-native init work is tracked separately.

[jwhitley]

@cpojer Brilliant, that nails it. ❤️

I've pushed one additional commit to the sample repo mentioned above which applies your configuration changes. npm test now works as expected on master of that repo. It's great to see babel-preset-react-native being broken out as a first-class plugin. That's going to make a lot of folks lives easier with these alternate build workflows. Likewise for the react-native init updates.

Do you happen to know if there's a PR with corresponding updates to Testing.md in flight? If there is, I'll go review it. If not, I'd be happy to submit one to help out.

[cpojer]

Hey! Nothing yet (it's Sunday after all ;) ) but if you'd like to contribute a page on how to set up React-Native testing with Jest, that would be fantastic! I'm thinking of adding it to the Jest repo, see https://github.com/facebook/jest – the setup is the same as here, so just change the docs, npm start inside the website folder and see your changes live there :) If you want to contribute an example and a PR for Jest, that would be super awesome! Lastly, we should update the Testing.md file in this repo to link to the Jest website when that is integrated there :)

[slamus]

+1 for adding docs about testing in React-Native !

[ghost]

Hi There,

Has there been any changes on this? I am still getting mixed results using babel-jest and the react-native jest support.

Ciaran

[giantelk]

Can you tell what's causing this error:

Error: Cannot find module 'MyText' from 'MyText-test.js'
        at Resolver.resolveModule (node_modules/jest-cli/node_modules/jest-resolve/src/index.js:117:17)

Here's my package.json

{
  "name": "AwesomeProject",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest",
    "flow": "flow"
  },
  "dependencies": {
    "react": "^15.0.2",
    "react-native": "^0.26.2"
  },
  "devDependencies": {
    "babel-jest": "^9.0.0",
    "babel-preset-es2015": "*",
    "babel-preset-react": "*",
    "babel-preset-react-native": "*",
    "jest-cli": "^12.1.1"
  },
  "jest": {  
    "haste": {
      "defaultPlatform": "android",
      "platforms": [
        "ios",
        "android"
      ],
      "providesModuleNodeModules": [
        "react-native"
      ]
    },        
    "testPathIgnorePatterns": [
      "/node_modules/",
      "/android/",
      "/ios/",
      "/.idea/"
    ],    
    "testFileExtensions": [
      "js"
    ],
    "unmockedModulePathPatterns": [
      "<rootDir>/node_modules/react-native/",
      "<rootDir>/node_modules/react/",
      "<rootDir>/node_modules/react-dom/",
      "<rootDir>/node_modules/react-addons-test-utils/"
    ],    
    "verbose": true
  }
}

My test file:

// __tests__/MyText-test.js

'use strict';

jest
  .disableAutomock()
  .setMock('MyText', {})
  .setMock('React', {Component: class {}});

describe('JUNK MyText()', () => {

  it('MyText rubbish', () => {
    var retVal = "stuff";
    expect(retVal).toEqual("staf");
  });

});

BTW - if I use import MyText from '../src/shared/MyText'; in MyText-test.js, and comment out jest.disableAutomock() and the .setMock() calls the error is:

Runtime Error
  - ReferenceError: __DEV__ is not defined
        at Object.<anonymous> (node_modules/react-native/Libraries/react-native/react-native.js:15:5)

MyText.js uses `export default class MyText extends Component`.

[cpojer]

Thank you for your patience. We launched Jest 14.0 with experimental react-native support:

• Blog Post
• React-Native Tutorial

Please feel free to create new issues after trying out the new integration if any issues remain.