i am trying to test my angular controller using jasmine. But i am getting Error: [$injector:modulerr]

Question

following is the code from my sample angular project.
app.js code:

(function () {
    'use strict';
    var app = angular.module('actorsDetails', [
        // Angular modules
        'ngResource',

        // 3rd Party Modules
        'ui.bootstrap',
        'ui.router'

    ]);

    app.config(['$stateProvider', '$urlRouterProvider', configRoutes]);

    function configRoutes($stateProvider, $urlRouterProvider) {
        $stateProvider
            .state('main', {
                url: '/main',
                templateUrl: 'app/home/home.html',
                controller: 'HomeCtrl',
                controllerAs: 'vm'
            })
            .state('form', {
                url: '/form',
                templateUrl: 'app/form/form.html',
                controller: 'FormCtrl',
                controllerAs: 'vm',
                resolve: {
                    initialData: ['actorApi', function (actorApi) {
                        return actorApi.getActorsResource();

                    }]
                }

            })
            .state('resource', {
                url: '/resource',
                templateUrl: 'app/resource/resource.html',
                controller: 'ResourceCtrl',
                controllerAs: 'vm',
                resolve: {
                    initialData: ['actorApi', function (actorApi) {
                        return actorApi.getActorsResource();

                    }]
                }
            });
        $urlRouterProvider.otherwise('/main');
    }
    app.run(['$state', function ($state) {
        // Include $route to kick start the router.
    }]);
})();

controller code:

(function () {
    'use strict';
    angular.module('actorsDetails').controller('HomeCtrl', HomeCtrl);
    /* @ngInject */
    function HomeCtrl($state) {
        /* jshint validthis: true */
        var vm = this;
        vm.activate = activate;
        vm.test = true;
        vm.navigate = navigate;
        activate();
        function activate() {
        }
        function navigate() {
            $state.go('form');
        }
    }
})();


**test.js**

describe('HomeCtrl', function() {

    beforeEach(module('actorsDetails'));
    beforeEach(inject(function ($rootScope, $controller) {
        var scope = $rootScope.$new();
        var HomeCtrl = $controller('HomeCtrl', {
            $scope: scope
        });
    }));
    it('should have a HomeCtrl controller', function() {
        expect(true).toBeDefined();
    });

});

there are the files I have included in my karma.config.js I have added all the angularJS dependent files. I have also added the controller file that i need to test

files: [
      'src/lib/angular/angular.min.js',
      'src/lib/angular-mocks/angular-mocks.js',
      'src/lib/angular-resource/angular-resource.min.js',
      'src/lib/angular-route/angular-route.min.js',
      'src/app/app.js',
      'src/app/home/home.controller.js',
      'src/test/specs/*.js'
    ],

kindly pinpoint me, what is that I am doing wrong...

Answer 1

Mock out the $state object in your unit test.

var mockState = { go: function() {} };
var HomeCtrl = $controller('HomeCtrl', { $scope: scope, $state: mockState });

The $injector:modulerr is most likely related to your use of $state in your controller. Instead of mocking, you could try adding the library to your karma config, and loading the module in your unit test.

'src/lib/angular-ui-router/release/angular-ui-router.min.js'

beforeEach(module('ui.router'));