React Native - Jest: Broken since update to 0.56. How to fix it?

Question

Ever since upgrading to the new React Native version my tests are broken.

Environment

Here is my environment:

React Native Environment Info:
System:
  OS: macOS High Sierra 10.13.4
  CPU: x64 Intel(R) Core(TM) i7-7920HQ CPU @ 3.10GHz
  Memory: 486.81 MB / 16.00 GB

  Shell: 3.2.57 - /bin/bash
Binaries:
  Node: 9.4.0 - /usr/local/bin/node
  npm: 6.1.0 - /usr/local/bin/npm
  Watchman: 4.9.0 - /usr/local/bin/watchman
SDKs:
  iOS SDK:
    Platforms: iOS 11.4, macOS 10.13, tvOS 11.4, watchOS 4.3
IDEs:
  Android Studio: 3.1 AI-173.4697961
  Xcode: 9.4.1/9F2000 - /usr/bin/xcodebuild
npmPackages:
  react: 16.4.1 => 16.4.1
  react-native: 0.56.0 => 0.56.0
npmGlobalPackages:
  create-react-native-app: 1.0.0
  react-native-cli: 2.0.1
  react-native-git-upgrade: 0.2.7

Description

While trying to test my newly created action creators,npm test throws the following error:

jest

 FAIL  app/actions/logout/logout.test.js
  ● Test suite failed to run


    Plugin 0 specified in "/Users/jan/Startup/react-native/ordersome/node_modules/babel-preset-react-native/index.js" provided an invalid
property of "default" (While processing preset: "/Users/jan/Startup/react-native/ordersome/node_modules/babel-preset-react-native/index.js
")

      at Plugin.init (node_modules/babel-core/lib/transformation/plugin.js:131:13)
      at Function.normalisePlugin (node_modules/babel-core/lib/transformation/file/options/option-manager.js:152:12)
      at node_modules/babel-core/lib/transformation/file/options/option-manager.js:184:30
          at Array.map (<anonymous>)
      at Function.normalisePlugins (node_modules/babel-core/lib/transformation/file/options/option-manager.js:158:20)
      at OptionManager.mergeOptions (node_modules/babel-core/lib/transformation/file/options/option-manager.js:234:36)
      at node_modules/babel-core/lib/transformation/file/options/option-manager.js:265:14
      at node_modules/babel-core/lib/transformation/file/options/option-manager.js:323:22
          at Array.map (<anonymous>)
      at OptionManager.resolvePresets (node_modules/babel-core/lib/transformation/file/options/option-manager.js:275:20)

I have googled heavily and can't find a fix. It seems like it has something to do with babel.

Reproducible Demo

It's easy to reproduce (currently). I tried an started a new project using react-native init. Then I just created a random .test.js file and wrote the getting started test of the documentation in it:

function sum(a, b) {
  return a + b;
}

test("adds 1 + 2 to equal 3", () => {
  expect(sum(1, 2)).toBe(3);
});

Next I run 'npm test' and it gives the error above.

Maybe you are missing some babel plugins `"@babel/plugin-transform-runtime"` — Hackerman, Jul 05 '18 at 18:03
It's because I think that the latest version of `Jest` uses another version of `babel` that breaks the application. — Hackerman, Jul 05 '18 at 18:37

Kanekotic · Answer 1 · 2018-07-28T17:41:00.380

9

@J. Hesters solution is almost correct. But is not necesary to install babel, just adding the transform solves the issue.

{
  ...
  "jest": {
    "preset": "react-native",
    "transform": {
      "^.+\\.js$": "<rootDir>/node_modules/react-native/jest/preprocessor.js"
    }
  }
  ...
}

My previous response has some side effects that i did not see until after trying to rebuild the entire react-native application. So please dont use it.

PREVIOUS ANSWER

is actually nothing to do with react-native 0.56. is caused by the babel presets 5, just revert this package will do the trick.

yarn add babel-preset-react-native@4.0.0

edited Jul 28 '18 at 17:41

answered Jul 24 '18 at 08:00

Kanekotic

2,824
3
21
35

1

Anybody else stuck in an update loop with Jest tests? I downgrade to 4.0 and break RN. Look up that error it says to upgrade to 5.0 so I do that and break Jest. Look that error and downgrade to 4.0 and break RN.. etc.. etc.. – calcazar Oct 19 '18 at 15:36
Where is is this code supposed to do? What file? package.json or .babelrc ? or something?! – Stein G. Strindhaug Jan 11 '19 at 12:36
1

where you have your jest configuration. in my case is package.json. https://jestjs.io/docs/en/configuration.html – Kanekotic Jan 11 '19 at 12:39
with that link, you can also understand better what transform does. – Kanekotic Jan 11 '19 at 12:58

J. Hesters · Accepted Answer · 2018-07-25T13:33:59.950

Here is how I fixed it.

Add

"@babel/core": "^7.0.0-beta.47",
"babel-core": "^7.0.0-beta.47",

to your package.json and run npm install. This fixed it for me.

Furthermore for Enzyme you will have to add

   "transform": {
      "^.+\\.js$": "<rootDir>/node_modules/react-native/jest/preprocessor.js"
    }

to you jest config in your package.json.

If you want to see a more thorough fix, check out this github issue.

score 2 · Answer 3 · answered Aug 23 '18 at 10:05

I had the same mistake, and also I added:

"transform": {
      "^.+\\.js$": "<rootDir>/node_modules/react-native/jest/preprocessor.js"
    }

But then I got another mistake in another module, and to ignore it you need to add this code to your setup.jest.js file:

jest.mock('react-native-router-flux', () => {
    return {
        Crashlytics: {
            crash: () => {},
        },
        Answers: {
            logCustom: () => {},
            logContentView: () => {},
        },
    }

So after this code jest will ignore error in "react-native-router-flux" module in your tests.

score 0 · Answer 4 · answered Jul 06 '18 at 07:04

0

The problem is with 0.56.0.

The only solution is running it with v0.55.4

either install the v0.55.4 by: npm i --save react-native@0.55.4

or when running the app run by: react-native run-android --version 0.55.4

This helped me, hope it helps

answered Jul 06 '18 at 07:04

Sanchit Bhatnagar

874
2
10
16

I think you meant `react-native init appname --version 0.55.4` not `run-android`. That init command worked for me. – Flacito Jul 16 '18 at 00:48
init appname thing is when you want to create the app in that version... But if the app already has specified version then running in a Specific version can be done by that, I just gave to ways to go about it – Sanchit Bhatnagar Jul 28 '18 at 06:47
Downgrade React Native yes that's definitely not the solution and the rest of this answer is unrelated. – arled Mar 24 '19 at 14:50

React Native - Jest: Broken since update to 0.56. How to fix it?

Environment

Description

Reproducible Demo

4 Answers4

Linked