Question

我还没有真正接触过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);
  });
});

我收到以下错误：

back-admin / tests / unit / app.spec.js：1      （{“ Object”：function（module，exports，require，__ dirname，__ filename，global，jest）{import {shallowMount} from'@ vue / test-utils';

SyntaxError：意外令牌{

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

什么似乎导致了此问题？

Answer 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有用！

vue-cli默认单元测试“意外令牌{”错误

1 个答案: