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?
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).