类型错误：运行 Jest 单元测试时 mxgraph 不是函数

Question

I have a Vue JS Component That uses the mxgraph package: https://www.npmjs.com/package/mxgraph

and imports it like this:

  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';

This is my 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"
    }
  }
};

When I run my tests I get:

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)

The import works fine when I run my app using my normal webpack configurations files. Is there anything I need to add to my jest.config to fix this error?

Answer 1

The mxGraph npm package has always been a mess.

Notice that maxGraph , the mxGraph successor, will handle it: https://github.com/maxGraph/maxGraph

As you are using Vue and your snippet indicates you are using TypeScript, I suggest you to use https://github.com/typed-mxgraph/typed-mxgraph . You will get TypeScript types and a fully working solution for the mxGraph npm integration. The README provides comprehensive usage examples and demos are also available. When using mxGraph in jest test, depending on the mxGraph parts you are running, you will need to use the jsdom environment in the related tests. This is because mxGraph uses the window object, that is not available with the node environment.

If you still want to keep the js way for the mxGraph integration, you can have a look at https://github.com/jgraph/mxgraph/issues/175#issuecomment-482008896 or at other stack overflow questions (they are plenty).