Jest: Cannot find module 'ReactNativeDefaultInjection' from 'setup.js'

Created on 2 Oct 2016  ·  41Comments  ·  Source: facebook/jest 
 FAIL  __tests__/App-test.js
  ● Test suite failed to run

    Cannot find module 'ReactNativeDefaultInjection' from 'setup.js'

      at Resolver.resolveModule (node_modules/jest-resolve/build/index.js:142:17)

Test Summary
 › Ran all tests.
 › 1 test suite failed, 0 tests passed (0 total in 1 test suite, run time 0.242s)
npm ERR! Test failed.  See above for more details.

here is my config of jest

  "jest": {
    "preset": "jest-react-native",
    "preprocessorIgnorePatterns": [
      "node_modules/(?!react-native|jpush-react-native)"
    ],
    "haste": {
      "defaultPlatform": "ios",
      "platforms": [
        "ios",
        "android"
      ]
    },
    "modulePathIgnorePatterns": [
      "react",
      "react-native"
    ],
    "moduleFileExtensions": [
      "js",
      "jsx"
    ],
    "collectCoverage": false,
    "verbose": true,
    "testPathIgnorePatterns": [
      "/node_modules/",
      ".+/(resources)/.+",
      ".+/(autoMockOff.js)"
    ]
  },

  "devDependencies": {
    "babel-jest": "^15.0.0",
    "babel-plugin-module-resolver": "^2.0.0",
    "babel-polyfill": "^6.16.0",
    "babel-preset-react-native": "^1.9.0",
    "babel-preset-react-native-stage-0": "^1.0.1",
    "jest": "^15.1.1",
    "jest-react-native": "^15.0.0",
    "react-test-renderer": "^15.3.2",
    "remote-redux-devtools": "^0.4.7"
  }

any idea?

picture shixukai
👍5

Most helpful comment

We had this issue to using [email protected], in our case was not installing the right version of react for react-native

We had this in our package.json

{
    "react": "^15.3.2",
    "react-native": "^0.37.0",
}

and doing a npm install gave us this output

[email protected] requires a peer of react@~15.3.1 but none was installed.

This was due react@^15.3.2 resolve to [email protected] due how npm semver works.

Setting the react version to react@~15.3.2 solved the issue. Change your package.json to look like this

{
    "react": "~15.3.2",
    "react-native": "^0.37.0",
}
picture orlando on 17 Nov 2016
👍8

All 41 comments

I add "setupFiles": ["./node_modules/react-native/jestSupport/env.js"] to jest, fix it, but here comes 

 FAIL  __tests__/App-test.js
  ● Test suite failed to run

    Cannot find module 'react-native-image-resizer' from 'FormCamera.js'

      at Resolver.resolveModule (node_modules/jest-resolve/build/index.js:142:17)
      at Object.<anonymous> (src/components/Form/FormCamera.js:4:30)
      at Object.<anonymous> (src/components/Form/index.js:3:29)

Test Summary
 › Ran all tests.
 › 1 test suite failed, 0 tests passed (0 total in 1 test suite, run time 1.721s)
npm ERR! Test failed.  See above for more details.

FormCamera.js

import React, { Component, PropTypes } from 'react';
import ProgressCircle from 'react-native-progress/Circle';
import ImagePreview from 'react-native-image-preview';
import ImageResizer from 'react-native-image-resizer';
...

.babelrc

{
  "presets": [ "react-native", "react-native-stage-0/decorator-support"],
  "plugins": [
    "transform-object-rest-spread",
    ["module-resolver", {
      "root": ["./"],
      "alias": {
        "src": "./src",
        "config": "./config"
      }
    }]
  ]
}
shixukai picture shixukai on 2 Oct 2016

Which version of react-native are you using?

cpojer picture cpojer on 3 Oct 2016

@cpojer 0.34.0

shixukai picture shixukai on 3 Oct 2016

Oh, remove the haste config from your Jest configuration. The jest-react-native preset brings this in automatically.

