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

[kay-is]

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:

1. Operating system: Xubuntu 17.4
2. 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/"
  ]
},

[bang88]

try this:

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

[kay-is]


FAIL ./App.test.js
● Test suite failed to run

..../mobile-app/node_modules/expo/src/Expo.js:6
import { NativeModules } from 'react-native';
^^^^^^

SyntaxError: Unexpected token import

at transformAndBuildScript (node_modules/jest-runtime/build/transform.js:321:12)
at Object. (src/components/shared/Screen.js:5:11)
at Object. (src/components/Home/index.js:2:13)


Didn't work :/

[anp]

On a fresh project with this jest config:

  "scripts": {
...
    "test": "node node_modules/jest/bin/jest.js --watch"
  },
  "jest": {
    "preset": "jest-expo"
  },

I'm able to run tests without problems. Can you paste your full package.json?

EDIT: Can you also paste the line from your own code that's causing the transform error with the default config?

[kay-is]

I just created a new project and ejected.

package.json

{
  "name": "mobile-app",
  "version": "0.1.0",
  "private": true,
  "devDependencies": {
    "jest-expo": "~1.0.1",
    "react-test-renderer": "16.0.0-alpha.6"
  },
  "scripts": {
    "start": "react-native start",
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "test": "node node_modules/jest/bin/jest.js --watch"
  },
  "jest": {
    "preset": "jest-expo"
  },
  "dependencies": {
    "react": "16.0.0-alpha.6",
    "react-native": "^0.44.0"
  }
}

Error

 FAIL  ./App.test.js
  ● Test suite failed to run

    /Users/kay/Development/mobile-app/App.test.js: Unexpected token (7:35)
         5 |
         6 | it('renders without crashing', () => {
      >  7 |   const rendered = renderer.create(<App />).toJSON();
           |                                    ^
         8 |   expect(rendered).toBeTruthy();
         9 | });
        10 |

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total 
Time:        1.046s
Ran all test suites.

[brentvatne]

@kay-is - can you post the output of npm ls --depth=1? I suspect there might be some global dependency that is messing with our mojo

[kay-is]

[email protected] /Users/kay/Development/mobile-app

├─┬ [email protected]

│ ├── [email protected]

│ ├── [email protected]

│ ├── [email protected]

│ └── [email protected]

├─┬ [email protected]

│ ├── [email protected]

│ └── [email protected]

├─┬ [email protected]

│ ├── [email protected]

│ ├── [email protected]

│ ├── [email protected]

│ ├── [email protected]

│ ├── [email protected]

│ ├── [email protected]

│ ├── [email protected]

│ ├── [email protected]

│ └── [email protected]

├─┬ [email protected]

│ ├── [email protected]

│ ├── [email protected]

│ ├── [email protected]

│ ├── [email protected]

│ ├── [email protected]

│ ├── [email protected]

│ ├── [email protected]

│ ├── [email protected]

│ └── [email protected]

├─┬ [email protected]

│ ├── [email protected]

│ ├── [email protected]

│ └── [email protected]

├─┬ [email protected]

│ ├── [email protected]

│ ├── [email protected]

│ ├── [email protected]

│ ├── [email protected]

│ ├── [email protected]

│ ├── [email protected]

│ ├── [email protected]

│ ├── [email protected]

│ ├── [email protected]

│ ├── [email protected]

│ ├── [email protected]

│ ├── [email protected]

│ ├── [email protected]

│ ├── [email protected]

│ ├── [email protected]

│ ├── [email protected]

│ ├── [email protected]

│ ├── [email protected]

│ ├── [email protected]

│ ├── [email protected]

│ ├── [email protected]

│ ├── [email protected]

│ ├── [email protected]

│ ├── [email protected]

│ ├── [email protected]

│ ├── [email protected]

│ ├── [email protected]

│ ├── [email protected]

│ ├── [email protected]

│ ├── [email protected]

│ ├── [email protected]

│ ├── [email protected]

│ ├── [email protected]

│ ├── [email protected]

│ ├── [email protected]

│ ├── [email protected]

│ ├── [email protected]

│ ├── [email protected]

│ ├── [email protected]

│ ├── [email protected]

│ ├── [email protected]

│ ├── [email protected]

│ ├── [email protected]

│ ├── [email protected]

│ ├── [email protected]

│ ├── [email protected]

│ ├── [email protected]

│ ├── [email protected]

│ ├── [email protected]

│ ├── [email protected]

│ ├── [email protected]

│ ├── [email protected]

│ ├── [email protected]

│ ├── [email protected]

│ ├── [email protected]

│ ├── [email protected]

│ ├── [email protected]

│ ├── [email protected]

│ ├── [email protected]

│ ├── [email protected]

│ ├── [email protected]

│ ├── [email protected]

│ ├── [email protected]

│ ├── [email protected]

│ ├── [email protected]

│ ├── [email protected]

│ ├── [email protected]

│ ├── [email protected]

│ ├── [email protected]

│ ├── [email protected]

│ ├── [email protected]

│ ├── [email protected]

│ ├── [email protected]

│ ├── [email protected]

│ ├── [email protected]

│ ├── [email protected]

│ ├── [email protected]

│ └── [email protected]

├─┬ [email protected]

│ ├── [email protected]

│ ├── [email protected]

│ ├── [email protected]

│ ├── [email protected]

│ ├── [email protected]

│ └── [email protected]

└── [email protected]

[brentvatne]

Sorry I meant npm ls --global --depth=1

[kay-is]

/Users/kay/.nvm/versions/node/v6.10.3/lib
├─┬ [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ └── [email protected]
├── [email protected]
├── [email protected]
└─┬ [email protected]
  ├── [email protected]
  ├── [email protected]
  ├── [email protected]
  ├── [email protected]
  ├── [email protected]
  ├── [email protected]
  ├── [email protected]
  ├── [email protected]
  ├── [email protected]
  ├── [email protected]
  ├── [email protected]
  ├── [email protected]
  ├── [email protected]
  ├── [email protected]
  ├── [email protected]
  ├── [email protected]
  ├── [email protected]
  ├── [email protected]
  ├── [email protected]
  ├── [email protected]
  ├── [email protected]
  ├── [email protected]
  ├── [email protected]
  ├── [email protected]
  ├── [email protected]
  ├── [email protected]
  ├── [email protected]
  ├── [email protected]
  ├── [email protected]
  ├── [email protected]
  ├── [email protected]
  ├── [email protected]
  ├── [email protected]
  ├── [email protected]
  ├── [email protected]
  ├── [email protected]
  ├── [email protected]
  ├── [email protected]
  ├── [email protected]
  ├── [email protected]
  ├── [email protected]
  ├── [email protected]
  ├── [email protected]
  ├── [email protected]
  ├── [email protected]
  ├── [email protected]
  ├── [email protected]
  ├── [email protected]
  ├── [email protected]
  ├── [email protected]
  ├── [email protected]
  ├── [email protected]
  ├── [email protected]
  ├── [email protected]
  ├── [email protected]
  ├── [email protected]
  ├── [email protected]
  ├── [email protected]
  ├── [email protected]
  ├── [email protected]
  ├── [email protected]
  ├── [email protected]
  ├── [email protected]
  ├── [email protected]
  ├── [email protected]
  ├── [email protected]
  ├── [email protected]
  ├── [email protected]
  ├── [email protected]
  ├── [email protected]
  ├── [email protected]
  ├── [email protected]
  ├── [email protected]
  ├── [email protected]
  ├── [email protected]
  ├── [email protected]
  ├── [email protected]
  ├── [email protected]
  ├── [email protected]
  ├── [email protected]
  ├── [email protected]
  └── [email protected]

[brentvatne]

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.

1) 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.
2) 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

[erhathaway]

I'm also getting this error

my package.json is:

