使用 Karma 运行 Vue.Js 单元测试时未捕获的语法错误

Question

我正在尝试使用 Karma 和 Mocha 为我的 Vue JS 项目设置单元测试（使用 vue-cli，我最初使用 Jest，但现在正在切换到 Karma）。我尝试使用karma start; karma run 运行我的测试，但我不断收到：

09 03 2018 17:02:49.778:INFO [karma]: Karma v2.0.0 server started at http://0.0.0.0:9876/
09 03 2018 17:02:49.786:INFO [launcher]: Launching browser Chrome with unlimited concurrency
09 03 2018 17:02:49.797:INFO [launcher]: Starting browser Chrome
09 03 2018 17:02:54.410:INFO [Chrome 64.0.3282 (Windows 10.0.0)]: Connected on socket mvbOII8qli3NiwBMAAAA with id 62867001
Chrome 64.0.3282 (Windows 10.0.0) ERROR
  {
"message": "Uncaught SyntaxError: Unexpected identifier\nat specs/PdfView.spec.js:3:8\n\nSyntaxError: Unexpected identifier",
"str": "Uncaught SyntaxError: Unexpected identifier\nat specs/PdfView.spec.js:3:8\n\nSyntaxError: Unexpected identifier"
  }

测试运行程序启动，但我猜一些配置问题正在阻止测试正常运行。此外，给我这些错误的不仅仅是这一个组件。

我的 karma.conf.js 文件：

var webpackConfig = require('../../build/webpack.test.conf')

module.exports = function karmaConfig (config) {
  config.set({
browsers: ['Chrome'],
frameworks: ['mocha'],
reporters: ['spec', 'coverage'],
files: ['specs/**/*.spec.js'],
preprocessors: {
  'test/unit/spec/**/*.spec.js': [ 'webpack', 'sourcemap' ]
},
plugins: [
  // Launchers
  'karma-chrome-launcher',

  // Test Libraries
  'karma-mocha',
  // 'karma-sinon-chai',

  // Preprocessors
  'karma-webpack',
  'karma-sourcemap-loader',

  // Reporters
  'karma-spec-reporter',
  'karma-coverage'
],
webpack: webpackConfig,
webpackMiddleware: {
  noInfo: true
},
singleRun: true,
coverageReporter: {
  dir: './coverage',
  reporters: [
    { type: 'lcov', subdir: '.' },
    { type: 'text-summary' }
  ]
}
  })
}

我的 .babelrc 文件：

{
  "presets": [
["env", {
  "modules": false,
  "targets": {
    "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
  }
}],
"stage-2"
 ],
"plugins": ["transform-vue-jsx", "transform-runtime"],
"env": {
"test": {
  "presets": ["env", "stage-2"],
  "plugins": ["transform-vue-jsx", "transform-es2015-modules-commonjs", "dynamic-import-node"]
}
}
}

我的 webpack.test.conf.js：

'use strict'
const utils = require('./utils')
const webpack = require('webpack')
const merge = require('webpack-merge')
const baseWebpackConfig = require('./webpack.base.conf')

const webpackConfig = merge(baseWebpackConfig, {
  // use inline sourcemap for karma-sourcemap-loader
 module: {
rules: utils.styleLoaders(),
loaders: [
  {
    test: /\.js$/,
    loader: 'babel-loader',
    exclude: /node_modules/
  },
  {
    test: /\.vue$/,
    loader: 'vue-loader'
  }
]
},
devtool: '#inline-source-map',
  resolveLoader: {
alias: {
  // necessary to to make lang="scss" work in test when using vue-loader's ?inject option
  // see discussion at https://github.com/vuejs/vue-loader/issues/724
  'scss-loader': 'sass-loader'
}
},
plugins: [
 new webpack.DefinePlugin({
  'process.env': require('../config/test.env')
})
 ]
})


delete webpackConfig.entry

module.exports = webpackConfig

PdfView.spec.js

import Vue from 'vue';

import Test from '@/components/Submission/PdfView';

describe('Test', () => {
it(`should render`, () => {

const Constructor = Vue.extend(Test);

const comp = new Constructor({}).$mount();

expect(comp.$el.textContent)
  .to.equal('Test Text');
});
});

Webpack ^3.6.0, 业力^2.0.0, Vue ^2.5.2

Answer 1

在我看来，import Test from '@/components/Submission/PdfView'; 中的 @ 没有得到解决。尝试将此添加到您的webpack.test.conf.js：

resolve: {
  alias: {
    '@': resolve('src')
  }
}