使用 angular2 设置 Karma 时调用无效 System.register

Question

我正在尝试在 Angular2 项目上设置业力，并且我正在尝试参考 angular2 quickstart，其中运行s 业力与 jasmine 成功。

到目前为止，我已经导入了 karma-test-shim，将我的 karma.conf.js 文件修改为我认为我需要的。我相信我成功地进行了测试，但业力抱怨这个错误

Uncaught TypeError: Invalid System.register call. Anonymous System.register calls can only be made by modules loaded by SystemJS.import and not via script tags.

这是 shim 和配置文件

karma.conf.js

module.exports = function(config) {
var client = './src/client/',
    clientApp = client + 'app/';

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

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

    plugins:[
        require('karma-jasmine'),
        require('karma-phantomjs-launcher'),
        require('karma-chrome-launcher'),
        require('karma-htmlfile-reporter')
    ],

    // list of files / patterns to load in the browser
    files: [
        'node_modules/systemjs/dist/system.src.js',

        //Polyfills
        'node_modules/es6-shim/es6-shim.min.js',
        'node_modules/systemjs/dist/system-polyfills.js',

        // Reflect and Zone.js dependencies

        'node_modules/reflect-metadata/Reflect.js',
        'node_modules/zone.js/dist/zone.js',
        'node_modules/zone.js/dist/jasmine-patch.js',
        'node_modules/zone.js/dist/async-test.js',
        'node_modules/zone.js/dist/fake-async-test.js',

        // RxJs.
        {pattern: 'node_modules/rxjs/**/*.js', included: false, watched: false},
        {pattern: 'node_modules/rxjs/**/*.js.map', included: false, watched: false},

        //paths loaded by module loaders
        {pattern: 'node_modules/@angular/**/*.js', included: false, watched: false},
        {pattern: 'node_modules/@angular/**/*.js.map', included: false, watched: false},

        {pattern: 'systemjs.config.js', included: false, watched: false},

        {pattern: 'karma-test-shim.js', included: false, watched: false},

        // transpiled application & spec code paths loaded via module imports
        {pattern: clientApp + '**/**/*.js', included: true, watched: false},
        {pattern: clientApp + '**/**/*.spec.js', included: true, watched: true},

        // asset (HTML & CSS) paths loaded via Angular's component compiler
        // (these paths need to be rewritten, see proxies section)
        {pattern: clientApp + '**/**/*.html', included: false, watched: true},
        {pattern: clientApp + '**/**/*.css', included: false, watched: true},

        // paths for debugging with source maps in dev tools
        {pattern: clientApp + '**/**/*.ts', included: false, watched: false},
        {pattern: clientApp + '**//***.js.map', included: false, watched: false}
    ],

    // list of files to exclude
    exclude: [],

    proxies: {
        "/app/": clientApp
    },

    // 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', 'coverage'
    // available reporters: https://npmjs.org/browse/keyword/karma-reporter
    reporters: ['progress', 'html'],

    htmlReporter: {
        outputFile: 'reports/unitTests.html',

        // Optional
        pageTitle: 'Unit Tests',
        subPageTitle: __dirname
    },

    // 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: true,

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

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

};

和业力测试-shim.js

// /*global jasmine, __karma__, window*/
Error.stackTraceLimit = Infinity;
jasmine.DEFAULT_TIMEOUT_INTERVAL = 1000;

__karma__.loaded = function () {
};

function isJsFile(path) {
    return path.slice(-3) == '.js';
}

function isSpecFile(path) {
    return /\.spec\.js$/.test(path);
}

function isBuiltFile(path) {
    var builtPath = '/src/client';
    return isJsFile(path) && (path.substr(0, builtPath.length) == builtPath);
}

var allSpecFiles = Object.keys(window.__karma__.files)
    .filter(isSpecFile)
    .filter(isBuiltFile);

System.config({
    baseURL: ' ',
    packageWithIndex: true // sadly, we can't use umd packages (yet?)
});

System.import('systemjs.config.js')
    .then(function () {
        return Promise.all([
            System.import('@angular/core/testing'),
            System.import('@angular/platform-browser-dynamic/testing')
        ])
    })
    .then(function (providers) {
        var testing = providers[0];
        var testingBrowser = providers[1];

        testing.setBaseTestProviders(
            testingBrowser.TEST_BROWSER_DYNAMIC_PLATFORM_PROVIDERS,
            testingBrowser.TEST_BROWSER_DYNAMIC_APPLICATION_PROVIDERS);

    })
    .then(function() {
        // Finally, load all spec files.
        // This will run the tests directly.
        return Promise.all(
            allSpecFiles.map(function (moduleName) {
                return System.import(moduleName);
            }));
    })
    .then(__karma__.start, __karma__.error);

我的应用结构是这样的

./src
    /client
          /app/components
              /directives
              /etc...
              main

到目前为止，我只是在尝试运行没有像这样的任何导入的健全性测试

describe('1st tests', function () {
it('true is true', function () { return expect(true).toEqual(true); });
});

我注意到开发工具上的源代码似乎只能找到规范文件的打字稿。

Answer 1

问题是我没有正确配置 systemJs.config 文件。将 'app' 的路径更改为 'src/client/app'，karma 成功运行。

编辑

需要在 systemjs.config 中的地图文件中进行更改，如下所示：

var map = { 'app': 'src/client/app', // 'dist', 'rxjs': 'node_modules/rxjs', '@angular': 'node_modules/@angular',

我们在此项目中使用名为 dist 的构建文件夹。

使用 angular2 设置 Karma 时调用无效 System.register

Invalid System.register call when setting up Karma with angular2

shim

karma-jasmine

angular