在 AngularJs 应用程序上使用 Mocha 设置单元测试答案

【问题标题】：Set up unit testing with Mocha on an AngularJs app在 AngularJs 应用程序上使用 Mocha 设置单元测试
【发布时间】：2014-01-27 06:19:11
【问题描述】：

我正在尝试使用 mocha 在我的 web 应用上设置单元测试。我的 webapp 使用 AngularJs，由于我还是这个框架的新手，我很难设置它。

事实上，有没有办法只使用摩卡咖啡来设置它？我的意思是，是否可以在没有 Karma 或任何其他测试运行程序（也没有浏览器）的情况下设置我的单元测试？

这是我要测试的代码：

define(['angular'], function (angular) {
var module = angular.module('MyModule', []);

module.controller('MyController', ['$scope', '$window', function ($scope, $window) {
        $scope.test = function () {
            $window.alert('Not implemented yet.');
        };
    }]);

    return module;
});

这是我的测试代码：

require("chai");
require('../lib/angular/angular-mocks');

describe("Unit testing example", function() {

    beforeEach(angular.mock.module('MyModule'));

    it('should test nothing', function() {
        expect(true).to.be.true;
    })

});

当我尝试执行此操作时，我收到此错误：

angular.mock = {};
^
ReferenceError: angular is not defined

感谢您的帮助！

【问题讨论】：

不幸的是，我很确定我需要设置 karma 或其他测试运行程序才能使其正常工作，因为如果不这样做（或通过浏览器运行它），DOM 将不存在并且它是必需的。如果这是错误的，请纠正我；）
我没有在回答中解决这个问题，但您的 beforeEach 看起来很可疑。 beforeEach 将函数作为参数。 angular.mock.module('MyModule') 返回一个函数吗？ beforeEach可以用的吗？

标签： angularjs unit-testing mocha.js karma-runner

【解决方案1】：

是的，您需要能够为您的 Angular 代码提供某种浏览器环境的东西。有多种选择：

jsdom.
PhantomJS 等无头解决方案。
实际浏览器。

这些解决方案中的每一个都提供了一个越来越接近“真实事物”的浏览器环境。

你需要什么取决于：

AngularJS 的最低要求。我不使用 AngularJS，所以我不知道这个最小值是多少。
您的自己的代码至少需要什么。

例如，我使用 jsdom 对仅在 DOM 树上上下导航的代码进行单元测试。 Jsdom 非常适合这个。但是，当我尝试使用 jsdom 来测试使用 MutationObserver 的代码时，由于 jsdom 不提供此 API，因此无法正常工作。我不得不使用真正的浏览器来执行这些测试。

请注意：如果您关心跨浏览器兼容性，nothing 会取代针对实际浏览器的测试代码。就在昨天，我诊断出一个仅在 Safari 中发生的问题。除了使用 Safari 来测试有问题的代码之外，没有其他方法可以解决这个问题。

【讨论】：

我终于找到了这个解决方案：Grunt、karma 和 phantomJs。在我的情况下，使用 jsDom 和 AngularJs 并不是一个好主意。谢谢！

【解决方案2】：

对于那些面临 jsdom 测试问题的人

添加以下内容帮我解决一天

require('mutationobserver-shim')
global.MutationObserver = global.window.MutationObserver

当然你需要 npm yarn install mutationobserver-shim

希望对你有帮助

【讨论】：