TypeError: mxgraph bukan fungsi semasa menjalankan ujian unit Jest

Question

Saya mempunyai komponen Vue JS menggunakan pakej mxgraph: https://www.npmjs.com/package/mxgraph

dan import seperti ini:

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

Ini jest.config.js saya

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

Apabila saya menjalankan ujian saya mendapat:

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)

Apabila saya menjalankan apl saya dengan profil pek web biasa, import berfungsi dengan baik. Adakah terdapat apa-apa yang perlu saya tambahkan pada jest.config untuk membetulkan ralat ini?

Answer 1

mxGraph Pakej npm sentiasa kucar-kacir.

Sila ambil perhatian bahawa pengganti mxGraph maxGraph akan mengendalikannya: https://github.com/maxGraph/maxGraph

Memandangkan anda menggunakan Vue dan coretan kod anda menunjukkan bahawa anda menggunakan TypeScript, saya syorkan anda untuk menggunakan https://github.com/typed-mxgraph/typed-mxgraph. Anda mendapat penyelesaian berfungsi lengkap dengan jenis TypeScript dan penyepaduan npm mxGraph. Fail readme menyediakan contoh dan demonstrasi penggunaan yang komprehensif. Apabila menggunakan mxGraph dalam ujian jest, bergantung pada bahagian mxGraph yang anda jalankan, anda perlu menggunakan persekitaran jsdom dalam ujian yang berkaitan. Ini kerana mxGraph tidak tersedia dalam persekitaran window 对象，该对象在 node.

Jika anda masih mahu mengekalkan cara js integrasi mxGraph, anda boleh menyemak https://github.com/jgraph/mxgraph/issues/175#issuecomment-482008896 atau isu limpahan tindanan lain (terdapat banyak daripadanya ).