Jest: SyntaxError: Unexpected identifier

[joe223]

🐛 Bug Report

Jest can not resolve es6 import syntax.

To Reproduce

Clone https://github.com/joe223/vue-test-utils-issue, run npm install && npm run unit

Expected behavior

Two test case should be executed successfully.

Link to repl or repo (highly encouraged)

https://github.com/joe223/vue-test-utils-issue

Run npx envinfo --preset jest

Results here:

> jest --config test/unit/jest.conf.js

 FAIL  test/unit/specs/configurationValidator.spec.js
  ● Test suite failed to run

    /Users/joe223/git/vue-test-utils-issue/test/unit/setup.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import Vue from 'vue';
                                                                                                    ^^^

    SyntaxError: Unexpected identifier

      at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:316:17)

 FAIL  test/unit/specs/routesFormatter.spec.js
  ● Test suite failed to run

    /Users/joe223/git/vue-test-utils-issue/test/unit/setup.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import Vue from 'vue';
                                                                                                    ^^^

    SyntaxError: Unexpected identifier

      at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:316:17)

Test Suites: 2 failed, 2 total
Tests:       0 total
Snapshots:   0 total
Time:        0.707s
Ran all test suites.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! test-admin@ unit: `jest --config test/unit/jest.conf.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the test-admin@ unit script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/joe223/.npm/_logs/2019-07-08T14_14_52_553Z-debug.log

/Users/joe223/.npm/_logs/2019-07-08T14_14_52_553Z-debug.log:

0 info it worked if it ends with ok
1 verbose cli [ '/Users/joe223/.nvm/versions/node/v10.15.3/bin/node',
1 verbose cli   '/Users/joe223/.nvm/versions/node/v10.15.3/bin/npm',
1 verbose cli   'run',
1 verbose cli   'unit' ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'preunit', 'unit', 'postunit' ]
5 info lifecycle test-admin@~preunit: test-admin@
6 info lifecycle test-admin@~unit: test-admin@
7 verbose lifecycle test-admin@~unit: unsafe-perm in lifecycle true
8 verbose lifecycle test-admin@~unit: PATH: /Users/joe223/.nvm/versions/node/v10.15.3/lib/node_modules/npm/node_modules/npm-lifecycle/node-gyp-bin:/Users/joe223/git/vue-test-utils-issue/node_modules/.bin:/Users/joe223/.nvm/versions/node/v10.15.3/bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/Users/joe223/flutter_sdk/flutter/bin:/Users/joe223/Library/Android/sdk/platform-tools:/Applications/Visual Studio Code.app/Contents/Resources/app/bin
9 verbose lifecycle test-admin@~unit: CWD: /Users/joe223/git/vue-test-utils-issue
10 silly lifecycle test-admin@~unit: Args: [ '-c', 'jest --config test/unit/jest.conf.js' ]
11 silly lifecycle test-admin@~unit: Returned: code: 1  signal: null
12 info lifecycle test-admin@~unit: Failed to exec unit script
13 verbose stack Error: test-admin@ unit: `jest --config test/unit/jest.conf.js`
13 verbose stack Exit status 1
13 verbose stack     at EventEmitter.<anonymous> (/Users/joe223/.nvm/versions/node/v10.15.3/lib/node_modules/npm/node_modules/npm-lifecycle/index.js:301:16)
13 verbose stack     at EventEmitter.emit (events.js:189:13)
13 verbose stack     at ChildProcess.<anonymous> (/Users/joe223/.nvm/versions/node/v10.15.3/lib/node_modules/npm/node_modules/npm-lifecycle/lib/spawn.js:55:14)
13 verbose stack     at ChildProcess.emit (events.js:189:13)
13 verbose stack     at maybeClose (internal/child_process.js:970:16)
13 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:259:5)
14 verbose pkgid test-admin@
15 verbose cwd /Users/joe223/git/vue-test-utils-issue
16 verbose Darwin 18.5.0
17 verbose argv "/Users/joe223/.nvm/versions/node/v10.15.3/bin/node" "/Users/joe223/.nvm/versions/node/v10.15.3/bin/npm" "run" "unit"
18 verbose node v10.15.3
19 verbose npm  v6.4.1
20 error code ELIFECYCLE
21 error errno 1
22 error test-admin@ unit: `jest --config test/unit/jest.conf.js`
22 error Exit status 1
23 error Failed at the test-admin@ unit script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 1, true ]

[jeysal]

Your babelrc has modules: false instructing Babel not to transform the imports/exports to require. Also, please make sure that your jest and babel-jest versions match and if possible upgrade them.

[joe223]

@jeysal well,

 Invariant Violation: Invalid Option: The 'modules' option must be either 'false' to indicate no modules, or a
        module type which can be be one of: 'commonjs' (default), 'amd', 'umd', 'systemjs'. (While processing preset: "/Users/hezaichang/git/vue-test-utils-issue/node_modules/babel-preset-env/lib/index.js")

I have to set modules to false.

[SimenB]

If you upgrade to Jest 24 and Babel 7 you don't have to set modules at all anymore - an API was added to Babel where tools (jest, webpack etc) can tell babel what to do about modules. So import will be transformed away for jest, but kept for webpack automatically without you needing to provide the config

[anjing0524]

but it always not work in babel7.6 and jest24.9 @SimenB Could you give me an eg? thanks

[Ogek]

ONLY FOR BABEL 7.x
@anjing0524 if you are using .babelrc, move to babel.config.js.
You can find an in-depth information here
I hope I was helpful !

[EgorFront]

Maybe Jest does not recognize babel-jest, try specifying the full path

In the jest configuration, specify

transform: {
    “^.+\\.(js|jsx)?$”: “<rootDir>/node_modules/babel-jest”,
}

If that doesn't help add this to your babel config file

env: {
    test: {
      presets: [['@babel/preset-env']],
    },
  },

[DuYueYu]

it works! thanks guys!
I have replaced all the
import XX from 'XX' to const XX = require('XX'),
and
export default XX to module.exports = XX
so i needn't to configure the babel.
as they saied, the problem is belong to Babel.

so , jest is base on Node.js , right?

[aperkaz]

Hi guys,
Any way to fix this without replacing import XX from 'XX' to const XX = require('XX') ?

[SimenB]

You need to transpile (babel, typescript etc) until #9430 is implemented

[BravenxX]

You need to transpile (babel, typescript etc) until #9430 is implemented

And how I do that??