vue-cli 默认单元测试“Unexpected token {”错误答案

【问题标题】：vue-cli default unit tests "Unexpected token {" errorvue-cli 默认单元测试“Unexpected token {”错误
【发布时间】：2019-05-02 16:08:13
【问题描述】：

我还没有真正接触过vue-cli 为单元测试创建的配置文件，这些文件是：

// jest.config.js
module.exports = {
  moduleFileExtensions: ['js', 'jsx', 'json', 'vue'],
  transform: {
    '^.+\\.vue$': 'vue-jest',
    '.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub',
    '^.+\\.jsx?$': 'babel-jest',
    '^.+\\.js$': 'babel-jest',
  },
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/src/$1',
  },
  snapshotSerializers: ['jest-serializer-vue'],
  testMatch: ['**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)'],
  testURL: 'http://localhost/',
};

然而，当尝试使用npm run test:unit 运行以下测试时：

import { shallowMount } from '@vue/test-utils';
import App from '@/App.vue';

describe('App.vue', () => {
  it('renders props.msg when passed', () => {
    const msg = 'new message';
    const wrapper = shallowMount(App);
    expect(wrapper.text()).toMatch(msg);
  });
});

我收到以下错误：

后台管理员/tests/unit/app.spec.js:1 ({"Object":function(module,exports,require,__dirname,__filename,global,jest){import { shallowMount } from '@vue/test-utils';

SyntaxError: Unexpected token {

好像babel 无法解析导入语句（特别是{）。

似乎是什么导致了这个问题？

【问题讨论】：

似乎您将节点样式导出 (module.exports) 与 es6 样式导入 (import) 混淆了。即节点样式：module.exports & require; es6 风格：import & export.
怎么样？我只使用 ES6 导入语句，这些似乎是问题
参考stackoverflow.com/a/57175730

标签： vue.js jestjs babeljs vue-cli

【解决方案1】：

我刚刚问了一个类似的问题，here（在底部有一个答案）。

我在您的jest.config.js 文件中看到，您有'^.+\\.js$': 'babel-jest',，它肯定会获取该文件。显然 babel 并没有这样做，即使你告诉它这样做。

我通过将扩展添加到jsx 的已就位转换选项来解决此问题，如下所示：'^.+\\.(js|jsx)?$': 'babel-jest'。

如果这对您的实例不起作用，我会尝试确保您的所有依赖项都良好。该列表需要类似于：

"devDependencies": {
    "@vue/cli-plugin-babel": "^3.9.0",
    "@vue/cli-plugin-eslint": "^3.9.0",
    "@vue/cli-plugin-unit-jest": "^3.9.0",
    "@vue/cli-service": "^3.9.0",
    "@vue/test-utils": "1.0.0-beta.29",
    "babel-core": "7.0.0-bridge.0",
    "babel-eslint": "^10.0.1",
    "babel-jest": "^23.6.0",
    "eslint": "^5.16.0",
    "eslint-plugin-vue": "^5.0.0",
    "vue-template-compiler": "^2.6.10"
  },

希望添加js 有效！

【讨论】：