AngularJS Jasmine Test Fails: Failed to instantiate module

Question

My angular app worked great and so did my tests, using karma and jasmine, until I added a dependency in ui.bootstrap. Now the app still works as expected, but I can't get my tests to run. This is what I have:

app.js - added dependency in ui.bootstrap

angular.module('myApp', ['ngResource', 'ngRoute', 'ui.bootstrap']).config(function(...) {...});

service.js

angular.module('myApp').service('myService', function () {})

controller.js

angular.module('myApp').controller('MyController', function ($scope, $http, myService) {})

tests/main.js

describe('Controller: MyController', function () {
    var MyController, scope;
    // load the controller's module
    beforeEach(function(){
        module('myApp');
        inject(function ($controller, $rootScope) {
            scope = $rootScope.$new();
            MyController = $controller('MyController', {
                $scope:scope
            });
        });
    });
    it('should do something', function () {
        expect(scope.myOptions.length).toBe(5);
    });
}); 

And my test, which I run using grunt and krama, fails due to:

Error: [$injector:modulerr] Failed to instantiate module myApp due to:
Error: [$injector:modulerr] Failed to instantiate module ui.bootstrap due to:
Error: [$injector:nomod] Module 'ui.bootstrap' is not available! You either misspelled the module name or forgot

What have I missed? The app runs with no problem, only the test fails.

Solution 1

In karma.conf.js there is a list of files that karma loads before test execution:

// list of files / patterns to load in the browser
files: [
  'bower_components/angular/angular.js',
  'bower_components/angular-mocks/angular-mocks.js',
  ...
]

Add bootstrap-ui.js there.

Solution 2

Inject your dependencies

beforeEach(function(){
   angular.module('ui.bootstrap',[]);
});

Solution 3

I had the same problem. Just solved it. Somehow putting the module(myApp); function call inside a the function you provide to beforeEach() doesn't work just try this:

Extract the module call into its own beforeEach():

beforeEach(module('myApp'));

And use another beforeEach() for the function you use.

Comments

[michael]

please check your karam.conf.js file that the bootstrap-ui js files are included.

[Haji]

Yeah, that was it. Missed the karma.conf.js there. Thanks!

[Stokedout]

I have the same issue just now, but I was wondering why I should load all of the modules if it's a unit test and should isolate that specific piece of code? Unless I misunderstand it feels like you have to load everything which would be more of an integration test?

[Bastian Voigt]

The question still showed up as unanswered cause it was only answered in comments. So I added it again as a "real answer"

[Alejandro Garcia Anglada]

Question: Don't you have to do something like this? module('myApp', ['ngResource', 'ngRoute', 'ui.bootstrap']) in the test to reference and instanciate the module?