vue test utils SyntaxError: Unexpected token import

Question

I am getting error SyntaxError: Unexpected token import in index file where I am trying to load components via lazy load approach.

const templates = () => import('@/pages/templates');

It works fine if used the syntax:

import templates from '@/pages/templates';

Answer 1

Dynamic import statements are a Webpack feature*, so when you compile code with Jest, dynamic import will be undefined. You can solve this by using babel-plugin-dynamic-import-node in your babel config for tests:

// .babelrc
{
  "env": {
    "test": {
      "presets": [
        ["es2015", { "modules": false }],
        "react",
        "stage-0"
      ],
      "plugins": [
        "transform-es2015-modules-commonjs",
        "dynamic-import-node"
      ]
    }
  }
}

*Although it conforms to a TC39 spec