未定义 Angular 返回模块中的测试服务答案

【问题标题】：Testing service in Angular returns module is not defined未定义 Angular 返回模块中的测试服务
【发布时间】：2012-10-31 08:20:28
【问题描述】：

我正在尝试在我的项目中运行默认服务单元测试（取自 GitHub 上的 Angular Seed 项目），但我不断收到错误消息“未定义模块”。

我已经读到这可能与 referenced JavaScript files 的顺序有关，但我似乎无法让它工作，所以希望你们中的一个人能够提供帮助。

我的测试配置如下：

basePath = '../';

文件 = [
'public/javascripts/lib/jquery-1.8.2.js',
'public/javascripts/lib/angular.js',
'public/javascripts/lib/angular-.js',
'公共/app.js',
'public/controllers/.js',
'public/directives.js',
'公共/filters.js',
'公共/services.js',
茉莉花,
茉莉花适配器，
'public/javascripts/lib/angular-mocks.js',
'test/unit/*.js' ];

autoWatch = true;

浏览器 = ['Chrome'];

junitReporter = { outputFile：'test_out/unit.xml'，套件：'unit' };

服务如下所示：

angular.module('myApp.services', []).
  value('version', '0.1');

测试看起来像这样：

'use strict';

describe('service', function() {
  beforeEach(module('myApp.services'));


  describe('version', function() {
    it('should return current version', inject(function(version) {
      expect(version).toEqual('0.1');
    }));
  });
});

而通过testacular运行测试时的错误是这样的：

ReferenceError: 模块未定义

【问题讨论】：

你能在某处分享你的项目吗？我也许能帮上忙。您是否尝试为 testacular 打开 DEBUG 级别以查看根据您的配置实际加载了哪些文件？现在可疑的部分是这种模式：public/javascripts/lib/angular-.js - 它应该匹配什么？
@JohnDoe 谢谢你的工作。如果您添加答案，我会将其标记为已解决。原因是我正在关注种子项目，它是这样做的，并且奏效了。不知道是不是因为是旧版本。
@Dofs 是“'public/javascripts/lib/angular-.js'”和“'public/controllers/.js'”错字吗？
@RyanO'Neill 抱歉，是的，这是一个错字。

标签： unit-testing angularjs karma-runner

【解决方案1】：

我们在单元测试中使用没有“角度”的“模块”，它工作正常。

咖啡脚本：

describe 'DiscussionServicesSpec', ->
    beforeEach module 'DiscussionServices'
    beforeEach inject ... etc.

编译成

JavaScript：

describe('DiscussionServices', function() {
    beforeEach(module('DiscussionServices'));
    beforeEach(inject(function ... etc.

我唯一一次看到类似您描述的错误的情况是，如果在 testacular.conf.js 文件中，angular-mocks.js 文件未在规范尝试使用“模块”之前的文件部分中列出。如果我把它放在“文件”列表中的测试之后，我会得到

ReferenceError: Can't find variable: module

（我们的测试是通过 PhantomJS 运行的）

【讨论】：

最后的结论是角度模拟是一个要求。

【解决方案2】：

您缺少 angular-mocks.js 文件。

【讨论】：

请注意，angular.module 和 angular.mock.module不相同。 window.module 函数是 angular.mock.module 的别名。请参阅this answer 了解更多信息。
正如之前的评论所说，angular.module 不是 angular.mock.module 的别名。
如果它提供有关如何提供所述文件的任何建议，此答案将更加有用。我需要安装 Bower，然后是 NgMocks。
答案只提供了部分解决方案。这实际上是评论而不是解释。下面的一些答案要详细得多。
对于初学者，您需要在karma.conf.js文件中添加对angular-mocks的引用，并通过Karma而不是Jasmine运行测试。这样，当 Karma 运行时，它会选择 angular-mocks 扩展并将它们合并到环境中。

【解决方案3】：

window.module 函数来自angular-mocks.js，是angular.mock.module 的简写。如the docs 中所述，module 函数仅适用于 Jasmine。

使用Testacular，以下示例配置文件将加载angular-mocks.js。

/** example testacular.conf.js */

basePath = '../';
files = [
  JASMINE,
  JASMINE_ADAPTER,
  'path/to/angular.js',
  'path/to/angular-mocks.js',   // for angular.mock.module and inject.
  'src/js/**/*.js',             // application sources
  'test/unit/**/*.spec.js'      // specs
];
autoWatch = true;
browsers = ['Chrome'];

而且，正如其他地方所建议的，您可以运行带有调试日志记录的 Testacular 以查看加载了哪些脚本（您也可以在检查器中看到相同的内容）：

testacular --log-level debug start config/testacular.conf.js

angular.mock.inject docs 包含一个非常完整的示例。

【讨论】：

也许值得注意的是，module 现在也适用于 mocha

【解决方案4】：

我遇到了同样的问题，我明白为什么它不起作用： jasmine.js javascript 必须在 angular-mocks.js 文件之前引用。实际上，angular-mocks.js 会检查 Jasmine 是否已加载，只有加载时才会将模块功能添加到窗口中。

这是 Angular Mocks 代码的摘录：

（在我下面的几个关于“黑客”的 cmets 之后编辑：这只是代码的摘录，这不是你需要自己写的东西，它已经存在了！） p>

window.jasmine && (function(window) {

[...]

  window.module = angular.mock.module = function() {
    var moduleFns = Array.prototype.slice.call(arguments, 0);
    return isSpecRunning() ? workFn() : workFn;
    /////////////////////
    [...]
  };

简而言之： 只需参考你的 jasmine.js before angular-mocks.js 就可以了。

【讨论】：

这也可以通过确保在 angular-mocks 之前加载 jasmine javascript 文件来解决。比进行骇人听闻的更改以使东西正常工作更清洁的解决方案。
@foomip 谁建议进行骇人听闻的更改？
您实际上在您的应用程序中插入了一个 hack，以确保以正确的方式加载 - 我并不是说以一种糟糕的方式进行 hack（您编写该 sn 的方式没有任何问题-p of code）但是当更新 jasmine 或其他东西导致您的 sn-p 中断或不再按预期运行时会发生什么？它可能发生也可能不会发生，但这是您代码中的一个责任，现在可以避免，您不觉得吗？
@foomip：我不确定你指的是什么，但如果是关于我上面的代码，这不是我写的，我只是引用它来解释这个问题。该代码是角度模拟的一部分。修复只是在另一个文件之前引用一个文件。

【解决方案5】：

我在我的 karma 配置中包含了 angular-mocks.js，但仍然出现错误。事实证明，文件数组中的顺序很重要。 (duh) 就像在 html 文档的头部一样，如果脚本在定义之前调用 angular，则会发生错误。所以我只需要在 angular.js 和 angular-mocks.js 之后包含我的 app.js。

【讨论】：

【解决方案6】：

如果您使用的是 Yeoman 及其角度生成器，您可能会收到此错误。特别是当你做教程时 (._.)
我通过将 angular-mocks.js 文件从 bower_components/angular-mocks 目录复制到 test/mock 目录来修复它。当然，您必须确保您的 karma.conf.js 文件配置正确。
您好！

【讨论】：

【解决方案7】：

我在做var module = angular.module('my',[]) 之类的事情时遇到了同样的问题。我需要确保它被 IIFE 包围

【讨论】：