Fluentui: Test cases are failing while using office react ui fabric

Created on 31 Jul 2018 · 4Comments · Source: microsoft/fluentui

FAIL src\App.test.js
● Test suite failed to run

E:\net_react\my-new-app\ClientApp\node_modules\office-ui-fabric-react\lib\Fabric.js:1
({"Object.<anonymous>":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.<anonymous> (src/components/Login.js:13:592)
  at Object.<anonymous> (src/components/Home.js:2:14)

I have import { Fabric } from '../../node_modules/office-ui-fabric-react/lib/Fabric'; in my Login.js

Sorry if this is not the right place and please do redirect me there.

Question ❔

Source

NagarajuGaddam1

Most helpful comment

You need to redirect /lib/ imports to /lib-commonjs/ and consume that or use babel.

https://github.com/OfficeDev/office-ui-fabric-react/blob/master/6.0_RELEASE_NOTES.md#lib-commonjs

Do you have any more details here? What test framework do you use?

dzearing on 31 Jul 2018

👍3

All 4 comments

You need to redirect /lib/ imports to /lib-commonjs/ and consume that or use babel.

https://github.com/OfficeDev/office-ui-fabric-react/blob/master/6.0_RELEASE_NOTES.md#lib-commonjs

Do you have any more details here? What test framework do you use?

dzearing on 31 Jul 2018

👍3

Hi @NagarajuGaddam1, I have answered your question on StackOverflow: https://stackoverflow.com/questions/51612375/unit-test-case-is-failing-in-my-react-app-because-of-some-issue-in-fabric/51619261#51619261.

cliffkoh on 31 Jul 2018

🎉1

I'm using mocha and changing lib to lib commonjs fixes the issue. But now I get a different error:
TypeError: window.requestAnimationFrame is not a function at Stylesheet._getStyleElement (C:\Users\rune.hanssens\Documents\sharepoint\searchresultslistrenderer\node_modules\office-ui-fabric-react\node_modules\@uifabric\merge-styles\src\Stylesheet.ts:269:14) at Stylesheet.insertRule (C:\Users\rune.hanssens\Documents\sharepoint\searchresultslistrenderer\node_modules\office-ui-fabric-react\node_modules\@uifabric\merge-styles\src\Stylesheet.ts:204:65) at applyRegistration (C:\Users\rune.hanssens\Documents\sharepoint\searchresultslistrenderer\node_modules\office-ui-fabric-react\node_modules\@uifabric\merge-styles\src\styleToClassName.ts:270:20) ...
Even though I use the raf/polyfill package to shim this. I do it like this.
require('raf').polyfill();