ReferenceError: module is not defined - Karma/Jasmine configuration with Angular/Laravel app

Question

I have an existing Angular/Laravel app in which Laravel acts as an API to the angular frontend serving only JSON data. The page that loads the angular app, index.php

Answer 1

The error means angular was not able to inject your module. Most of the time this happens because of missing reference to script files. In this case, make sure to have all your script file is defined under [files] configuration of karma. Pay special attention to paths because if your script folder has nested structure, make sure to list as such. For example:

Scripts/Controllers/One/1.js 
Scripts/Controllers/One/2.js 

can be listed as in karma.conf.js>files as :

Scripts/Controllers/**/*.js

Answer 2

I encountered a similar message and turned out I got my angular-mocks file path wrong. I used npm to install angular and angular-mocks, and I specified their path wrongly in my Karma.conf.js like this:

files: [
    'node_modules/angular/angular.js',
    'node_modules/angular/angular-mocks.js',
    'scripts/*.js',
    'tests/*.js'
],

I should specify the path of angular-mocks.js as this:

'node_modules/angular-mocks/angular-mocks.js'

Very simple error, but could be time-consuming to locate if you just started with AngularJS unit testing and didn't know where to look.

Answer 3

Perhaps this will help someone.

The solution, for me, was to make sure angular-mocks.js was loaded before my tests. If you're not sure, you control the order in karma.conf.js under the following section:

// list of files / patterns to load in the browser
files: [
// include files / patterns here

Next, to get my test to actually load my angular app, I had to do the following:

describe("hello world", function() {
    var $rootScope;
    var $controller;
    beforeEach(module("YourAppNameHere"));
    beforeEach(inject(function($injector) {

        $rootScope = $injector.get('$rootScope');
        $controller = $injector.get('$controller');
        $scope = $rootScope.$new();

    }));
    beforeEach(inject(function($controller) {
        YourControllerHere = $controller("YourControllerHere");

    }));

    it("Should say hello", function() {
        expect(YourControllerHere.message).toBe("Hello");
    });

});

And in your controller,

app.controller('YourControllerHere', function() {

    this.message = "Hello";

});

Also, another way:

describe("YourControllerHere", function() {
    var $scope;
    var controller;

    beforeEach(function() {

        module("YourAppNameHere");

        inject(function(_$rootScope_, $controller) {

            $scope = _$rootScope_.$new();
            controller = $controller("YourControllerHere", {$scope: $scope});

        });

    });

    it("Should say hello", function() {
        expect(controller.message).toBe("Hello");
    });

});

Enjoy testing!

Answer 4

Just leave this here for future searchers.

If you are running angular unit tests in the browser directly without Karma (or in plunkr or jsfiddle ect...) Then it may be that

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.0/angular.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.0/angular-route.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.0/angular-cookies.js"></script> 

    <!-- The Mocha Setup goes BETWEEN angular and angular-mocks -->
    <script>
      mocha.setup({
        "ui": "bdd",
        "reporter": "html"
      });
    </script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.0/angular-mocks.js"></script>
    <script src="myApp.js"></script>
    <script src="myTest.js"></script> <!-- test is last -->

The Mocha Setup goes BETWEEN angular and angular-mocks