在AngularJs應用上使用Mocha設置單元測試

Question

我正在嘗試使用Mocha在我的Web應用程序上設置單元測試。 我的web應用程序使用AngularJs，由於我對這個框架還不熟悉，所以我很難設置它。

實際上，有沒有一種方法可以通過使用Mocha來進行設置？ 我的意思是，是否可以在沒有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

謝謝您的幫助！

Answer 1

是的，您需要為Angular代碼提供某種瀏覽器環境的工具。 有多種選擇：

• jsdom 。

• 無頭的解決方案，例如PhantomJS。

• 實際的瀏覽器。

這些解決方案中的每一個都提供了一種逐漸接近“真實事物”的瀏覽器環境。

您到底需要什么取決於：

• AngularJS要求的最低要求。 我不使用AngularJS，所以我不知道這個最小值是多少。

• 您自己的代碼最低要求是什么。

例如，我將jsdom用於僅在DOM樹上下導航的代碼的單元測試。 Jsdom對此很完美。 但是，當我嘗試使用jsdom測試使用MutationObserver的代碼時，該操作不起作用，因為jsdom不提供此API。 我不得不使用真實的瀏覽器來執行這些測試。

請注意：如果您完全關心跨瀏覽器的兼容性，那么沒有什么可以代替針對實際瀏覽器的測試代碼。 就在昨天，我診斷出僅在Safari中發生的問題。 除了Safari以外，沒有其他方法可以用來測試有問題的代碼來解決此問題。

Answer 2

對於那些使用jsdom進行測試的人

添加以下內容為我解決了一天

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

當然，您需要在npm yarn上安裝mutationobserver-shim

希望這可以幫助