web-dev-qa-db-ja.com

Angular Karmaでのテスト： "モジュールが定義されていません"

私はこの質問が何度も尋ねられたことを知っており、ほとんどの場合、人々は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 initによって生成されたkarma.conf.js：

// 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"
  }
javascriptnode.jsangularjskarma-runnergulp
23
jedd.ahyoung

Module/angularが定義されていないことを示すメッセージは、karma.conf.jsファイルにリストされているにもかかわらず、angular-mocks.jsファイルがロードされていないことを意味します。

発生している問題は、karma.conf.jsファイルの配列を無視するgulp-karmaです。これは、gulpfile内のgulp.srcに文字列またはグロブを渡すと発生します。

これを回避するには、gulp.srcに偽のファイルの文字列、たとえば「./foobar」を渡します。これにより、karma.conf.jsファイルのファイル配列が代わりに使用されます。

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

お役に立てれば！

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

38
Himal

これはあなたの特定の問題に対する答えではありませんが、非常に類似したシナリオで同様の症状がありました。ただし、根本的な原因は異なるため、他の人がこの投稿を見つけて同じ問題が発生した場合に備えて、ここで共有します。

私の場合、ゲームの後半でテストを導入したため、バージョン間の不一致 angular（1.4.7）とangular-mocks（1.6。 9）。

ブラウザでKarmaのデバッグを使用して、これが根本的な原因であることがわかりました。角度モックのバージョンを下げるように下げるangularこの問題を解決しました。

1
Guilherme Dellagustin