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

Question

我正在尝试通过 karma-browserify 对 AngularJS/Browserify 应用程序进行单元测试。最终，当我运行 gulp karma 任务时，我收到错误 Error: [$injector:nomod] Module 'myApp' is not available!您要么拼错了模块名称，要么忘记加载它...

我的gulpfile.js有任务

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

我的 karma.conf.js 包括

{
  // ...
  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
  }
  // ...
}

我在 main.js 中定义我的模块，其中包括

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

我在 MainCtrl.js 中定义了我的 Controller ，看起来像

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

module.exports = MainCtrl;

然后在其他地方注册 Controller ，例如

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

最后我的测试看起来像

(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();
        });
    });
}());

解决方法

我的解决方法是将我的 main.js 文件添加到 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']
}

一切正常。但我认为我不应该将我的源文件添加到 karma(至少不使用 karma-browserify)。这是设置我的项目的正确方法吗？

Answer 1

是的，“解决方法”是使用 karma-browserify 的理想方式。

preprocessors definition指定哪些包含的文件应由哪个预处理器处理，但不包含它们:

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

是 files definition实际上包括文件:

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