Jest 无法导入 vue-test-utils 并出现“SyntaxError: Cannot use import statement outside a module”异常答案

【问题标题】：Jest fails to import vue-test-utils with "SyntaxError: Cannot use import statement outside a module" exceptionJest 无法导入 vue-test-utils 并出现“SyntaxError: Cannot use import statement outside a module”异常
【发布时间】：2021-07-31 09:04:30
【问题描述】：

我正在使用配置了 Jest 和 Typescript 的 NuxtJS。现在碰巧我的小示例测试由于异常而无法运行。

 Details:

    /home/xetra11/development/myapp/test/Navigation.spec.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import { mount } from '@vue/test-utils';
                                                                                             ^^^^^^

    SyntaxError: Cannot use import statement outside a module

      at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1350:14)

我的单元测试比较简单

import { mount } from '@vue/test-utils'
import Navigation from '@/components/layout/Navigation.vue'

describe('navigation', () => {
  test('is correct', () => {
    const wrapper = mount(Navigation)
    expect(wrapper.vm).toBeTruthy()
  })
})

这是我的jest.config.js（我添加了transformIgnorePatterns，因为很多谷歌搜索的解决方案都建议这样做）

module.exports = {
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/$1',
    '^~/(.*)$': '<rootDir>/$1',
    '^vue$': 'vue/dist/vue.common.js'
  },
  moduleFileExtensions: [
    'ts',
    'js',
    'vue',
    'json'
  ],
  transform: {
    "^.+\\.ts$": "ts-jest",
    '^.+\\.js$': 'babel-jest',
    '.*\\.(vue)$': 'vue-jest'
  },
  transformIgnorePatterns: [
    "node_modules/@vue/test-utils/dist/vue-test-utils.js",
  ],
  collectCoverage: true,
  collectCoverageFrom: [
    '<rootDir>/components/**/*.vue',
    '<rootDir>/pages/**/*.vue'
  ]
}

这里也是摘自我的package.json

 "devDependencies": {
    "@nuxt/types": "^2.15.3",
    "@nuxt/typescript-build": "^2.1.0",
    "@nuxtjs/vuetify": "^1.11.3",
    "@vue/test-utils": "^1.1.3",
    "babel-core": "7.0.0-bridge.0",
    "babel-jest": "^26.6.3",
    "jest": "^26.6.3",
    "ts-jest": "^26.5.4",
    "vue-jest": "^3.0.4"
  }

知道这里的问题是什么吗？

【问题讨论】：

尝试更新节点到最新版本
我在节点 16.1.0 - 没有帮助
你能链接到复制品吗？

标签： javascript typescript vue.js jestjs nuxt.js

【解决方案1】：

我在安装 babel-core 网桥时遇到了同样的错误：

npm install --save-dev babel-core@^7.0.0-bridge.0

我还需要 jest.config.js 中的以下内容：

  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/src/$1',
  },

Documentation

【讨论】：