SyntaxError: Cannot use import statement outside a module (phpStorm/Js/Jest)

I'm trying to setup phpStorm to run javascript unit-test using Jest, which work fine as long as the source-code and test-script is in then same file.
But when separated in two files, simple.js and simple.test.js I receives this error:

Test suite failed to run

Jest encountered an unexpected token

This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.

By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".

Here's what you can do:
• If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/en/ecmascript-modules for how to enable it.
• To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
• If you need a custom transformation specify a "transform" option in your config.
• If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

You'll find more details and examples of these config options in the docs:
https://jestjs.io/docs/en/configuration.html

Details:

D:\WebSiteRipper\_web\www\js-test-tutorial\simple.test.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import { hello } from "./simple.js"; // console.log(hello());
^^^^^^

SyntaxError: Cannot use import statement outside a module

at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1350:14)

simple.js: 

export function hello() {
return 'Hello world';
}

simple.test.js

import {hello} from "./simple.js";

// console.log(hello());

describe('hello', () => {
test('return Hello ..', () => {
expect(hello()).toBe('Hello world');
});
});

package.json:

{
"name": "js-test-tutorial",
"version": "1.0.0",
"type": "module",
"dependencies": {
"babel-core": "^6.26.3",
"babel-jest": "^26.6.3",
"babel-preset-env": "^1.7.0",
"jest": "^26.6.3"
}
}

The import statement works fine when not running unittest .. eg:

import {hello} from "./simple.js";
console.log(hello());

 

How do i solves this problem ? And setting I missed !!

 

2
4 comments

the error text is rather verbose:

This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.

You are trying to use ES6 import/export statements that aren't natively supported, code has to be pre-compiled with Babel.

What does your Babel config (.babelrc) look like, where is it located?

1

I see several .babelrc located and with content as:

1)  node_modules\gensync\test\.babelrc
{  presets: [ ["env", { targets: { node: "current" }}], ], }

2)  node_modules\istanbul-reports\lib\html-spa\.babelrc
{ "presets": [["@babel/preset-env", { "modules": "commonjs" }], "@babel/preset-react"] }

3)  node_modules\gensync\test\.babelrc
{ presets: [["env", { targets: { node: "current" }}], ], }

4)  node_modules\istanbul-reports\lib\html-spa\.babelrc 
{  "presets": [["@babel/preset-env", { "modules": "commonjs" }], "@babel/preset-react"] }

 

 

0

It has to be your own config located in the project root directory; configuration files in node_modules are not taken into account

See https://jestjs.io/docs/getting-started#using-babel

1

Thanks .. now it seem to work :-D
The doc says 'Babel 6 support - Jest 24 dropped support for Babel 6. We highly recommend you to upgrade to Babel 7'. 
So I upgraded to: 

"dependencies": {
"babel-core": "^7.0.0-beta.3",
"babel-jest": "^27.0.0-next.8",
"babel-preset-env": "^7.0.0-beta.3",
"jest": "^27.0.0-next.8"

and added .babelrc in project root directory with 

{
"env": {
"test": {
"plugins": ["transform-es2015-modules-commonjs"]
}
}
}


Thanks  Elena :-) 

 

1

Please sign in to leave a comment.