cpojer picture cpojer on 3 Oct 2016
👍4

I'm having the exact same issue. Here's my package.json:

"scripts": {
    "start": "react-native start",
    "test": "jest"
  },
  "jest": {
    "preset": "jest-react-native",
    "testPathDirs": ["./test/jest"]
  },
  "devDependencies": {
    "babel-core": "^6.14.0",
    "babel-preset-es2015": "^6.13.2",
    "babel-preset-react": "^6.11.1",
    "babel-preset-react-native": "^1.9.0",
    "babel-preset-stage-2": "^6.13.0",
    "babel-jest": "^15.0.0",
    "babelify": "^7.3.0",
    "browserify": "^13.1.0",
    "chai": "^3.5.0",
    "enzyme": "^2.4.1",
    "gsap": "^1.19.0",
    "gsap-react-plugin": "^1.0.2",
    "gulp": "^3.9.1",
    "gulp-browserify": "^0.5.1",
    "gulp-minify": "0.0.14",
    "gulp-sourcemap": "^1.0.1",
    "gulp-sourcemaps": "^1.6.0",
    "gulp-uglify": "^2.0.0",
    "gulp-watchify": "^0.6.0",
    "jasmine": "^2.4.1",
    "jasmine-jquery": "^2.1.1",
    "jsdoc": "^3.4.0",
    "karma": "^1.3.0",
    "karma-babel-preprocessor": "^6.0.1",
    "karma-browserify": "^5.1.0",
    "karma-chrome-launcher": "^1.0.1",
    "karma-firefox-launcher": "^1.0.0",
    "karma-html-reporter": "^0.2.7",
    "karma-jasmine": "^1.0.2",
    "karma-jasmine-html-reporter": "^0.2.0",
    "karma-jasmine-jquery": "^0.1.1",
    "karma-nyan-reporter": "^0.2.4",
    "karma-phantomjs-launcher": "^1.0.1",
    "karma-safari-launcher": "^1.0.0",
    "mocha": "^3.0.2",
    "pump": "^1.0.1",
    "radium": "^0.18.1",
    "react": "^15.3.2",
    "react-dom": "^15.3.1",
    "react-native-accordion": "^1.0.1",
    "react-native-collapsible": "^0.7.0",
    "react-native-mock": "^0.2.6",
    "sinon": "^1.17.6",
    "vinyl-buffer": "^1.0.0",
    "vinyl-source-stream": "^1.1.0",
    "watchify": "^3.7.0",
    "jest": "16.0.1",
    "jest-react-native": "^15.0.0",
    "react-test-renderer": "^15.3.2"
  }

Any idea why it's not working?

misaizdaleka picture misaizdaleka on 7 Oct 2016
👍2

you don't seem to have react-native as a dependency of your project.

cpojer picture cpojer on 7 Oct 2016

I have it, but not as dev dependency, just as regular dependency, samo as @shixukai.

misaizdaleka picture misaizdaleka on 7 Oct 2016

I did some more research and if I put my test in __ tests __ folder, everything works fine. However, when I move them to /test/jest, and add this param:

"testPathDirs": ["./test/jest"]

Then it starts failing with ReactNativeDefaultInjection error.

misaizdaleka picture misaizdaleka on 9 Oct 2016
👍3

This issue definitely seems to be caused by setting the testPathDirs config. Instead, you may want to try replacing it with testPathIgnorePatterns to get around the issue for now. It worked for me, but it's obviously not ideal.

For example, change "testPathDirs": ["src"] to "testPathIgnorePatterns": ["/node_modules/", "/example/", "/lib/"]

cooperka picture cooperka on 27 Oct 2016

That's actually correct, testPathDirs is the problem.

misaizdaleka picture misaizdaleka on 27 Oct 2016

Yes, testPathDirs is actually a different name for "roots". We should really rename this and fix it. Jest only looks in folders that are called "testPathDirs" and it doesn't look anywhere else.

cpojer picture cpojer on 28 Oct 2016

I am running into this issue also on this repo, however I have not defined testPathDirs or anything other than "preset": "jest-react-native".

This project doesn't have an index.ios.js or index.android.js since it's not an actual React Native app, but I can't imagine that's what's causing the issue.

I've written basic tests based on the example here and have named them with the ComponentName.test.js convention (the files are Button.test.js and TextInput.test.js). They show up in the test results, but they fail with the same error.

Cannot find module 'ReactNativeDefaultInjection' from 'setup.js'

Is there anything else which might cause this?

jasonmerino picture jasonmerino on 3 Nov 2016

@jasonmerino try jest@test

cpojer picture cpojer on 3 Nov 2016

When I npm i jest@test and npm test with that new version of jest I now get this message.

● The settings `scriptPreprocessor` and `preprocessorIgnorePatterns` were replaced by `transform` and `transformIgnorePatterns` which support multiple preprocessors.

  Jest now treats your current settings as:

    "transform": {".*": "undefined"}
    "transformIgnorePatterns": "node_modules/(?!(jest-)?react-native|react-clone-referenced-element)"

  Please update your configuration.

  Jest changed the default configuration for tests.

  Configuration Documentation: https://facebook.github.io/jest/docs/configuration.html
  Jest Issue Tracker: https://github.com/facebook/jest/issues

Which is strange since the only configuration I have in the package.json is the preset. Could there be another piece of config hiding elsewhere in the project?

jasonmerino picture jasonmerino on 3 Nov 2016

You also need jest-react-native@test

cpojer picture cpojer on 3 Nov 2016

Okay, I did npm i jest-react-native@test and npm test again and I'm back to the original error I had (Cannot find module 'ReactNativeDefaultInjection' from 'setup.js') without the previous warning message about jest settings.

Here's the output from my npm i

npm WARN deprecated [email protected]: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
[email protected] /Users/jason.merino/Code/react-native-splat
├── UNMET PEER DEPENDENCY [email protected]
├── [email protected]  extraneous
└── [email protected]  extraneous

npm WARN [email protected] requires a peer of eslint-plugin-import@^1.16.0 but none was installed.
npm WARN [email protected] requires a peer of eslint-plugin-import@^1.16.0 but none was installed.

So it looks like I'm getting the test versions of jest and jest-react-native.

jasonmerino picture jasonmerino on 3 Nov 2016

+1 I have the same issue.

shahen94 picture shahen94 on 13 Nov 2016

Oh man, i figured this out.
We need to install react as dependency or devDependency.
🎉
Cheers !

shahen94 picture shahen94 on 13 Nov 2016
👎3

We had this issue to using [email protected], in our case was not installing the right version of react for react-native

We had this in our package.json

{
    "react": "^15.3.2",
    "react-native": "^0.37.0",
}

and doing a npm install gave us this output

[email protected] requires a peer of react@~15.3.1 but none was installed.

This was due react@^15.3.2 resolve to [email protected] due how npm semver works.

Setting the react version to react@~15.3.2 solved the issue. Change your package.json to look like this

{
    "react": "~15.3.2",
    "react-native": "^0.37.0",
}
orlando picture orlando on 17 Nov 2016
👍8

even
{
"react": "^15.4.0",
"react-native": "^0.37.0",
}
it doesnt work .

tianwawawa picture tianwawawa on 22 Nov 2016

This problem occured to me once i upgraded to node from 6 to 7.1.0 and jest to 17.
It works for me with the following deps:

    "react": "15.3.2",
    "react-dom": "^15.4.0", -- yes, for some reason, it needs react-dom
    "babel-jest": "^17.0.2",
    "babel-preset-react-native": "^1.9.0",
    "jest": "^17.0.3",
    "jest-react-native": "^17.0.3"
carera picture carera on 22 Nov 2016

This is happening to me with 

    "react": "~15.4.0-rc.4",
    "react-native": "~0.38.0",

    "babel-eslint": "~6.1.2",
    "babel-jest": "~17.0.2",
    "babel-preset-react-native": "~1.9.0",
    "eslint": "~3.4.0",
    "eslint-plugin-react": "~6.2.0",
    "jest": "~17.0.3",
    "jest-react-native": "~17.0.3",
    "react-test-renderer": "~15.4.0"

