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, Feb 02 '20 at 21:59
yes, my package.json has "test": "react-scripts test jest-environment-happy-dom", — Bruce, Feb 02 '20 at 22:46

score 1 · Accepted Answer · answered Feb 09 '20 at 22:13

1

An answer was provided here.

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

answered Feb 09 '20 at 22:13

Bruce

score 1 · Answer 2 · answered May 03 '22 at 03:14

1

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

answered May 03 '22 at 03:14

CodeFinity

2 Answers2