Vue项目用Karma+Jasmine测试组件时出现require未定义错误

我之前也碰到过一模一样的情况，这个报错本质是PhantomJS本身不支持CommonJS的require语法，而你的测试代码直接用了require，同时webpack预处理器的配置没完全覆盖到需要处理的文件，另外还缺少处理.vue文件的必要loader。下面一步步帮你搞定：

1. 先补全必要的依赖包 #

你需要安装处理Vue文件的loader和相关依赖，在项目根目录执行：

npm install karma-webpack vue-loader vue-template-compiler --save-dev

（如果已经装过可以跳过，但要确保版本和你的Vue版本兼容）

2. 修正karma.conf.js配置 #

你的配置里有几个关键问题：预处理器路径匹配不准确、webpack缺少.vue文件处理规则、files配置太宽泛。修改后的配置如下：

module.exports = function(config) {
  // 明确指定测试文件路径，避免匹配到无关文件
  const testFiles = './**/*.spec.js';
  config.set({
    frameworks: ['jasmine'],
    // 只加载测试文件，src里的文件会通过测试文件的引用自动引入
    files: [testFiles],
    reporters: ['dots'],
    singleRun: true,
    autoWatch: false,
    browsers: ['PhantomJS'],
    preprocessors: {
      // 只对测试文件应用webpack预处理器
      [testFiles]: ['webpack']
    },
    webpack: {
      module: {
        rules: [
          {
            test: /\.js$/,
            exclude: /node_modules/,
            loader: 'babel-loader'
          },
          // 添加处理.vue文件的loader规则
          {
            test: /\.vue$/,
            loader: 'vue-loader'
          }
        ]
      },
      resolve: {
        // 配置扩展名，import/require时可以省略后缀
        extensions: ['.js', '.vue']
      },
      watch: true
    },
    webpackServer: {
      noInfo: true
    }
  });
};

3. 调整测试文件的写法 #

虽然require可以用，但更推荐用ES6的import语法，同时给你加了一个组件渲染内容的测试示例（更贴近真实场景）：

import Vue from 'vue'
import ComponentA from '../src/Log.vue'

describe('Log.vue', function () {
  // 断言组件选项的data值
  it('should have correct message', function () {
    expect(ComponentA.data().msg).toBe('Hello from Log!')
  })

  // 额外建议：测试组件渲染后的实际内容
  it('renders correct message in DOM', function () {
    const Constructor = Vue.extend(ComponentA)
    const vm = new Constructor().$mount()
    expect(vm.$el.textContent).toContain('Hello from Log!')
  })
})

4. 验证配置是否生效 #

运行测试命令（比如karma start karma.conf.js），此时webpack会完全接管测试文件的模块解析，把CommonJS/ES6模块语法转成PhantomJS能识别的代码，.vue文件也会被正确编译，就不会再报找不到require的错误了。

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