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 !!
Please sign in to leave a comment.
the error text is rather verbose:
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?
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"] }
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
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 :-)