如何为Webpack部署的AngularJS项目集成Karma与Jasmine

我完全懂你花一整天折腾Karma配置的崩溃感——Webpack+AngularJS的Karma集成确实藏着不少坑，尤其是模块引用这块，再加上你用Jade开发模板，又多了一层编译的麻烦。下面我给你拆解几个关键的排查点和解决方案，应该能帮你搞定这个根模块引用的问题：

1. 适配Karma专属的Webpack配置 #

Karma不能直接复用项目的生产/开发Webpack配置，因为测试环境的打包逻辑和业务环境不一样。你大概率踩了这个常见坑：没在Karma的Webpack配置里正确处理模块解析和测试入口。

• 确保Karma的Webpack配置中，resolve.extensions包含.js和.jade（别忘了配jade-loader）
• 不要直接用项目的Webpack入口，建议单独写一个测试入口文件（比如test-entry.js），手动控制模块加载顺序：

  // test-entry.js
  // 先导入核心依赖
  import 'angular';
  import 'angular-mocks';
  // 导入根应用模块的定义文件
  import '../src/app/app.module.js';
  // 批量导入所有测试文件（用Webpack上下文导入自动匹配）
  const testsContext = require.context('./', true, /\.spec\.js$/);
  testsContext.keys().forEach(testsContext);
  

2. 确保AngularJS模块全局可访问 #

AngularJS的模块是注册在全局angular对象上的，但Webpack默认会把代码包裹在闭包里，导致测试环境找不到你的根模块。你需要确保模块被正确暴露：

• 在根模块的定义文件里，显式把模块绑定到全局，或者确保angular是全局变量：

  // app.module.js
  // 方式1：直接绑定到window
  window.myApp = angular.module('myApp', [/* 依赖模块列表 */]);
  // 方式2：用Webpack插件全局提供angular
  // 在Webpack配置里加：plugins: [new webpack.ProvidePlugin({ angular: 'angular' })]
  

• 测试文件里不要用ES导入的方式拿模块，而是用AngularJS测试工具的angular.mock.module()加载：

  // example.spec.js
  describe('MyApp Root Module', () => {
    beforeEach(() => {
      // 加载根模块
      angular.mock.module('myApp');
    });
  
    it('should be defined', inject(($rootScope) => {
      // 验证模块是否加载成功
      expect($rootScope).toBeDefined();
    }));
  });
  

3. 处理Jade模板的编译问题 #

你的项目用Jade写组件/指令模板，Karma必须先把Jade编译成HTML，否则AngularJS找不到模板，会间接导致模块初始化失败：

• 在Karma的Webpack配置中添加Jade编译的loader规则：

  // karma.conf.js 中的webpack.module.rules
  {
    test: /\.jade$/,
    use: ['html-loader', 'jade-loader']
  }
  

• 如果组件用templateUrl引用Jade文件，建议用ngtemplate-loader把模板内联到JS中，避免测试环境依赖外部文件：

  {
    test: /\.jade$/,
    use: [
      'ngtemplate-loader?relativeTo=' + (__dirname + '/src'),
      'html-loader',
      'jade-loader'
    ]
  }
  

4. 排查模块依赖的加载顺序 #

AngularJS对模块加载顺序要求严格，如果根模块依赖的服务、组件模块没在测试前加载，会直接导致根模块无法初始化：

• 在test-entry.js中，确保先导入所有依赖模块，再导入根模块（或者用Webpack上下文导入自动处理，但关键模块最好显式控制）
• 在Karma的files配置里，把angular.js和angular-mocks.js放在最前面加载：

  // karma.conf.js
  files: [
    'node_modules/angular/angular.js',
    'node_modules/angular-mocks/angular-mocks.js',
    'test-entry.js' // 这个文件会被Webpack预处理
  ],
  preprocessors: {
    'test-entry.js': ['webpack']
  }
  

按照上面的步骤逐一排查，应该就能解决你无法获取根应用模块引用的问题了。

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