TypeError: mxgraph ist beim Ausführen von Jest-Komponententests keine Funktion

Question

Ich habe eine Vue JS-Komponente, die das mxgraph-Paket verwendet: https://www.npmjs.com/package/mxgraph

und importieren Sie es wie folgt:

import * as mxgraph from 'mxgraph';

const {
  mxClient,
  mxStackLayout,
  mxGraph,
  mxRubberband,
  mxUtils,
  mxFastOrganicLayout,
  mxSwimlaneLayout,
  mxEvent,
  mxGraphModel,
  mxConstants,
  mxHierarchicalLayout,
  mxSwimlaneManager
} = mxgraph();
// noinspection TypeScriptCheckImport
import {
  mxConstants as MxConstants
} from 'mxgraph/javascript/mxClient.js'
import axios from 'axios';

Das ist meine jest.config.js

module.exports = {
  preset: "@vue/cli-plugin-unit-jest/presets/no-babel",
  moduleFileExtensions: ["js", "ts", "json", "vue"],
  transform: {
    ".*\.(vue)$": "vue-jest",
    "^.+\.tsx?$": "ts-jest"
  },
  globals: {
    "ts-jest": {
      tsConfig: "src/tsconfig.json"
    }
  }
};

Wenn ich den Test durchführe, erhalte ich Folgendes:

TypeError: mxgraph is not a function

  20 |   import * as mxgraph from 'mxgraph';
  21 | 
> 22 |   const {
     | ^
  23 |     mxClient,
  24 |     mxStackLayout,
  25 |     mxGraph,

  at src/components/task/job/job_pipeline_mxgraph.vue:22:1
  at Object.<anonymous> (src/components/task/job/job_pipeline_mxgraph.vue:568:3)
  at src/components/task/job/task_template_wizard_creation/step_attach_directories_task_template.vue:67:1
  at Object.<anonymous> (src/components/task/job/task_template_wizard_creation/step_attach_directories_task_template.vue:367:3)
  at Object.<anonymous> (tests/unit/task/job/task_template_wizard_creation/step_attach_directories_task_template.spec.js:3:1)

Wenn ich meine App mit einem normalen Webpack-Profil betreibe, funktionieren die Importe einwandfrei. Muss ich der Datei jest.config etwas hinzufügen, um diesen Fehler zu beheben?

Answer 1

mxGraph npm 包一直都是一团糟。

请注意，mxGraph 的后继者 maxGraph 将处理它： https://github.com/maxGraph/maxGraph

由于您正在使用 Vue 并且您的代码片段表明您正在使用 TypeScript，因此我建议您使用 https://github.com/typed-mxgraph/typed-mxgraph。您将获得 TypeScript 类型和 mxGraph npm 集成的完整工作解决方案。自述文件提供了全面的使用示例和演示。 在 jest 测试中使用 mxGraph 时，根据您正在运行的 mxGraph 部分，您将需要使用 相关测试中的jsdom环境。这是因为 mxGraph 使用 window 对象，该对象在 node 环境中不可用。

如果您仍然想保留 mxGraph 集成的 js 方式，您可以查看 https://github.com/jgraph/mxgraph/issues/175#issuecomment-482008896 或其他堆栈溢出问题（它们很多）。