Jest – SyntaxError: Cannot use import statement outside a module

by

Jest doesn’t support ES6 module and hence throwing this error when you directly run the test with Jest. if you want to run like that then you have to add babel.

On the other side, when you run the test with react-scripts it uses babel behind the scene to Transpile the code.

In newer version of jest, babel-jest is now automatically loaded by Jest and fully integrated

Hope this answer your question.

Adding babel in jest.

Installation

babel-jest is now automatically loaded by Jest and fully integrated. This step is only required if you are using babel-jest to transform TypeScript files.

npm install --save-dev babel-jest

Usage

In your package.json file make the following changes:

{
  "scripts": {
    "test": "jest"
  },
  "jest": {
    "transform": {
      "^.+\\.[t|j]sx?$": "babel-jest"
    }
  }
}

Create .babelrc configuration file

Create a babel.config.json config in your project root and enable some presets.

To start, you can use the env preset, which enables transforms for ES2015+

npm install @babel/preset-env --save-dev

In order to enable the preset you have to define it in your babel.config.json file, like this:

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

Check for more details on Babel official site

More Related Contents:

  1. Mock inner axios.create()
  2. Trying to use fetch and pass in mode: no-cors
  3. The create-react-app imports restriction outside of src directory
  4. How do I test axios in Jest?
  5. ReactJS – Lifting state up vs keeping a local state
  6. npm start error with create-react-app
  7. Development server of create-react-app does not auto refresh
  8. where is create-react-app webpack config and files?
  9. Where’s the connection between index.html and index.js in a Create-React-App application?
  10. Best way to polyfill ES6 features in React app that uses create-react-app
  11. How to use create-react-app with an older React version?
  12. How can I use Jest to spy on a method call?
  13. Simulate a button click in Jest
  14. Increase JavaScript Heap size in create-react-app project
  15. Service Worker registration error: Unsupported MIME type (‘text/html’)
  16. Jest spyOn function called
  17. How to mock React component methods with jest and enzyme
  18. Jest matcher to match any one of three values
  19. create-react-app is showing all my code in production, how to hide it?
  20. Perform debounce in React.js
  21. Adding script tag to React/JSX
  22. Passing custom props to router component in react-router v4
  23. ReactJS: Maximum update depth exceeded error
  24. what is right way to do API call in react js?
  25. ES6 modules implementation, how to load a json file
  26. How to store Configuration file and read it using React
  27. How do I setState for nested object?
  28. Getting an error “A non-serializable value was detected in the state” when using redux toolkit – but NOT with normal redux
  29. useEffect is running twice on mount in React
  30. Use Bootstrap with React

Leave a Comment