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

时间:2016-05-26 23:04:42

标签: angular karma-jasmine shim

我正在尝试在Angular2项目上设置业力,并且我正在尝试引用angular2快速启动,它成功运行了与茉莉的业力。

到目前为止,我已经导入了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.

这是垫片和配置文件

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
});

};

和karma-test-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);

我的app结构就是这样

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

到目前为止,我只是尝试进行健全性测试而不进行任何类似的导入

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

我注意到的一点是,dev工具上的源代码似乎只能找到spec文件的打字稿。

1 个答案:

答案 0 :(得分:1)

问题是我没有正确配置我的systemJs.config文件。改变了应用程序的路径。到&#s; src / client / app'和业力成功运行。

修改

需要在systemjs.config中的map文件中进行更改,如下所示:

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

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