but only on my CircleCI VM... locally everything runs fine.

cosmith picture cosmith on 24 Nov 2016
👍4

this issue happened to me after upgrading react-native to 0.38 and react to 15.4.1

it was fine using react-native 0.33 and react ~15.3.0

@carera installing react-dom doesn't help

ColCh picture ColCh on 25 Nov 2016
👍1

Can someone confirm? ln -s node_modules/react node_modules/React has fixed for me.
I have case-sensitive filesystem on my Mac, so calls like require('React'); are invalid (require('react'); is ok)

@Richard-Cao you've mention that on your local PC all is fine, and it breaks on CI server. May be it because You have case-INsensitive FS on local PC, and Linux FX is case-sensitive?

ColCh picture ColCh on 25 Nov 2016

Sorry for triple comment.
This is not a Jest issue, I guess It's React issue. React and Haste *

let me explain a bit
require('React') is actually handled by Haste loader, by @providesModule React directive.

Where it's located:
Source code:
src/isomorphic/React.js
https://github.com/facebook/react/blob/c78464f8ea9a5b00ec80252d20a71a1482210e57/src/isomorphic/React.js#L9
Transpiled version: node_modules/react/lib/React.js

I've installed some last versions one-by-one, and this directive was suddendly disappear from transpiled code, throwing error from Haste, which can't resolve React to node_modules/react.

Versions and directive existence:

| Version | Has Haste directive |
|-------------|---------------------|
| 15.3.2 | Yes |
| 15.4.0-rc.1 | Yes |
| 15.4.0-rc.2 | Yes |
| 15.4.0-rc.3 | No |
| 15.4.0-rc.4 | No |
| 15.4.0 | No |
| 15.4.1 | No |

What was happen with transpiled source at 15.4.0-rc.2 -> 15.4.0-rc.3 version bump? I dunno...

So. For now, I have react-native 0.38 installed, and

npm WARN [email protected] requires a peer of react@~15.4.0-rc.4 but none was installed.

And react@~15.4.0-rc.4 don't hase Haste directive -> tests are broken...

What to do?

  1. Rollback react to 15.4.0-rc.2 or 15.3.2 and wait for fix
  2. See Red CI servers and wait for fix...
  • actually, react-native packager forms bundle successfully... and Jest can't find react module O_O very strange...
ColCh picture ColCh on 25 Nov 2016
😕2 👍1

jest-react-native was fully merged into react-native. Simply changing your Jest config to "preset": "react-native" when using RN 0.38+ should work.

We haven't forwarded jest-react-native to react-native yet, unfortunately. cc @kentaromiura

cpojer picture cpojer on 29 Nov 2016

I'll update jest-react-native today to forward to react-native. I'm also updating Jest's documentation to hint that you won't need jest-react-native any longer as the default setup with 0.38 includes a working Jest configuration.

I'm sorry that this was a problem for people. I was on vacation and we were unable to update jest-react-native previously.

See #2182.

cpojer picture cpojer on 29 Nov 2016

Hey @cpojer, I'm also stumbling into an issue since updating, but it's throwing this issue:
`test suite failed to run

ENOENT: no such file or directory, stat '/Users/projects/git/test-app/node_modules/react-native/jest/setup.js'
    at Error (native)`

is this the same issue? Furthermore, I'm under the impression that updating to latest React and React-native is causing other issues as you can see at the bottom of this thread (https://github.com/facebook/react-native/issues/4968), so I think I'll have to stick with older versions until issues with react + react-native are resolved as well?

Kind regards,

JeroenNelen picture JeroenNelen on 29 Nov 2016

@JeroenNelen actually, issue You've linked ( https://github.com/facebook/react-native/issues/4968 ), comes from npm - it has a bug with installing dependencies. Please refer to https://github.com/npm/npm/issues/12654 . How to deal with this bug : personally, I don't use devDependencies, I store all your dependencies into dependencies.That's how I resolved it.

