使用 Karma 进行角度测试：“未定义模块”答案

【问题标题】：Angular testing with Karma: "module is not defined"使用 Karma 进行角度测试：“未定义模块”
【发布时间】：2014-04-20 06:17:00
【问题描述】：

我知道这个问题已经被问过很多次了，而且我知道在大多数情况下人们都错过了angular-mocks.js 文件。

我遇到了同样的问题，试图在一个模块上测试一个工厂。不幸的是，我一直遇到测试问题（为什么，Angular，哦，你为什么必须假设 window 和 document 对象？），这表明该模块未定义。我不知所措。我也尝试过使用 angular.mocks.module，但随后我收到一条消息说 Angular 未定义。我做错了什么？

值得注意的是，我使用 gulp 作为任务运行器。我的 gulpfile（还不完善，任务没有关联）：

var gulp = require('gulp'),

    uglify = require('gulp-uglify'),
    jshint = require('gulp-jshint'),
    jasmine = require('gulp-jasmine'), 
    karma = require('gulp-karma'),

    paths = {
        scripts: "scripts/*.js",
        spec: "spec/*.js",
        dist: "dist"
    };

gulp.task('prepare', function () {
    return gulp.src(paths.scripts)
        .pipe(jshint())
        .pipe(jshint.reporter('default'))
        .pipe(uglify())
        .pipe(gulp.dest(paths.dist))
});

gulp.task('test', function () {
    gulp.src([paths.scripts, paths.spec])
        .pipe(karma({
            configFile: 'karma.conf.js',
            action: 'run'
        }));
});

gulp.task('default', ['prepare', 'test']);

我的 karma.conf.js，由 karma init 生成：

// Karma configuration
// Generated on Fri Mar 14 2014 14:24:30 GMT-0400 (EDT)

module.exports = function(config) {
  config.set({

    // base path that will be used to resolve all patterns (eg. files, exclude)
    basePath: '',


    // frameworks to use
    // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
    frameworks: ['jasmine'],


    // list of files / patterns to load in the browser
    files: [
      './lib/angular/angular.min.js',
      './lib/angular-mocks/angular-mocks.js',
      './src/*.js',
      './spec/*.js'
    ],


    // list of files to exclude
    exclude: [

    ],


    // preprocess matching files before serving them to the browser
    // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
    preprocessors: {

    },


    // test results reporter to use
    // possible values: 'dots', 'progress'
    // available reporters: https://npmjs.org/browse/keyword/karma-reporter
    reporters: ['progress'],


    // web server port
    port: 9876,


    // enable / disable colors in the output (reporters and logs)
    colors: true,


    // level of logging
    // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
    logLevel: config.LOG_INFO,


    // enable / disable watching file and executing tests whenever any file changes
    autoWatch: false,


    // start these browsers
    // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
    browsers: ['Chrome'],


    // Continuous Integration mode
    // if true, Karma captures browsers, runs the tests and exits
    singleRun: false
  });
};

最后，我的测试套件（还没有设置，如果我能通过这个障碍，我们会很好）：

/* Tests for memento.js. */

describe('memento core test suite', function () {
    var memento;

    beforeEach(module('Memento'));

    beforeEach(function() {
        inject(function(_memento_) {
            memento = _memento_;
        });
    });

    // Check functions.
      // check to see if it has the expected function
    it('should match expected interface', function () { 
        expect(angular.isFunction(memento.canUndo)).toBe(true);
        expect(angular.isFunction(memento.canRedo)).toBe(true);
        expect(angular.isFunction(memento.undo)).toBe(true);
        expect(angular.isFunction(memento.redo)).toBe(true);
        expect(angular.isFunction(memento.push)).toBe(true);
    });

    it('should initialize', function () {
        this.fail(Error('Test not implemented'));
    });

    it('should push() a changed object', function () {
        this.fail(Error('Test not implemented'));
    });

    it('should not push() an unchanged object', function () {
        this.fail(Error('Test not implemented'));
    });

    it('should return original object on undo()', function () {
        this.fail(Error('Test not implemented'));
    });

    it('should return modified object on redo()', function () {
        this.fail(Error('Test not implemented'));
    });

    it('should not undo() if at beginning of stack', function () {
        this.fail(Error('Test not implemented'));
    });

    it('should not redo() if at end of stack', function () {
        this.fail(Error('Test not implemented'));
    });

    // TODO: Implement revert to original, clearing history.
    // 
    // it('should return seed object on revert()', function () {
    //  this.fail(Error('Test not implemented'));
    // });

    // it('should clear the stack on clear()', function () {
    //  this.fail(Error('Test not implemented'));
    // });
});

有没有人发现有什么不对劲的地方？我不确定我是否遗漏了一些非常明显的东西——我可以多用一双眼睛，或者很多。我原本以为我可以在没有 Karma 的情况下将它作为一个简单的 Jasmine 测试套件运行，但由于 Angular，这有问题。如果我不能让它工作，我可能只是使用 npm 的 Angular 包并更改我的 Angular 模块，以便它支持 CommonJS...

谢谢大家！希望我没有疯。

编辑：我已经包含了我的开发依赖项。

  "devDependencies": {
    "gulp": "~3.5.6",
    "gulp-uglify": "~0.2.1",
    "gulp-jshint": "~1.5.0",
    "gulp-jasmine": "~0.2.0",
    "angular": "~1.2.10",
    "karma": "~0.12.0",
    "gulp-karma": "0.0.4",
    "karma-jasmine": "~0.2.2",
    "karma-chrome-launcher": "~0.1.2"
  }

【问题讨论】：

标签： javascript node.js angularjs karma-runner gulp

【解决方案1】：

声明模块/角度未定义的消息意味着您的 angular-mocks.js 文件未加载，尽管您已将其列在 karma.conf.js 文件中。

您遇到的问题是 gulp-karma 忽略了您的 karma.conf.js 文件数组。当您将字符串或 glob 传递到 gulpfile 中的 gulp.src 时，就会发生这种情况。

要解决此问题，请为 gulp.src 传递一个虚假文件的字符串，例如“./foobar”，这将导致使用 karma.conf.js 文件中的 files 数组。

gulp.task('test', function () {
  gulp.src('./foobar')
    .pipe(karma({
      configFile: 'karma.conf.js',
      action: 'run'
    }));
});

希望这会有所帮助！

参考： https://github.com/lazd/gulp-karma/issues/9

【讨论】：

就是这样！真是个绊脚石！谢谢，你的收获很好。
我会定期使用 Karma 失败。它只会挂起尝试连接到 PhantomJS 然后“使用代码 0 退出”谢谢@Himal

【解决方案2】：

这不是您特定问题的答案，但我在非常相似的情况下也有类似的症状。但是，根本原因不同，所以我会在这里分享它，以防其他人发现这篇文章并且他们有同样的问题。

就我而言，因为我在游戏后期引入了测试， angular (1.4.7) 和 angular-mocks (1.6.9) 的版本不匹配。

我发现这是根本原因通过在浏览器中使用 Karma 的调试。降低 angular-mocks 的版本以匹配 angular 解决了这个问题。

【讨论】：