create-react-native-app: npm test always fails

Description

I want to run tests.

Expected Behavior

Tests succeed.

Observed Behavior

Tests always fail. With a variety of syntax errors.

Environment

Please run these commands in the project folder and fill in their results:

npm ls react-native-scripts: 0.0.28 & 0.0.29
npm ls react-native: 0.43.4
npm ls expo: 16.0.0
node -v: 6.10.3
npm -v: 3.10.10

Also specify:

Operating system: Xubuntu 17.4
Phone/emulator/simulator & version: Jest 19.0.2

Reproducible Demo

I got only one test, it’s the default test CRNA creates.

I try to run it with npm run test

I get SyntaxError: Unexpected token import in my own source files when I use this config:

"jest": {
  "preset": "jest-expo"
},

I get SyntaxError: Unexpected identifier on type ModuleConfig = [ in the react-native files when I use this config:

"jest": {
  "preset": "jest-expo",
  "transformIgnorePatterns": [
    "/node_modules/",
    "/src/"
  ]
},

I get SyntaxError: Unexpected token import on a react-native import in the expo package when I use this config:

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

I get SyntaxError: Unexpected token ) in the react-native packages jest setup when I use this config:

"jest": {
  "preset": "react-native",
  "transformIgnorePatterns": [
    "/node_modules/",
    "/src/"
  ]
},

About this issue

Original URL
State: closed
Created 7 years ago
Reactions: 8
Comments: 23 (11 by maintainers)

Most upvoted comments

try this:

"transformIgnorePatterns": [
      "node_modules/(?!(jest-)?react-native|react-navigation)"
 ]

+12

BANG88 on May 11, 2017

Oh sorry I should have read the original post more carefully, I jumped in half way.

What you’re seeing here is a quirk of how babel and jest work with react-native.

react-native has a culture of shipping raw source (in other words, not compiled with babel yet) and jest by default does not run all of the packages in node_modules through babel, in order to be faster.
react-native defaults to react-native-stage-0 if no .babelrc is present, whereas jest just assumes no babel config. Currently create-react-native-app deletes the .babelrc when you eject because it was assumed that it wasn’t needed due to the stage-0 default, but it should not do that because jest needs it.

So, you’ll need to install babel-preset-react-native and re-create .babelrc on an ejected project like so:

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

This is a bug that needs to be resolved, see #243

brentvatne on Jun 6, 2017

I was receiving a Syntax Error: Unexpected token import originating from react-navigation while attempting to run tests. After adding

"transformIgnorePatterns": [
  "node_modules/(?!(jest-)?react-native|react-navigation|other-problem-modules...)"
]

to the jest config in “package.json”, the react-navigation error was no longer reported. Instead, jest complained with an error similar to the one mentioned here (involving expo modules). This leads me to believe configuration settings in “package.json” override those in “jest-expo/jest-preset.json”. Is this what is happening?

I ended up having to copy the setting from “jest-preset.json” and include react-navigation:

"transformIgnorePatterns": [
  "node_modules/(?!(jest-)?react-native|react-navigation|react-clone-referenced-element|expo|@expo/*|exponent|@exponent/*)"
]

Is there a more appropriate way to accomplish this?

Palisand on Jun 21, 2017

it should work if you just remove the following entirely:

    "transformIgnorePatterns": [
      "node_modules/(?!react|@expo|expo)"
    ]

unless you are including another package that needs to be transpiled (see https://github.com/react-community/create-react-native-app/issues/199#issuecomment-307890700). nonetheless, I’m glad you found something that works

brentvatne on Jun 12, 2017

I would love some help on this too.

Jest keeps failing and displays this:

import type { NavigationAction } from './TypeDefinition';
    ^^^^^^
    
    SyntaxError: Unexpected token import
      
      at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:305:17)

I’ve tried the various methods listed here, but nothing works.

My package.json file:

"devDependencies": {

 "babel-cli": "^6.26.0",
    "babel-preset-flow": "^6.23.0",
    "babel-preset-react-native": "^4.0.0",
    "jest": "^21.2.1",
    "jest-expo": "^21.0.2",
    "react-native-scripts": "1.3.1",
    "react-test-renderer": "^16.0.0"
  },
  "main": "./node_modules/react-native-scripts/build/bin/crna-entry.js",
  "scripts": {
    "start": "react-native-scripts start",
    "eject": "react-native-scripts eject",
    "android": "react-native-scripts android",
    "ios": "react-native-scripts ios",
    "test": "node_modules/.bin/jest"
  },
  "jest": {
    "preset": "react-native"
  },
  "dependencies": {
    "axios": "^0.16.2",
    "expo": "^21.0.2",
    "firebase": "^4.5.1",
    "lodash": "^4.17.4",
    "moment": "^2.19.1",
    "react": "16.0.0-beta.5",
    "react-native": "0.48.4",
    "react-native-router-flux": "^4.0.0-beta.21",
    "react-native-spinkit": "^1.1.1",
    "react-redux": "^5.0.6",
    "redux": "^3.7.2",
    "redux-thunk": "^2.2.0"
  }

I’ve tried with the jest preset set to jest-expo as well, but no dice.

And my .babelrc file:

{
  "presets": ["babel-preset-expo", "react-native"],
  "env": {
    "development": {
      "plugins": ["transform-react-jsx-source"]
    }
  }
}

A funny thing that happens when I type npm ls --depth=1into the console is that I get a huge list of missing dependencies. But my project runs just fine. I’m not sure what’s up with that.

belaldabous on Oct 18, 2017

@brentvatne my babelrc is:

{
  "presets": [
    "babel-preset-expo",
  ],
  "env": {
    "development": {
      "plugins": [
        "transform-react-jsx-source",
      ]
    }
  }
}

I was able to fix the problem using a variation of @bang88 's approach:

  "jest": {
    "preset": "jest-expo",
    "transformIgnorePatterns": [
      "node_modules/(?!react|@expo|expo)"
    ]
  },

erhathaway on Jun 12, 2017