jest: SyntaxError: Cannot use import statement outside a module

A more complete set of steps is:

1. npm i --save-dev jest babel-jest @babel/preset-env
2. add the follow to the module.exports in your jest.config.js

transform: {
    "^.+\\.jsx?$": "babel-jest"
  },

1. create a babel.config.json file with the following

{
  "presets": ["@babel/preset-env"]
}

After this, I was able to get files with imports working just fine.

I resolved the issue by doing the following:

yarn add ts-jest -D

then in your jest.config.js file put following:

module.exports = {
  transform: {
    '^.+\\.ts?$': 'ts-jest',
  },
};

@smpeters solution worked for me, but I want to see if I can explain exactly why it worked, because TBH I have no idea what those steps actually do (but thank you @smpeters for posting them!)

1. Jest has a transform option that takes an object where the keys are regular expressions of filenames to match and their values are how to transform them.
2. Jest calls these values a “path to transformer”. I have no idea what this exactly means, but my best guess is that since we had to install the babel-jest module, "babel-jest" is a path to that module. So I guess if the module were called babel-jest-hooray then the “path to transformer” would be the string "babel-jest-hooray".
3. So what is the babel-jest module? Seems like it exists to use Babel to transform jest files, i.e. to solve this exact problem. If my supposition above is correct, then this is what it is: https://github.com/facebook/jest/blob/master/packages/babel-jest/src/index.ts#L163
4. OK, cool. So what is babel? It is a JavaScript Compiler (but so is Webpack? I dunno, let’s go with it). It does the work. babel-jest is a glue between Babel—which doesn’t know about Jest—and Jest.
5. To make babel work you need to configure it. It comes with presets, but these are not actually pre-set. You have to set them. Thus the @babel/preset-env module is installed.
6. What is the @babel/preset-env module? It is “a smart preset that allows you to use the latest JavaScript without needing to micromanage which syntax transforms”, which basically means it sets all the defaults you want to do normal and unsurprising things. Nice!
7. So how does babel know how to use this? You have to tell it by creating that babel config file. That’s where the "preset" configuration option comes in.

Whew!

I solved the fucking thing by migrating the .babelrc file to babel.config.js! Shocker.

For new coming, use this

jest.config.js

module.exports = {
  preset: 'ts-jest/presets/js-with-babel'
};

@changyeamoon I think that’s because @babel/preset-env doesn’t have an explicit target and is by default targeting all web browsers, attempting to transform all code in the process.

If using Node, babel.config.json should look like:

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "node": true
        }
      }
    ]
  ]
}

Source: https://babeljs.io/docs/en/babel-preset-env#targets

{ “presets”: [“@babel/preset-env”] }

Awsome workaround!!

FYI for some people, if you are using a .babelrc the changes didn’t work for me. I had to delete my .babelrc it and just use the suggested babel.config.json

I’ve came across this issue and wanted to leave a solution that worked in my case. We are using some internally developed library that we use in our apps. Because of that the libraries are only delivered as ES6 modules, so trying to test them threw an error from the issue title. What I had to do to fix was:

• change .babelrc to babel.config.json
• migrate Jest configuration from package.json to jest.config.js
• add this line to the Jest config file:

transformIgnorePatterns: ['node_modules/(?!@foobar)/']

Where foobar is the library name we are using. From how I understand this allows Babel to transform ES6 modules correctly for Jest. And it got rid of the error.

Correct, ESM is not supported. You can track #4842. In the meantime, you need to transpile to cjs (using babel, typescript, etc)

EDIT: Since this issue is still getting traffic, please see https://jestjs.io/docs/en/ecmascript-modules

Shame nothing works for me. This is even on a new create-react-app, so all my babel, jest, etc. configurations are all clean.

I can get jest to work with typescript for a typescript file on its own, but the moment I try to import my other typescript module, it just doesn’t seem to recognise the “import” keyword, despite the keyword being recognised right above the import statement, when I import another file…

import { Items } from '../strings'; // Jest is OK
import { UserType } from '@username/myenums'; // Jest is like ? ? ? ? ?

  ● 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.

    SyntaxError: Cannot use import statement outside a module
(But it just used the import statement above??????)

How jest cannot seem to compile or recognise my external library that’s in typescript is beyond me

None of this worked for me. I do not use TypeScript. I just upgraded it from Node v12.10 to v14.5, fixed certain invalid imports and the app starts without any errors or warnings. However, Jest fails every single test with the same ereror : SyntaxError: Cannot use import statement outside a module, where this module is located inside my node_modules folder.

Inside my babel.config.cjs, I have

module.exports = {
  "presets": [
    [
      "@babel/preset-env",
      {
        targets: {
          node: true,
        },
      }
    ]
  ]
};

and inside my jest.config.cjs, I have

module.exports = {
   testEnvironment: "node",
   bail: 2,

   transform: {
      "^.+\\.jsx?$": "babel-jest"
   },
};

(In fact, even the option bail is ignored, and every tests are executed, errored, and consoled on screen.)

I solved the fucking thing by migrating the .babelrc file to babel.config.js! Shocker.

That’s really helped, I’ve shocked too 😃

Well I spent a whole day on this trying to figure out… turns out for me I reused a .js file from another project that was set to compiled everything. The new project did not and that .js file was exporting an ESM. So I changed the name to .ts and bang zoom! There’s probably a way to include .js in the compile so it gets converted to ESM but since I’m converting everything to TS anyway I didn’t bother. Please feel free to let me know though if you find out.

With the current version of ts-jest I didn’t need the babel stuff. ts-jest 25.5.1 and typescript 3.9.3.

this is my jest.config.js

module.exports = {
  preset: 'ts-jest',
  coverageDirectory: 'coverage',
  collectCoverageFrom: ['src/**/*.{ts,tsx,js,jsx}', '!src/**/*.d.ts'],
};

@smpeters I’m getting a ReferenceError: regeneratorRuntime is not defined and it points to a async await function as the culprit.

Any ideas about this?

In my case, there was a problem loading lodash, so I solved by mocking the functions I needed to use, such as lodash-es/round, so under __mocks__ folder, I just added another folder with lodash-es and a file round.js with something like module.exports = jest.fn(numb => numb);

That did the trick. Hope it helps someone else.

I solved it for my React Native project. First I initialized a new TypeScript template with npx react-native init and compared tsconfig.json files. I missed the following settings:

"module": "commonjs",
"lib": ["ES6"],
"isolatedModules": true,
"strict": true,
"noEmit": true,

Then I configured transformIgnorePatterns for my es libs. https://github.com/nrwl/nx/issues/812

I had the same problem when I started to used babel… But later, I had a solution… I haven’t had the problem anymore so far… Currently, Node v12.14.1, “@babel/node”: “^7.8.4”, I use babel-node and nodemon to execute (node is fine as well…)

package.json: “start”: "nodemon --exec babel-node server.js “debug”: “babel-node debug server.js” !!note: server.js is my entry file, you can use yours.

launch.json: When you debug, you also need to config your launch.json file “runtimeExecutable”: “${workspaceRoot}/node_modules/.bin/babel-node” !!note: plus runtimeExecutable into the configuration.

Of course, with babel-node, you also normally need and edit another file, such as babel.config.js/.babelrc file

Dear @smpeters I have the same issue on react-native. you solution did not work