My Vue JS Component is utilizing the mxgraph package, which can be found at: https://www.npmjs.com/package/mxgraph
The component imports the package like so:
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 snippet showcases my jest.config.js file:
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"
}
}
};
However, upon running my tests, I encounter the following error message:
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 functions properly when using regular webpack configurations in my application. Is there any specific configuration I need to include in my jest.config to resolve this issue?