使用 Fluentui 组件运行测试用例时出错

Question

我正在尝试在reactjs 项目中运行一些简单的测试。当被测试的组件有“@ Fluentui/react”或“@ Fluentui/react-northstar”导入时，我遇到以下错误 -

 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

有人知道在 Fluentui 库的情况下导致此错误的原因以及如何消除它吗？

Answer 1

尝试将依赖于 React 的模块导入到您的测试中是行不通的，因为当它运行时，测试套件对 React 一无所知。它只是在 Node 上运行。无论

registerIcons

调用的内容不在范围内，因此都会失败。

您可以使用React测试库来帮助，例如Enzyme，可以使用Jest或Mocha进行配置，或者Storybook，这是一个完整的UI开发工具。

Answer 2

我在从office-fabric升级到Fluentui8时遇到了这个问题。我通过更新我的笑话配置 moduleNameMapper 解决了这个问题，如下所示。