gpt4 book ai didi

javascript - Webpack 代码拆分会破坏 vueJs 组件的 jest 导入

转载 作者:搜寻专家 更新时间:2023-10-30 22:13:07 25 4
gpt4 key购买 nike

Jest 在尝试加载具有动态导入代码的 vueJs 组件时抛出错误。

组件:

<script>
const Modal = () => import(/* webpackChunkName: "Modal" */ "../pages/common/Modal.vue");

export default {
name: "TileEditModal",
components: {
Modal
},
data() {
return
},
methods: {
test() {
return true;
}
}
}
</script>

测试:

import TileEditModal from "./TileEditModal.vue"

即使没有运行测试,只导入该组件也会抛出以下错误:

  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)

我试过这个 solution但它对我不起作用。

我将 jest-vue-preprocessor 与 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
},

我还尝试将 env.test 预设添加到 babel:

{
"presets": [
"es2015",
"stage-2",
"stage-0"
],
"env": {
"test": {
"presets": [
"es2015",
"stage-2",
"stage-0"
]
}
}
}

到目前为止没有任何效果,有什么想法吗?我真的很想让这个代码拆分以在各个组件上工作。

最佳答案

对我有用的解决方案是使用 dynamic import babel plugin但也可以在没有缓存的情况下运行 jest。

jest --no-cache

不幸的是,在那之后再次使用缓存运行它仍然无法通过测试,所以我不确定发生了什么,但是如果我离开 --no-cache 它会起作用。只会让测试变慢。

关于javascript - Webpack 代码拆分会破坏 vueJs 组件的 jest 导入,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45023155/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com