Cannot find module from 'react-native-implementation.js'

Question

I have the following Jest test:

import React from 'react';
import IndexSign from '../IndexSign';
import renderer from 'react-test-renderer';

it('renders correctly', () => {
  const tree = renderer.create(
    <IndexSign index={1}/>
  ).toJSON();
  expect(tree).toMatchSnapshot();
});

The IndexSign component that I am calling calls this StyleSheet component:

import {StyleSheet} from 'react-native';

export default StyleSheet.create({
  //some styles
});

For testing, I am using Gulp:

gulp.task('tests', () => {
    process.env.NODE_ENV = 'test';
    return gulp.src('src').pipe(jest({
    }));
});

The problem is that when I run this test, I get:

● Test suite failed to run

Cannot find module 'StyleSheet' from 'react-native-implementation.js'

  at Resolver.resolveModule (../node_modules/jest-resolve/build/index.js:142:17)
  at Object.StyleSheet (../node_modules/react-native/Libraries/react-native/react-native-implementation.js:98:25)
  at Object.<anonymous> (styles/Styles.js:5:13)

Any idea why this is happening?

Why is it searching for StyleSheet in react-native-implementation.js rather than react-native, which I imported?

And why can it not find StyleSheet?

Have you found a solution? Stumbled upon this as well

adrienharnay
– adrienharnay

2017-12-10 19:55:36 +00:00
Commented Dec 10, 2017 at 19:55 — adrienharnay
– adrienharnay, Commented Dec 10, 2017 at 19:55

Jimit Patel · Accepted Answer · 2018-09-07 07:30:04Z

17

I ran into the same issue. Adding

"jest": {
    "preset": "react-native"
},

in the package.json fixed the error for me.

Incase you are keeping separate config file like jest.config.js. Add preset in it. Checkout the sample config file

module.exports = {
  preset: 'react-native',
  setupFiles: ['<rootDir>/__test__/setup.js'],
  moduleNameMapper: {
    '\\.(css|less)$': 'identity-obj-proxy',
    '^.+\\.(jpg|jpeg|gif|png|mp4|mkv|avi|webm|swf|wav|mid)$': 'jest-static-stubs/$1'
  },
  globals: {
    __DEV__: true
  },
  collectCoverageFrom: [
    '**/src/**/*.{js,jsx}',
    '!**/src/**/style.js',
    '!**/src/**/index.js',
    '!**/src/theme/**',
    '!**/android/**',
    '!**/ios/**',
    '!**/node_modules/**',
    '!**/scripts/**',
    '!**/__test__/**'
  ],
  verbose: true,
  testPathIgnorePatterns: ['/node_modules/'],
  testResultsProcessor: 'jest-sonar-reporter',
  testURL: 'http://localhost/'
}

edited Sep 7, 2018 at 7:30

Jimit Patel

4,3072 gold badges39 silver badges60 bronze badges

answered Dec 15, 2017 at 6:12

koleary

1713 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

mcabe Over a year ago

if the project is created with react-native init this is done for you

parohy Over a year ago

project is craeted with react-native init and no change same error

Jimit Patel Over a year ago

I already have this setting in my package.json still it is giving error

Jimit Patel Over a year ago

Ok the project I am working on has separate jest.config.js file. In that when I mentioned preset, it started working. So please update answer with different scenarios that you are aware of.

Tyl · Accepted Answer · 2019-01-19 15:31:31Z

2

There are two ways of fixing this issue.
1. Make sure you don't have or delete any file called jest.config.js in your root folder.
2. If you want to have a custom jest.config.js file, make sure you have a preset node in it.
Like so：

 module.exports = {
    preset: "react-native",
    verbose: true,
  };

edited Jan 19, 2019 at 15:31

Tyl

5,28213 gold badges29 silver badges37 bronze badges

answered Jan 19, 2019 at 14:38

SirPhemmiey

6278 silver badges7 bronze badges

Comments

Sayantan Dey · Accepted Answer · 2019-05-06 04:58:14Z

I was facing the same problem. Now it is resolved.

My package.json looks like this :

{
  "name": "ReactNativeTDDStarterKit",
  "version": "0.0.1",
  "private": true,
  "scripts": {
  "start": "node node_modules/react-native/local-cli/cli.js start",
     "test": "jest"
   },
  "dependencies": {
     "react": "16.8.3",
     "react-native": "0.59.5"
   },
   "devDependencies": {
     "@babel/core": "7.4.4",
     "@babel/runtime": "7.4.4",
     "babel-jest": "24.8.0",
     "babel-preset-flow": "^6.23.0",
     "babel-preset-react-native": "4.0.0",
     "enzyme": "^3.3.0",
     "enzyme-adapter-react-16": "^1.1.1",
     "enzyme-to-json": "^3.3.1",
     "jest": "24.8.0",
     "metro-react-native-babel-preset": "0.54.0",
     "react-dom": "^16.8.6",
     "react-test-renderer": "16.8.3"
    },
    "jest": {
      "preset": "react-native",
      "snapshotSerializers": [
        "enzyme-to-json/serializer"
      ],
      "setupFiles": [
        "<rootDir>/jest/setup.js"
      ]
    }
  }

I am using react-native 0.59.5, I did not reset .babelrc or jest.config.js manually, I just installed the dependencies. It automatically generated presets for me after the installation is completed. My babel.config.js looks like :

module.exports = {
   presets: ['module:metro-react-native-babel-preset'],
};

I followed instructions from this Link

Collectives™ on Stack Overflow

Cannot find module from 'react-native-implementation.js'

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related