Errors running test cases with fluentui components

Viewed 162

I'm trying to run some simple tests in a reactjs project. I run into the following error when the component being tested has '@fluentui/react' or '@fluentui/react-northstar' imports -

 Test suite failed to run

    TypeError: Class extends value undefined is not a constructor or null

      1 | import { Provider } from 'react-redux';
    > 2 | import { registerIcons } from '@fluentui/react';
        | ^
      3 |

      at Object.__extends (node_modules/@fluentui/utilities/node_modules/tslib/tslib.js:70:19)
      at node_modules/@fluentui/utilities/src/BaseComponent.ts:20:81

Does anybody know what causes this error in case of fluentui libraries and how to get rid of it?

1 Answers

Trying to import a module which relies on React into your test is not going to work because when it runs the test suite knows nothing about React. It's just running on Node. Whatever registerIcons is calling is not in scope and so it fails.

You can use React testing libraries to help such as Enzyme, which can be configured with Jest or Mocha, or Storybook which is a whole UI development tool.

Related