Karma + RequireJS + AngularJS，填充脚本未在规范中加载答案

【问题标题】：Karma + RequireJS + AngularJS, shimmed scripts not loading in specKarma + RequireJS + AngularJS，填充脚本未在规范中加载
【发布时间】：2016-06-05 14:04:59
【问题描述】：

在使用 Karma + Jasmine + RequireJS + AngularJS 时，我无法将任何已填充的脚本（例如 angular-mocks）加载到测试规范中。该文件似乎可以正常提供，只是在规范中不起作用。

UPDATE Angular 是全局的，相应的 shim 不会影响它。

在Karma.conf.js 中，我包括angular-mocks 将由RequireJS 加载：

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', 'requirejs'],


    // list of files / patterns to load in the browser
    files: [
        {pattern: 'node_modules/angular-mocks/angular-mocks.js', included: false},
        ...
        'test/euro-2016/main-test.js'
    ],


    // list of files to exclude
    exclude: [
        'main/main-euro-2016.js'
    ],


    // preprocess matching files before serving them to the browser
    // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
    preprocessors: {
        '../../*.html': ['ng-html2js']
    },


    // 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_DEBUG,


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


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


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

    // Concurrency level
    // how many browser should be started simultaneous
    concurrency: Infinity
})

};

Karma 主文件 main-test.js 中的 RequireJS shim：

var tests = [];
for (var file in window.__karma__.files) {
    if (window.__karma__.files.hasOwnProperty(file)) {
        if (/Spec\.js$/.test(file)) {
            tests.push(file);
        }
    }
}

requirejs.config({
    // Karma serves files from '/base'
    baseUrl: "/base",

    paths: {
        "angular": "vendor/angular/angular",
        "angularMocks": "node_modules/angular-mocks/angular-mocks",
        "jquery": "vendor/jquery/jquery.min",
        ...
    },

    shim: {
        "angular":      {
            exports:    "angular",
            deps:       ['jquery']
        },
        "angularMocks": {
            exports: "angularMocks",
            deps: ['angular']
        },
        ...
    },

    // ask Require.js to load these files (all our tests)
    deps: tests,

    // start test run, once Require.js is done
    callback: window.__karma__.start
});

规范文件：

define(['angular', 'modules/euro-2016/app', 'angularMocks'], function(angular, app, mocks){
    console.log("ANGULAR", angular); // ok
    console.log("APP", app); // ok
    console.log("MOCKS", mocks); // undefined
})

【问题讨论】：

标签： angularjs requirejs karma-jasmine

【解决方案1】：

查看通过安装NPM包angular-mocks安装的源代码，特别是文件node_modules/angular-mocks/angular-mocks.js，这是我看到的：

该代码中的任何地方都没有提及angularMocks，因此无法导出angularMocks。
相反，插件将自身安装为angular.mock。在文件的前面有一行：
```
angular.mock = {};
```
然后所有内容都添加到angular.mock。

因此您可以删除您的exports 并通过angular.mock 访问插件。这应该有效：

define(['angular', 'modules/euro-2016/app', 'angularMocks'], function(angular, app){
    console.log("ANGULAR", angular);
    console.log("APP", app);
    console.log("MOCKS", angular.mock); 
});

如果您出于某种原因必须拥有exports（例如，如果您使用enforceDefine，这要求所有shim 都具有exports 值），您可以将其设置为angular.mock。

【讨论】：