AngularJS单元测试：beforeEach中angular.mock.module与angular.module的区别

嘿，刚上手Jasmine和Karma做AngularJS单元测试是吧？这俩写法确实容易搞懵人，我来给你讲明白它们的区别和用法～

先搞懂核心区别 #

这两行代码看起来相似，但本质完全是两回事：

1. beforeEach(angular.mock.module("app")); —— 测试环境的「模块加载器」 #

这是AngularJS测试工具库专门提供的测试专用函数，作用是把指定的app模块（包括它的所有依赖模块）加载到测试用的Angular注入器中。

简单说就是：告诉测试框架“我接下来要测试这个模块里的东西，麻烦把这个模块的所有组件（服务、控制器、指令等）都准备好，让我后面能通过inject拿到它们”。

2. beforeEach(function () { angular.module("app"); }); —— 单纯的「模块获取器」 #

angular.module("app")是Angular核心API的一部分，它的作用是获取已经定义好的app模块对象（如果模块不存在还会报错）。但它完全没有和测试环境交互，既不会把模块加载到测试注入器，也不会为后续的测试做任何准备。

换句话说，这行代码在beforeEach里单独执行，就像你在控制台打印了个模块对象，对测试没有任何实际帮助。

用代码示例看效果 #

正确的测试写法（用angular.mock.module） #

describe('MyAppService', function() {
  var MyAppService;

  // 正确加载app模块到测试环境
  beforeEach(angular.mock.module("app"));

  // 现在可以正常注入模块里的服务了
  beforeEach(inject(function(_MyAppService_) {
    MyAppService = _MyAppService_;
  }));

  it('should return correct value', function() {
    expect(MyAppService.getHello()).toBe("Hello Angular!");
  });
});

这个测试能正常运行，因为angular.mock.module已经把app模块加载好了，inject能顺利拿到MyAppService。

无效的测试写法（用angular.module） #

describe('MyAppService', function() {
  var MyAppService;

  // 这行代码只是获取模块对象，没加载到测试环境
  beforeEach(function () { angular.module("app"); });

  beforeEach(inject(function(_MyAppService_) {
    // 这里会直接报错：Unknown provider: MyAppServiceProvider <- MyAppService
    MyAppService = _MyAppService_;
  }));

  it('should return correct value', function() {
    expect(MyAppService.getHello()).toBe("Hello Angular!");
  });
});

运行这个测试会直接抛出依赖找不到的错误，因为测试注入器根本不知道app模块的存在。

各自的适用场景 #

用angular.mock.module("app")的场景 #

所有需要测试AngularJS模块内组件的场景，这是单元测试中初始化模块的标准方式。你甚至可以省略angular.mock.前缀，因为Karma会把module函数挂到全局作用域里，直接写beforeEach(module("app"));也可以。

用angular.module("app")的场景 #

几乎不会在beforeEach里单独使用它。只有当你需要动态修改模块配置时，可能会先通过它获取模块对象，再做修改，但这种场景通常也会结合angular.mock.module来实现，比如：

// 先获取模块，再添加新的依赖
var appModule = angular.module("app");
appModule.constant("TEST_URL", "http://test.example.com");

// 然后加载修改后的模块到测试环境
beforeEach(module("app"));

不过更常见的写法是直接在angular.mock.module里通过配置函数修改：

beforeEach(module("app", function($provide) {
  $provide.constant("TEST_URL", "http://test.example.com");
}));

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