Vue Jest 测试套件无法运行：SyntaxError: Unexpected identifier答案

【问题标题】：Vue Jest test suite failed to run: SyntaxError: Unexpected identifierVue Jest 测试套件无法运行：SyntaxError: Unexpected identifier
【发布时间】：2019-10-28 23:12:14
【问题描述】：

我已经设置了我的 Jest，它运行正常。但是，当我为包含扩展运算符的文件创建测试时，测试套件会失败。

我正在使用 Jest 从 CLI 配置的 Vue。

我的尝试

我尝试将babel-plugin-transform-object-rest-spread 作为插件添加到 babel.config.js 中，但这没有结果。

我还尝试将@babel/plugin-proposal-object-rest-spread 作为插件添加到 babel.config.js 中，但这也没有结果。

babel.config.js：

module.exports = {
  presets: ["@babel/preset-env", "@vue/app"]
};

package.json（开玩笑的部分）：

"jest": {
    "collectCoverage": true,
    "collectCoverageFrom": [
      "**/*.{js,vue}",
      "!**/node_modules/**"
    ],
    "moduleFileExtensions": [
      "js",
      "json",
      "vue"
    ],
    "moduleNameMapper": {
      "^@/(.*)$": "<rootDir>/src/$1"
    },
    "transform": {
      "^.+\\.js?$": "<rootDir>/node_modules/babel-jest",
      ".*\\.(vue)$": "<rootDir>/node_modules/vue-jest"
    }
  }

component.spec.js：

import { shallowMount } from '@vue/test-utils';
import Component from '@/views/xx/x/Component.vue';
import Vue from 'vue';
import BootstrapVue from 'bootstrap-vue';

Vue.use(BootstrapVue);

describe('About component', () => {
  let wrapper;

  beforeEach(() => {
    wrapper = shallowMount(Component);
  });

  test('is a Vue instance', () => {
    expect(wrapper.isVueInstance()).toBeTruthy();
  });
});

错误：

 FAIL  src/__tests__/views/x/Component.spec.js
  ● Test suite failed to run

    D:\projects\project\project-frontend\node_modules\@babel\runtime-corejs2\helpers\esm\objectSpread.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import _Object$getOwnPropertyDescriptor from "../../core-js/object/get-own-property-descriptor";
                                                                                                    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

    SyntaxError: Unexpected identifier



      at ScriptTransformer._transformAndBuildScript (node_modules/@jest/transform/build/ScriptTransformer.js:471:17)
      at ScriptTransformer.transform (node_modules/@jest/transform/build/ScriptTransformer.js:513:25)
      at src/views/xx/x/Component.vue:670:49
      at Object.<anonymous> (src/views/xx/x/Component.vue:810:3)

【问题讨论】：

我在 JEST 和 vue-test-utils 中运行测试用例时遇到了类似的问题。您找到查询的解决方案了吗？
很遗憾，我还没有找到解决方案。

标签： vue.js jestjs babeljs

【解决方案1】：

在 package.json 中确保这个插件的“babel-core”版本达到 ^7.0.0-0 下。

“开发依赖”：{ "babel-core": "^7.0.0-0" }

【讨论】：

【解决方案2】：

对我来说，最后一步是在 jest config 中提供正确的 env 变量，解释为什么它需要它，可以找到 here。同时确保安装了 babel 包

共享整个配置 // 开玩笑

process.env.VUE_CLI_BABEL_TARGET_NODE = true;
process.env.VUE_CLI_BABEL_TRANSPILE_MODULES = true;

module.exports = {
    verbose: true,
    roots: ["<rootDir>/src/", "<rootDir>/spec/"],
    moduleFileExtensions: ['js', 'vue','json'],
    moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/src/$1',
    },

    transform: {
     "^.+\\.js$": "babel-jest",
     "^.+\\.vue$": "vue-jest",
    }, 
   snapshotSerializers: [
   "jest-serializer-vue"
   ]
  }

//在json包中

"@babel/core": "^7.9.6",
"@babel/plugin-transform-runtime": "^7.9.6",
"@babel/preset-env": "^7.9.5",
"babel-core": "^7.0.0-bridge.0",
"babel-jest": "^25.4.0",

【讨论】：