{
  "name": "mobile-client",
  "version": "0.1.0",
  "private": true,
  "devDependencies": {
    "babel-eslint": "^7.2.3",
    "eslint": "^3.19.0",
    "eslint-config-airbnb": "^15.0.1",
    "eslint-plugin-flowtype": "^2.34.0",
    "eslint-plugin-import": "^2.2.0",
    "eslint-plugin-jsx-a11y": "^5.0.3",
    "eslint-plugin-react": "^7.0.1",
    "eslint-plugin-react-native": "^2.3.2",
    "flow-bin": "^0.40.0",
    "jest-expo": "^0.4.0",
    "react-native-scripts": "0.0.29",
    "react-test-renderer": "16.0.0-alpha.6"
  },
  "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 node_modules/jest/bin/jest.js --watch",
    "flow": "flow",
    "lint": "node node_modules/eslint/bin/eslint.js -c ./.eslintrc.json --ignore-pattern '*/node_modules/*' --ignore-pattern '*/npm/*' .; exit 0"
  },
  "jest": {
    "preset": "jest-expo"
  },
  "dependencies": {
    "apollo-client": "^1.4.0",
    "expo": "^16.0.0",
    "prop-types": "^15.5.10",
    "react": "16.0.0-alpha.6",
    "react-apollo": "^1.4.0",
    "react-native": "^0.43.4",
    "react-navigation": "^1.0.0-beta.11",
    "react-redux": "^5.0.5",
    "redux": "^3.6.0",
    "redux-persist": "^4.8.0",
    "redux-saga": "^0.15.3",
    "redux-thunk": "^2.2.0"
  }
}

[brentvatne]

what's in your .babelrc @erhathaway?

[kay-is]

Okay, tried to install the preset and add a .babelrc didn't help.

I also tried to use the jest-react-native preset and install babel-jest.

Still getting ES2015 related errors :(

 FAIL  ./App.test.js
  ● Test suite failed to run

    /Users/kay/Development/mobile-app/node_modules/glamorous-native/src/index.js:1
    ({"Object.":function(module,exports,require,__dirname,__filename,global,jest){import createGlamorous
 from './create-glamorous'
                                                                                             ^^^^^^
    SyntaxError: Unexpected token import

      at transformAndBuildScript (node_modules/jest-runtime/build/transform.js:321:12)
      at Object. (modules/screens/Placeholder.js:2:22)
      at Object. (modules/Navigation.js:2:18)

[brentvatne]

this is related to quirk 1. that i mentioned above -- glamorous-native needs to be transpiled. unfortunately this is more of a jest issue than anything that we deal with directly here, but i'll try to help anyhow.

you will need to add glamorous-native to the regex here: https://facebook.github.io/jest/docs/tutorial-react-native.html#transformignorepatterns-customization

[erhathaway]

@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)"
    ]
  },

[brentvatne]

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

[kay-is]

Thanks, now to the JSX/ES2015 errors are gone.

Can it be that native modules have to be excluded entirely somehow?

I have a welcome screen with react-native-video as background and the whole thing blows up because of an undefined access of Constantsnative module here https://github.com/react-native-community/react-native-video/blob/master/Video.js#L172

[brentvatne]

@kay-is - you need to provide mocks for those constants. one of the nice things about using jest with expo is that we know all of the native apis that are available, so we can mock all of these for you, eg in jest-expo we have:

https://github.com/expo/jest-expo/blob/1041845d0dd128143d00a239f39921b5265e802c/src/exponentModules.js#L154-L159

then we apply all of those mocks (along with a few special case ones):
https://github.com/expo/jest-expo/blob/1041845d0dd128143d00a239f39921b5265e802c/src/setup.js#L28-L73

Regardless, this issue doesn't seem to be related to create-react-native-app anymore, maybe it's a problem with the jest documentation. The issue that has spun off from this is that we should switch the babel preset when ejecting: https://github.com/react-community/create-react-native-app/issues/243

thank you so much for your patience in going through the issue with me and sticking with it!

[Palisand]

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?

[belaldabous]

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.

[pintocarlos]

I was having the same issue. After trying a few different options of the posted above, the usage of the key/value pair on the jest configuration options on package.json "transformIgnorePatterns": [problematic packages] did the trick and now my tests pass normally.

[anp]

@debugmaster @ethanbrown3 GitHub has a follow/subscribe system for this that doesn't add noise to the thread. The button is on the right of issue pages (towards the top).

[anp]

@ide can you take a look at lazzlo's jest issue above here?

[ide]

I probably won’t look into this for awhile so if it’s important or urgent for you I recommend creating a new project and honing in on the specific issue (may need to read source under node_modules, I usually do that to debug JS things). If there’s something specific to jest-expo (vs the React Native Jest preset or Babel) you can open an issue on that repo.