【问题标题】：Unit testing AngularJS application with karma-browserify使用 karma-browserify 对 AngularJS 应用程序进行单元测试
【发布时间】：2016-03-31 19:22:01
【问题描述】：

我正在尝试通过 karma-browserify 对 AngularJS/Browserify 应用程序进行单元测试。最终，当我运行我的 gulp karma 任务时，我收到错误 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）。这是设置我的项目的正确方法吗？

【问题讨论】：

标签： javascript angularjs unit-testing browserify karma-jasmine

【解决方案1】：

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

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

预处理器配置对象的键用于过滤文件配置中指定的文件。

实际上包含文件的是files definition：

files 数组确定浏览器中包含哪些文件，以及 Karma 监视和提供哪些文件。

【讨论】：

【解决方案2】：

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

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

【讨论】：