Почему Jest выдает ошибку при динамическом импорте () при расчете покрытия для приложения Vue.js?

Question

У меня есть приложение Vue.js, которое покрыто модульными тестами, написанными на Jest.

Когда я запускаю Jest, мои модульные тесты работают и проходят зеленый, но затем Jest ломается при сборе данных покрытия - с помощью приведенного нижеошибка:

Failed to collect coverage from C:\...\router.js
ERROR: C:/.../router.js: Unexpected token (7:19)
STACK: SyntaxError: C:/.../router.js: Unexpected token (7:19)
   5 | Vue.use(Router);
   6 | 
>  7 | const feed = () => import(/* webpackChunkName: "foo" */'~/components/pages/feed/FeedPage').then(cmp => cmp.default || cmp);
     |                    ^
   8 | const lobby = () => import(/* webpackChunkName: "foo" */'~/components/pages/lobby/LobbyPage').then(cmp => cmp.default || cmp);
   9 | const home = () => import(/* webpackChunkName: "foo" */'~/components/pages/home/Home').then(cmp => cmp.default || cmp);
  10 | const wip = () => import(/* webpackChunkName: "global" */'~/components/pages/wip/WorkInProgressPage').then(cmp => cmp.default || cmp);
    at Parser.pp$5.raise (C:\...\tests\unit\node_modules\babylon\lib\index.js:4454:13)
    at Parser.pp.unexpected (C:\...\tests\unit\node_modules\babylon\lib\index.js:1761:8)
    at Parser.pp$3.parseExprAtom (C:\...\tests\unit\node_modules\babylon\lib\index.js:3627:50)
    at Parser.pp$3.parseExprSubscripts (C:\...\tests\unit\node_modules\babylon\lib\index.js:3494:19)
    at Parser.pp$3.parseMaybeUnary (C:\...\tests\unit\node_modules\babylon\lib\index.js:3474:19)
    at Parser.pp$3.parseExprOps (C:\...\tests\unit\node_modules\babylon\lib\index.js:3404:19)
    at Parser.pp$3.parseMaybeConditional (C:\...\tests\unit\node_modules\babylon\lib\index.js:3381:19)
    at Parser.pp$3.parseMaybeAssign (C:\...\tests\unit\node_modules\babylon\lib\index.js:3344:19)
    at Parser.pp$3.parseFunctionBody (C:\...\tests\unit\node_modules\babylon\lib\index.js:4226:22)
    at Parser.pp$3.parseArrowExpression (C:\...\tests\unit\node_modules\babylon\lib\index.js:4190:8)

=============================== Coverage summary ===============================
Statements   : 3.22% ( 840/26062 )
Branches     : 0.67% ( 123/18349 )
Functions    : 1.2% ( 96/7986 )
Lines        : 5.19% ( 828/15961 )
================================================================================

Вот моя конфигурация Jest как часть package.json.

"jest": {
    "rootDir": "../",
    "moduleFileExtensions": [
      "js",
      "vue"
    ],
    "transform": {
      "^.+\\.vue$": "<rootDir>/tests/unit/node_modules/jest-vue-preprocessor",
      "^.+\\.js$": "<rootDir>/tests/unit/node_modules/babel-jest"
    },
    "moduleNameMapper": {
      "^~/(.*)$": "<rootDir>/$1"
    },
    "collectCoverage": true,
    "collectCoverageFrom": [
      "**/*.{js,vue}",
      "!**/node_modules/**"
    ],
    "coverageReporters": [
        "html",
        "text-summary"
    ],
    "coverageDirectory": "coverage",
    "notify": true,
    "setupTestFrameworkScriptFile": "<rootDir>/tests/setup.js"
}

Как видите, Джест жалуется на использование функции import() в моем файле router.js. Почему я получаю вышеуказанную ошибку и как ее исправить?

Answer 1

Проблема возникла из-за конфигурации Babel, которая не поддерживала динамический импорт.

Решено с помощью:

1. Установка @ babel / plugin-syntax-dynamic-импорт

   npm i @babel/plugin-syntax-dynamic-import

2. Добавление его в .babelrc примерно так: { ... "plugins": [ "@babel/plugin-syntax-dynamic-import", ], ... }