React-native is rapidly changing, probably sticking with old releases is not very good... But who knows, may be old RN version will work for someone!

ColCh picture ColCh on 29 Nov 2016

@JeroenNelen If you are using react-native prior to 0.38, use jest-react-native locked to version 17.0.3 or lower. If you are using 0.38, use react-native as preset or install 17.1.0 of jest-react-native which will continue to work (and forward) to react-native for a while.

cpojer picture cpojer on 29 Nov 2016
👍5

Hey, @cpojer, after updating I'm getting an error that seems to be related to mocking of native modules. Do I need to manually mock it?

In one of my files I have:

export const STATUS_BAR_HEIGHT = (StatusBar.currentHeight || 0);

When I run the tests it gives this error, which seems to be because StatusBarManager is undefined (here)

TypeError: Cannot read property 'HEIGHT' of undefined      
  at Object.<anonymous> (node_modules/react-native/Libraries/Components/StatusBar/StatusBar.js:395:1823)
  at Object.StatusBar (node_modules/react-native/Libraries/react-native/react-native.js:55:24)
mlanter picture mlanter on 29 Nov 2016
👍1

Yeah, we moved to more explicit mocks and StatusBar might simply not be mocked properly. See https://github.com/facebook/react-native/blob/master/jest/setup.js#L69 – you can send a PR to RN to fix this and meanwhile you can probably add this mock manually a file that you add to setupFiles.

cpojer picture cpojer on 29 Nov 2016
👍3

@cpojer What you suggested works great! We are on react-native 0.38 & setting the jest preset to react-native fixed the issue on Travis (it was failing on linux).

manosim picture manosim on 29 Nov 2016

When I typed 'npm run jest' I got this error.

'Invariant Violation: Native module cannot be null.'

After updating react-native version(0.38), I got this error.
Who dose someone know how to solve it?

MechanicKim picture MechanicKim on 2 Dec 2016

@MechanicKim you'll need to post a stack trace for us to know which module is causing the problem, but a change similar to this one will probably be needed to properly mock the native module.

cooperka picture cooperka on 2 Dec 2016

@cooperka Thank you for your comment.

In package.json
"dependencies": {
"clamp": "^1.0.1",
"react": "^15.4.1",
"react-native": "^0.38.0",
"react-native-button": "github:ide/react-native-button",
"react-native-drawer": "^2.2.2",
"react-native-router-flux": "file:../"
},
"devDependencies": {
"babel-jest": "^17.0.2",
"babel-preset-react-native": "^1.9.0",
"jest": "^17.0.3",
"jest-react-native": "^17.0.3",
"react-test-renderer": "^15.4.1",
"sane": "^1.3.4"
},
"jest": {
"preset": "react-native"
}

Test file
import 'react-native';
import React from 'react';

import Example from '../Example';
jest.unmock('Image');

import renderer from 'react-test-renderer';

describe('Example', () => {
it('renders correctly', () => {
const tree = renderer.create(

).toJSON();
expect(tree).toMatchSnapshot();
});
});

I found the reason. The reason is because of Example.js
In Example.js file, Some import lines are like this.

import XXX from './components/XXX';

When I removed these lines, I could pass jest.

MechanicKim picture MechanicKim on 2 Dec 2016

So I am on the latest versions of React and React-native and the following versions of jest:

However, I'm bumping into the Invariant Violation as well, mostly due to the react-native-experimental-navigation it seems (I'm using react-native-router-flux):

 Invariant Violation: Native module cannot be null.

      at invariant (node_modules/fbjs/lib/invariant.js:38:15)
      at Linking.NativeEventEmitter (node_modules/react-native/Libraries/EventEmitter/NativeEventEmitter.js:32:1)
      at new Linking (node_modules/react-native/Libraries/Linking/Linking.js:119:141)
      at Object.<anonymous> (node_modules/react-native/Libraries/Linking/Linking.js:191:16)
      at Object.Linking (node_modules/react-native/Libraries/react-native/react-native.js:91:22)
      at Object.<anonymous> (node_modules/react-native-experimental-navigation/NavigationRootContainer.js:15:36)

