TypeError : mxgraph n'est pas une fonction lors de l'exécution de tests unitaires Jest

Question

J'ai un composant Vue JS utilisant le package mxgraph : https://www.npmjs.com/package/mxgraph

et importez-le comme ceci :

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

Voici mon 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"
    }
  }
};

Lorsque je lance le test, j'obtiens :

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)

Lorsque j'exécute mon application avec un profil Webpack normal, les importations fonctionnent correctement. Dois-je ajouter quelque chose à jest.config pour corriger cette erreur ?

Answer 1

mxGraph Le package npm a toujours été en désordre.

Veuillez noter que le successeur de mxGraph maxGraph s'en chargera : https://github.com/maxGraph/maxGraph

Puisque vous utilisez Vue et que votre extrait de code indique que vous utilisez TypeScript, je vous recommande d'utiliser https://github.com/typed-mxgraph/typed-mxgraph. Vous obtenez une solution de travail complète avec les types TypeScript et l'intégration mxGraph npm. Le fichier Lisezmoi fournit des exemples d'utilisation et des démonstrations complets. Lorsque vous utilisez mxGraph dans des tests Jest, en fonction de la partie de mxGraph que vous exécutez, vous devrez utiliser l'environnement jsdom dans le test concerné. En effet, mxGraph n'est pas disponible dans l'environnement window 对象，该对象在 node.

Si vous souhaitez toujours conserver la méthode js d'intégration mxGraph, vous pouvez consulter https://github.com/jgraph/mxgraph/issues/175#issuecomment -482008896 ou d'autres problèmes de débordement de pile (il y en a beaucoup ).