Jest errors without .babelrc React Native errors with it

Question

In a nutshell my existing React Native app works without a .bablerc, I can only get Jest working with a .babelrc (since I use es6 syntax), and once I add the .babelrc my react native app breaks with the following error.

After adding .babelrc I see several [BABEL] notes in my react-native server that aren't there without the .babelrc. Here is one example (I removed path before node_modules) although I don't think this is a problem

[BABEL] Note: The code generator has deoptimised the styling of "/node_modules/react-native-htmlview/vendor/htmlparser2.js" as it exceeds the max of "100KB".

Is there a way to isolate the "react-native" .babelrc presets to only run with jest? Is there an easier solution I'm missing to get both jest and react native to work side by side? Are there additional presets in .babelrc I need for react native to be transpiled properly?

I'm on react native 0.29.0 and here is my .babelrc and package.json

.babelrc

 {
     "presets": ["react-native"] 
 }

package.json

{
  "name": "MyApp",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "test": "jest",
    "start": "node node_modules/react-native/local-cli/cli.js start",
  },
  "dependencies": {
    "base-64": "^0.1.0",
    "keymirror": "^0.1.1",
    "lodash": "^4.13.1",
    "moment": "^2.13.0",
    "ramda": "^0.21.0",
    "react": "^15.1.0",
    "react-native": "^0.29.0",
    "react-native-animatable": "^0.6.1",
    "react-native-button": "^1.6.0",
    "react-native-collapsible": "^0.7.0",
    "react-native-cookies": "git://github.com/sdg9/react-native-cookies",
    "react-native-drawer": "^2.2.3",
    "react-native-htmlview": "^0.5.0",
    "react-native-material-design": "^0.3.6",
    "react-native-material-kit": "^0.3.2",
    "react-native-router-flux": "^3.30.0",
    "react-native-scrollable-tab-view": "^0.5.2",
    "react-native-shared-preferences": "0.0.5",
    "react-native-simple-store": "^1.0.1",
    "react-native-spinkit": "^0.1.2",
    "react-native-swiper": "^1.4.5",
    "react-native-vector-icons": "^2.0.3",
    "react-redux": "^4.4.5",
    "react-thunk": "^1.0.0",
    "redux": "^3.5.2",
    "redux-actions": "^0.10.0",
    "redux-logger": "^2.6.1",
    "redux-thunk": "^2.1.0",
    "tcomb-form-native": "^0.5.1",
    "underscore": "^1.8.3"
  },
  "devDependencies": {
    "babel-eslint": "^6.1.2",
    "babel-jest": "^13.2.2",
    "babel-polyfill": "^6.9.1",
    "eslint": "^3.0.1",
    "eslint-plugin-react": "^5.2.2",
    "eslint-plugin-react-native": "^1.1.0",
    "flow-bin": "^0.28.0",
    "jest-cli": "^13.2.3",
    "regenerator": "^0.8.46",
    "regenerator-runtime": "^0.9.5",
    "remote-redux-devtools": "^0.3.3"
  },
  "jest": {
    "haste": {
      "defaultPlatform": "ios",
      "platforms": [
        "ios",
        "android"
      ],
      "providesModuleNodeModules": [
        "react-native"
      ]
    }
  }
}

Michael Helvey Michael Helvey · Accepted Answer · 2016-07-14T15:11:47

For RN, Jest runs your code through a slightly tweaked pre-processor that's specific to Jest (i.e. not quite the same thing that RN uses to build the app). This preprocessor ships with RN in the jestSupport/ directory, and you should specify it in your Jest configuration:

...
"scriptPreprocessor": "node_modules/react-native/jestSupport/preprocessor.js",
"setupEnvScriptFile": "node_modules/react-native/jestSupport/env.js",
"haste": {
....

I've just tested on RN 0.29 and Jest CLI 13.0.0, and my tests compile just fine with this configuration in my package.json, and a .babelrc that matches what you've put in the question.

Also, by the way, if you specify this preprocessor, you actually shouldn't need the .babelrc to run the tests.

Jest errors without .babelrc React Native errors with it

1 Answers