When trying to mock:
jest.mock('react-native-experimental-navigation', () => 'Mocked');

It still throws the error.
@MechanicKim , I also have imports like that, to import the container or component that I want to test, so I don't see how I can remove those imports and still test the code?

Anyone any suggestion or idea?

Kind regards,

JeroenNelen picture JeroenNelen on 5 Dec 2016

I think this page is useful for you.

https://github.com/facebook/jest/issues
https://github.com/facebook/jest/issues/2208

I have not tested yet.
I succeed when I used 'react-native 0.37' and 'jest 17.0.3'

"react": "15.3.1",
"react-native": "0.37.0",

"babel-jest": "^17.0.2",
"babel-preset-react-native": "^1.9.0",
"jest": "17.0.3",
"jest-react-native": "17.0.3",
"react-test-renderer": "15.3.0",

and jest preset is 'jest-react-native'

But, If you use react-native >= 0.38, you should fix 'jest-react-native'
--> 'react-native'

2016-12-05 18:52 GMT+09:00 JeroenNelen notifications@github.com:

So I am on the latest versions of React and React-native and the following
versions of jest:

However, I'm bumping into the Invariant Violation as well, mostly due to
the react-native-experimental-navigation it seems (I'm using
react-native-router-flux):

Invariant Violation: Native module cannot be null.

  at invariant (node_modules/fbjs/lib/invariant.js:38:15)
  at Linking.NativeEventEmitter (node_modules/react-native/Libraries/EventEmitter/NativeEventEmitter.js:32:1)
  at new Linking (node_modules/react-native/Libraries/Linking/Linking.js:119:141)
  at Object.<anonymous> (node_modules/react-native/Libraries/Linking/Linking.js:191:16)
  at Object.Linking (node_modules/react-native/Libraries/react-native/react-native.js:91:22)
  at Object.<anonymous> (node_modules/react-native-experimental-navigation/NavigationRootContainer.js:15:36)

When trying to mock:
jest.mock('react-native-experimental-navigation', () => 'Mocked');

It still throws the error.
@MechanicKim https://github.com/MechanicKim , I also have imports like
that, to import the container or component that I want to test, so I don't
see how I can remove those imports and still test the code?

Anyone any suggestion or idea?

Kind regards,

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/facebook/jest/issues/1840#issuecomment-264810632, or mute
the thread
https://github.com/notifications/unsubscribe-auth/ALlkF7fKftElpPNyLMgQLpJR6PuCTKThks5rE97RgaJpZM4KL8lY
.

MechanicKim picture MechanicKim on 5 Dec 2016
👍1

@JeroenNelen this comment should fix your issue: https://github.com/facebook/jest/issues/2208#issuecomment-264733133. If you're feeling generous, you can contribute by making a PR similar to this one that fixes the issue for everyone else, too.

cooperka picture cooperka on 5 Dec 2016
👍1

@cooperka @MechanicKim that indeed solves the navigation issue in the tests! Thanks!

JeroenNelen picture JeroenNelen on 5 Dec 2016

@mlanter @cpojer I created a PRQ to react-native to improve upon the statusBarManager mock, as I have some code that uses functions of the statusBarManager for which the tests are failing because they are not found (I was using setHidden, setStyle and SetNetwork...):
https://github.com/facebook/react-native/pull/11322

JeroenNelen picture JeroenNelen on 6 Dec 2016
Was this page helpful?
0 / 5 - 0 ratings

Related issues

Secretmapper picture Secretmapper  ·  3Comments
mmcgahan picture mmcgahan  ·  3Comments
StephanBijzitter picture StephanBijzitter  ·  3Comments
rosiakr picture rosiakr  ·  3Comments
nsand picture nsand  ·  3Comments