Skip to content

ReferenceError: module is not defined

17 November 2013

This is a line that I do not want to see anymore. It happened to me when I tried to set up testing an angular application with some directives, using karma. I thought that I had followed all the steps to set it all up correctly, but I kept on getting this line, indicating that something was indeed wrong. I finally got it all to work, and to prevent others (and myself) the hassle again of finding out what you have to do to get karma working correctly (especially when you already have some js files that you would like to test), I will outline here shortly what I did.

Being a good GDD developer (guilt driven developer for first writing code and then starting to add test code) I already had some files with code and now it was time to add some tests for it. I installed karma, answered the required questions for creating a config file and started karma. Failure:

Uncaught ReferenceError: angular is not defined

First failure was that the source files that you own code depends on, should be described in the correct order in your karma.conf.js file. So the base looked like this:

// list of files / patterns to load in the browser
files: [
  "bower_components/**/*.js", "js/**/*.js", "app/**/*.js", "**/*.spec.js"
]

This resulted in everything being loaded, but not in the correct order. This particular annoyance had already bitten me before, so after changing my files list to the correct order, I got a bit further. The lines now looked like:

// list of files / patterns to load in the browser
files: [
  "bower_components/jquery/jquery.js",
  "bower_components/angular/angular.js",
  "bower_components/angular-route/angular-route.js",
  "bower_components/angular-bootstrap/ui-bootstrap.js",
  "bower_components/elastic.js/dist/elastic.js",
  "bower_components/elastic.js/dist/elastic-angular-client.js",
  "app/js/**/*.js",
  "app/js/general/directives.js",
  "app/searchbooks/**/*.js",
  "test/**/*Spec.js"
]

Step further, but now the module is not defined error showed up. The directive that I wanted to test, had a dependency on angular (obviously) and this was defined in the beforeEach step:

describe('button directive', function () {
    var $compile, $rootScope;
    beforeEach(module('directives.button'));
    beforeEach(inject(function (_$compile_, _$rootScope_) {
        $compile = _$compile_;
        $rootScope = _$rootScope_;
    }));

...

Since the error was indicating that module could not be defined, I changed the beforeEach line to

beforeEach(angular.module('directives.button'));

And now that particular error was gone, but another error popped up about the inspect not being found. So I added the angular keyword also in front of the inject function, but this didn’t work out either.

Well, after a lot of trials and errors, I found out that I had to include the test/lib/angular-mocks.js file in the dependencies as well. That solved it, since module could now be found as this is defined in the angular-mocks.js.

Also make sure that you do not include the angular-scenario.js file in the dependencies as well, since then it will not run any of the karma tests anymore. Hope this helps someone else as well.

Update
Today I spent again a lot of time trying to get a test to work with angular and again the problem was between the keyboard and the back of my chair. What I had done was trying to test a controller with some services that this controller depended on. I had defined everything correctly and the sources were running merily and happily on my webapplication, yet whatever test I tried to run it always showed me the error: Unknown provider: ordersServiceProvider <- ordersService
But this was all running correctly as web application. Fast forward some 2 hours of refactoring, re-testing, swearing, scratching of head and lo and behold, finally I noticed the culprit. In my test I had

var moduleToTest = angular.module("orders")

But this means that the real deal, the real angular gets loaded and not the mock. Sigh, removing the angular. fixed this issue. You might have thought that after the previous error with the mocks on angular that I would be more suspicious but alas, I made almost the same error again.

Advertisements

From → angular js

One Comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: