Webpack 代码拆分使用 vueJs 组件中断 jest 导入答案

【问题标题】：Webpack code splitting breaks jest import with vueJs componentsWebpack 代码拆分使用 vueJs 组件中断 jest 导入
【发布时间】：2017-12-14 20:14:58
【问题描述】：

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": {
    "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"
        ]
      }
    } 
  }

到目前为止，没有任何效果，有什么想法吗？我真的很想让这种代码拆分来处理单个组件。

【问题讨论】：

标签： javascript webpack vue.js babeljs jestjs

【解决方案1】：

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

开玩笑--no-cache

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

【讨论】：