Jest Cannot use import statement outside a module

Question

This my first time to run unit test . i got the following error when trying to run jest tests

D:\..\src\index.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import Alert from './alert'
                                                                                         ^^^^^^

SyntaxError: Cannot use import statement outside a module

   6 | import NavbarUser from "./NavbarUser"
   7 | import userImg from "../../../assets/img/portrait/small/avatar-s-11.jpg"
>  8 | import {Button} from "bootstrap/js/src";
     | ^
   9 | import {useTranslation} from "react-i18next";
  10 | 
  11 | 

  at ScriptTransformer._transformAndBuildScript (node_modules/@jest/transform/build/ScriptTransformer.js:537:17)
  at ScriptTransformer.transform (node_modules/@jest/transform/build/ScriptTransformer.js:579:25)
  at Object.<anonymous> (src/layouts/components/navbar/Navbar.js:8:1)

Here is my unit test

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'

it('renders without crashing', () => {
  const div = document.createElement('div')
  ReactDOM.render(<App />, div)
  ReactDOM.unmountComponentAtNode(div)
})

Second unit test which uses enzyme to render a class component and expect a number of components inside

import { configure , shallow } from 'enzyme'
import Adapter from 'enzyme-adapter-react-16'
import NewVehicle from "./NewVehicle";
import React from "react";
import Form from "../../../components/form";
configure({adapter : new Adapter})

describe('AddCar' , ()=>{
  it('should render a proper component list', function () {
    const wrapper = shallow(<NewVehicle/>)
    expect(wrapper.find(Form)).toHaveLength(27)
  });
})

i tried to add babel config . here is my config

module.exports = function (api) {
  api.cache(true)

  const presets = [
    "@babel/preset-env"
  ]

  return {
    presets
  }
}

and adding "type" : "module" in package.json give me a diffrent error

internal/modules/cjs/loader.js:1153
      throw new ERR_REQUIRE_ESM(filename, parentPath, packageJsonPath);
      ^

Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: D:\..
\config-overrides.js
require() of ES modules is not supported.
require() of D:\..\config-overrides.js from D:\..Frontend\node_modules\react-app-rewired\config-overrides.js is an ES module file as it is
 a .js file whose nearest parent package.json contains "type": "module" which defines all .js files
in that package scope as ES modules.
Instead rename D:\..\config-overrides.js to end in .cjs, change t
he requiring code to use import(), or remove "type": "module" from D:\..\F
rontend\package.json.

Typo: `configure({ adapter: new Adapter })` should be `configure({ adapter: new Adapter() });`; not sure if this is cause of your issue though. — Drew Reese, Aug 30 '20 at 21:24
@DrewReese you are right , but this not the part that raising the error — Ahmed Ahmed Sayed, Aug 30 '20 at 21:25
@DrewReese Parenthesis for constructor calls with no arguments are optional. — Bergi, Aug 30 '20 at 21:43
@Bergi Interesting, thanks. After some googling I see this is correct, though I've no idea why *anyone* would *want* to omit them, but to each their own I suppose. — Drew Reese, Aug 30 '20 at 22:01

Jest Cannot use import statement outside a module

0 Answers0