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

user_3122885 0
Viewed 7817

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?

gulp react-native jestjs javascript
3 Answers

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,
  };
user_54104480

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

user_72720270
Related