How do I import ES6 Module within a create-react-app without causing tests to fail?

Question

When I follow the instructions found here

and add the import reference as they specify:

import "@ui5/webcomponents/dist/Button";

the application works fine and is able to import the button. However, when I npm run test, I get an error:

SyntaxError: Cannot use import statement outside a module.

Any idea how to fix this?

Do you use react-scripts test command? Unlike pure jest, react-scripts add some configuration on top, which makes imports working — just-boris
– just-boris, Commented Feb 2, 2020 at 21:59
yes, my package.json has "test": "react-scripts test jest-environment-happy-dom", — Bruce
– Bruce, Commented Feb 2, 2020 at 22:46

Bruce · Accepted Answer · 2020-02-09 22:13:01Z

1

An answer was provided here.

{
   "jest": {
      "transformIgnorePatterns": [
         "node_modules/(?!(@ui5|lit-html)).*\\.js$"
      ]
   }
}

answered Feb 9, 2020 at 22:13

Bruce

1623 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

CodeFinity · Accepted Answer · 2022-05-03 03:14:46Z

1

Change it to: "test": "react-scripts test --transformIgnorePatterns \"node_modules/(?!@codemirror)/\"",

answered May 3, 2022 at 3:14

community wiki