使用karma-browserify对AngularJS应用程序进行单元测试

Question

I'm trying to unit test an AngularJS/Browserify application via karma-browserify. Ultimately, when I run my gulp karma task, I get the error Error: [$injector:nomod] Module 'myApp' is not available! You either misspelled the module name or forgot to load it... Error: [$injector:nomod] Module 'myApp' is not available! You either misspelled the module name or forgot to load it...

My gulpfile.js has the task

gulp.task('test', function(done) {
    new karma.Server({
        configFile: __dirname + '/karma.conf.js'
    }, done).start();
});

My karma.conf.js includes

{
  // ...
  frameworks: ['browserify', 'jasmine'],
  files: [
    'node_modules/angular/angular.js',
    'node_modules/angular-mocks/angular-mocks.js',
    'spec/**/*.js'
  ],
  preprocessors: {
    'spec/**/*.js': [ 'browserify' ]
  },
  browserify: {
    debug: true
  }
  // ...
}

I define my module in a main.js that includes

require('angular').module('myApp', [
  //...lots of `require`s for each dependency...
]);

I define my controller in a MainCtrl.js that looks like

function MainCtrl(/*...deps...*/) {
  var ctrl = this;
  ctrl.foo = 'bar';
}

module.exports = MainCtrl;

then register the controller elsewhere like

var app = require('angular').module('myApp');
app.controller('MainCtrl', [/*...deps...*/, require('./MainCtrl')]);

Finally my test looks like

(function() {
    "use strict";

    describe('MainCtrl', function() {
        var ctrl;

        beforeEach( angular.mock.module('myApp') );

        beforeEach( inject( function($controller) {
            ctrl = $controller('MainCtrl');
        }));

        it('should be defined', function() {
            expect(ctrl).toBeDefined();
        });
    });
}());

Workaround

The workaround I have is to add my main.js file to karma.conf.js

files: [
  'js/main.js', // ADDED: Defines the app and `require`s angular
  'node_modules/angular-mocks/angular-mocks.js',
  'spec/**/*.js'
],
preprocessors: {
  'js/main.js': ['browserify'], // ADDED
  'spec/**/*.js': ['browserify']
}

and everything works. But I thought I wasn't supposed to add my source files to karma (at least not with karma-browserify). Is this the right way to set up my project?

Answer 1

Yes, the 'workaround' is the desired way to use karma-browserify .

preprocessors definition specifies which of the included files should be processed by which preprocessor but does not include them:

The keys of the preprocessors config object are used to filter the files specified in the files configuration.

it is files definition that actually includes the files:

The files array determines which files are included in the browser and which files are watched and served by Karma.

Answer 2

Files tells Karma which files it should load relative to the base path. These are:

All test related libraries Our source code to test The tests themselves