7

I am new to react and also wanted to use office react ui for one of our requirement i followed the git hub and able to use office ui react components in my components but while running my first test case for App.js it is giving me below error.

E:\net_react\my-new-app\ClientApp\node_modules\office-ui-fabric-react\lib\Fabric.js:1 ({"Object.":function(module,exports,require,__dirname,__filename,global,jest){export * from './components/Fabric/index'; ^^^^^^

SyntaxError: Unexpected token export

at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/ScriptTransformer.js:289:17) at Object. (src/components/Login.js:13:592) at Object. (src/components/Home.js:2:14)

And i have an import statement in my Login.js 

import { Fabric } from '../../node_modules/office-ui-fabric-react/lib/Fabric';
Nagaraju
  • 113
  • 1
  • 7

1 Answers1

11

The error is because your test harness does not support ES 6 modules (which is what is in lib in Fabric 6).

Try importing instead from office-ui-fabric-react/lib-commonjs/Fabric or office-ui-fabric-react (which has bundle size implications unless you're able to utilize Tree Shaking) or modify your test harness's module map to redirect lib/ imports into lib-commonjs.

Update

To elaborate on the answer above, the Fabric release notes has guidance for Jest configuration:

moduleNameMapper: {
    "office-ui-fabric-react/lib/(.*)$": "office-ui-fabric-react/lib-commonjs/$1"
}
Cliff Koh
  • 126
  • 1
  • 3
  • Tried this "office-ui-fabric-react/lib-commonjs/Fabric" and its working and could you please let me know how i can do this in my jest configuration. "modify your test harness's module map to redirect lib/ imports into lib-commonjs" – Nagaraju Aug 01 '18 at 05:41
  • 1
    @cliff Koh I wish I could upvote this more than once. Hours of my life banging my head against the wall with the jest and ts config – theycallmemorty Aug 28 '18 at 14:11
  • @Nagaraju sorry this came really late but I have updated the answer above with a configuration for Jest. – Cliff Koh Nov 08 '18 at 03:25