Unit test case is failing in my React app because of some issue in fabric

Question

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';

Yser

Answer 1

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"
}

Oliana

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" – Yser

@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 – Rifkin

@Yser sorry this came really late but I have updated the answer above with a configuration for Jest. – Oliana