MonacoEditor 不使用 Jest 和 React 测试库

Question

我正在为一个组件编写测试用例，目前在我的组件中使用 MonacoEditor。 在运行测试用例期间，我遇到了以下错误：

Cannot find module 'monaco-editor' from 'node_modules/@uiw/react-monacoeditor/lib/index.js'

为了解决上述错误，我在 package.json 中添加了一个 moduleNameMapper 属性

"moduleNameMapper": {
      "monaco-editor": "<rootDir>/node_modules/@uiw/react-monacoeditor/lib/index"
    }

在 package.json 中添加属性并再次运行测试用例后，我在 monacoEditor node_modules 配置文件中的某处出现以下错误。

Error: Uncaught [TypeError: Cannot read properties of undefined (reading 'create')]

我正在寻找一些解决方法，以便我可以使用 jest 和反应测试库 (RTL) 或任何解决我当前遇到的错误的方法来完全模拟这个 MonacoEditor 模块

尝试像下面那样模拟并尝试了在线提供的多种方法，但没有任何效果。

jest.mock('@uiw/react-monacoeditor', ()=>({
    MonacoEditor: ()=>null
}));

我现在得到的错误：

Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object.

提前致谢

Answer 1

此问题可以通过 react-monacoeditor 库返回的组件 mocking 修复

jest.mock('@uiw/react-monacoeditor', ()=>({})=>(<div></div>));

Answer 2

我也在这个问题上挣扎了几个小时。 我使用以下步骤修复了它：

1）。 在项目根目录下创建mocks目录（与 node-modules 处于同一级别）；

2）。 创建导出您需要的模块的 monaco-editor.ts：

module.exports = {
  editor: {
    getModelMarkers: jest.fn().mockReturnValue([]),
    // other methods here
  },
  Position: {},
  // other modules here
};

就是这样。 当 Jest 解析器找到导入的“monaco-editor”模块时，它首先在 mocks 文件夹中查找我们创建的“monaco-editor.ts”模块。 然后它从这里获取所有必需的模块。