Jest is throwing an error when trying to load a vueJs component that has dynamic import code.
Component:
const Modal = () => import(/* webpackChunkName: "Modal" */ "../pages/common/Modal.vue");
export default {
name: "TileEditModal",
components: {
Modal
},
data() {
return
},
methods: {
test() {
return true;
}
}
}
Test:
import TileEditModal from "./TileEditModal.vue"
Even with no test running, just importing that component will throw 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. (srcVue/pages/landing/TileEditModal.vue.test.js:3:22)
I've tried this solution but it has not worked for me.
I'm using jest-vue-preprocessor with jest:
"jest": {
"moduleFileExtensions": [
"js",
"vue"
],
"transform": {
"^.+\\.js$": "/node_modules/babel-jest",
".*\\.(vue)$": "/node_modules/jest-vue-preprocessor"
},
"clearMocks": true,
"resetMocks": true,
"resetModules": true
},
I have also tried adding env.test preset to babel:
{
"presets": [
"es2015",
"stage-2",
"stage-0"
],
"env": {
"test": {
"presets": [
"es2015",
"stage-2",
"stage-0"
]
}
}
}
So far nothing works, any ideas? I really want to get this code splitting to work on individual components.
解决方案
The solution that worked for me was to use the dynamic import babel plugin but also run jest without cache.
jest --no-cache
Unfortunately running it with cache again after that still fails the test so am not sure what's going on, but it works if I leave --no-cache. Just makes the tests slower.
444
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
