tests failing with SyntaxError: Unexpected token export

Question

After updating a package "office-ui-fabric-react" from "5.124.0 to "6.128.0", all my tests are failing with following error:

 FAIL  src\***.test.tsx
  ● Test suite failed to run

\node_modules\office-ui-fabric-react\lib\Callout.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){export * from './components/Callout/index';
                                                                                         ^^^^^^

SyntaxError: Unexpected token export

  at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/ScriptTransformer.js:289:17)

Answer 1

If you are using create-react-app, You probably don't want to eject it.

To solve this without ejecting we need to be able to modify jest configuration without eject.

Luckily there is this library https://github.com/timarney/react-app-rewired

Follow its instruction and install react-app-rewired in you CRA project

Then you need to change your package.json to include "jest" configuration

"jest": {
  "moduleNameMapper": {
    "office-ui-fabric-react/lib/(.*)$": "office-ui-fabric-react/lib-commonjs/$1"
  },
 "transformIgnorePatterns": [
   "node_modules/(?!office-ui-fabric-react)"
 ]
}

Resource: https://github.com/OfficeDev/office-ui-fabric-react/wiki/Fabric-6-Release-Notes

---

Update

The latest create-react-app already support moduleNameMapper and transformIgnorePatterns configuration. So there are no need to use react-app-rewired anymore.

https://create-react-app.dev/docs/running-tests/#configuration