Set up unit testing with Mocha on an AngularJs app

Question

I'm trying to setup unit testing on my webapp using mocha. My webapp uses AngularJs and since I'm still new to this framework, I'm having a hard time to setup this.

In fact, is there a way to setup this by using nothing else than mocha? I mean, is it possible to setup my unit tests without Karma or any other test runners (and no browser)?

Here's my code to test :

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;
});

And here's my test code:

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;
    })

});

When I try to execute this, I receive this error:

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

Thank you for your help!

Unfortunately, I pretty sure I will need to setup karma or another test runner to make this works cause without doing this (or run it through a browser), the DOM will not exists and it's required. Correct me if this is wrong ;) — Jeep87c
– Jeep87c, Commented Jan 27, 2014 at 6:28
I did not address that in my answer but your beforeEach looks suspicious. beforeEach takes a function as parameter. Does angular.mock.module('MyModule') return a function? One that beforeEach can use? — Louis
– Louis, Commented Jan 27, 2014 at 12:00

Louis · Accepted Answer · 2014-01-27 11:57:12Z

Yes, you need something that will provide some sort of browser environment for your Angular code. There are multiple options:

jsdom.
Headless solutions like PhantomJS.
Actual browsers.

Each of these solutions provide a browser environment which is progressively closer to the "real thing".

What you need exactly depends on:

That minimum AngularJS requires. I don't use AngularJS so I don't know what this minimum is.
What minimum your own code requires.

For instance, I've used jsdom for unit tests for code that just navigates up and down the DOM tree. Jsdom was perfect for this. However, when I tried to use jsdom to test code that uses MutationObserver, that did not work because jsdom does not provide this API. I've had to use real browsers to perform these tests.

A word of caution: if you care at all about cross-browser compatibility nothing replaces testing code against actual browsers. Just yesterday I diagnosed a problem that happened only in Safari. There was no way to catch this problem using anything else than Safari to test the offending code.

I finally come to this solution : Grunt, karma and phantomJs. Playing with jsDom and AngularJs was not a good idea in my case. Thanks!

Pascal · Accepted Answer · 2019-08-01 06:49:37Z

0

For those facing this issue with jsdom for testing

Adding the following solve it for me seach for a day

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

of course you need to npm yarn install mutationobserver-shim

Hope this helps

answered Aug 1, 2019 at 6:49

Pascal

2,4154 gold badges28 silver badges41 bronze badges

Collectives™ on Stack Overflow

Set up unit testing with Mocha on an AngularJs app

2 Answers 2

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Linked

Related