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

Question

我正在尝试通过 karma-browserify 对 AngularJS/Browserify 应用程序进行单元测试。最终，当我运行我的 gulp 业力任务时，我得到错误 Error: [$injector:nomod] Module 'myApp' is not available! You either misspelled the module name or forgot to load it...

我的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 中定义我的控制器，看起来像

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

module.exports = MainCtrl;

然后在其他地方注册控制器，比如

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

Files 告诉 Karma 它应该相对于基本路径加载哪些文件。它们是：

所有测试相关库我们要测试的源代码测试本身

Answer 2

是的，'workaround' 是使用 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.

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

Unit testing AngularJS application with karma-browserify

javascript

unit-testing

angularjs

browserify

karma-jasmine

解决方法