Webpackコードの分割により、vueJsコンポーネントでjest importが破損する

Question

動的インポートコードを持つvueJsコンポーネントをロードしようとすると、Jestがエラーをスローします。

コンポーネント：

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

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

がテスト：私はこれを試してみた

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) 

：

import TileEditModal from "./TileEditModal.vue" 

なくても、テスト実行と、ちょうどそのコンポーネントをインポートすると、次のエラーがスローされます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プリセットを追加しようとしている：

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

これまでのところ何も、任意のアイデアを働きませんか？私は本当にこのコードを分割して個々のコンポーネントを処理したいと思っています。

Answer 1

私のために働いた解決策は、dynamic import babel pluginを使用することでしたが、キャッシュなしで実行することもできました。それはまだテストに失敗した後、残念ながら、再びキャッシュでそれを実行している

jest --no-cache

ので、何が起こっているのかわからないが、私は--no-cacheを残せば、それは動作します。テストを遅くするだけです。