使用Karma运行Vue.js单元测试时出现未捕获语法错误

我之前也踩过从Jest转Karma+Mocha的坑，结合你用的Webpack 3.6.0和Karma 2.x版本，给你梳理几个最可能的配置问题点，你可以逐一排查：

1. 检查karma.conf.js核心配置 #

这是最容易出问题的地方，几个关键项要确认：

• 框架与插件：确保已经引入mocha、chai（如果用Chai断言），并且安装了对应版本的插件（Karma 2.x不要用太新的插件版本，比如karma-webpack建议用^3.0.0版本，和Webpack3兼容）：

  frameworks: ['mocha', 'chai'],
  plugins: [
    'karma-mocha',
    'karma-chai',
    'karma-webpack',
    'karma-sourcemap-loader',
    'karma-chrome-launcher' // 或者PhantomJS/ChromeHeadless
  ]
  

• 文件与预处理器：要让Karma正确识别测试文件并通过Webpack预处理：

  files: [
    'test/**/*.spec.js' // 你的测试文件路径
  ],
  preprocessors: {
    'test/**/*.spec.js': ['webpack', 'sourcemap']
  }
  

• Webpack配置引入：确保正确导入你的webpack.test.conf.js，并且设置webpackMiddleware的noInfo: true避免日志干扰：

  webpack: require('./webpack.test.conf'),
  webpackMiddleware: {
    noInfo: true
  }
  

2. 修正webpack.test.conf.js的测试环境配置 #

Webpack3的测试配置需要适配Vue组件和ES6转译：

• Vue文件处理：必须配置vue-loader和对应版本的vue-template-compiler（版本要和项目中Vue的版本完全一致）：

  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          compilerOptions: {
            preserveWhitespace: false
          }
        }
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      }
    ]
  },
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': path.resolve(__dirname, 'src')
    }
  }
  

• SourceMap设置：开启inline-source-map让Karma能正确映射源码，方便调试：

  devtool: 'inline-source-map'
  

3. 确认.babelrc的测试环境适配 #

如果你的项目用Babel转译，要确保测试环境的配置正确：

• 若使用Babel 6，要包含es2015预设；若用Babel7，用@babel/preset-env并配置目标环境：

  {
    "presets": [
      ["@babel/preset-env", {
        "targets": {
          "browsers": ["last 2 versions", "ie >= 9"]
        }
      }]
    ],
    "env": {
      "test": {
        "presets": [["@babel/preset-env", { "modules": "commonjs" }]]
      }
    }
  }
  

• 注意：如果项目中用了Vue的装饰器或其他语法糖，要确保对应的Babel插件（比如babel-plugin-transform-vue-jsx）在测试环境也启用。

4. 检查测试文件的基本写法 #

确保你的PdfView.spec.js符合Mocha+Vue测试的规范：

• 正确引入Vue和测试工具（比如@vue/test-utils，注意Vue2要对应^1.x版本）：

  import Vue from 'vue'
  import PdfView from '@/components/PdfView.vue'
  import { shallowMount } from '@vue/test-utils'
  
  describe('PdfView Component', () => {
    it('should render without errors', () => {
      const wrapper = shallowMount(PdfView)
      expect(wrapper.isVueInstance()).to.be.true
    })
  })
  

• 不要忘记在测试文件顶部引入Chai断言（如果karma.conf没全局注入的话）：

  import { expect } from 'chai'
  

5. 命令执行的小细节 #

karma start本身会启动测试服务器并自动运行测试（默认autoWatch: true），你不需要再加karma run。如果想要单次运行测试后退出，可以用：

karma start --single-run

最后，记得确认所有依赖都安装正确，执行一下：

npm install karma karma-mocha karma-chai karma-webpack@3 karma-sourcemap-loader karma-chrome-launcher vue-loader vue-template-compiler babel-loader @babel/core @babel/preset-env --save-dev

内容的提问来源于stack exchange，提问作者Josh