I am encountering an issue with Jest when attempting to load a VueJs component that includes dynamic import code.
Component:
<script>
const Modal = () => import(/* webpackChunkName: "Modal" */ "../pages/common/Modal.vue");
export default {
name: "TileEditModal",
components: {
Modal
},
data() {
return
},
methods: {
test() {
return true;
}
}
}
</script>
Test:
import TileEditModal from "./TileEditModal.vue"
Even without running any tests, simply importing that component triggers the following error:
return import( /* webpackChunkName: "Modal" */"../pages/common/Modal.vue");
^^^^^^
SyntaxError: Unexpected token import
at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/ScriptTransformer.js:289:17)
at Object.<anonymous> (srcVue/pages/landing/TileEditModal.vue.test.js:3:22)
I have attempted to implement this solution, but it has not resolved the issue for me.
I am using jest-vue-preprocessor with jest:
"jest": {
"moduleFileExtensions": [
"js",
"vue"
],
"transform": {
"^.+\\.js$": "<rootDir>/node_modules/babel-jest",
".*\\.(vue)$": "<rootDir>/node_modules/jest-vue-preprocessor"
},
"clearMocks": true,
"resetMocks": true,
"resetModules": true
},
I have also tried adding the env.test preset to babel:
{
"presets": [
"es2015",
"stage-2",
"stage-0"
],
"env": {
"test": {
"presets": [
"es2015",
"stage-2",
"stage-0"
]
}
}
}
Unfortunately, none of these solutions have worked so far. Any suggestions on how I can make code splitting work for individual components?