Domanda Problemi nel far funzionare Karma con SystemJS, Angular2 e Typescript

Sto affrontando problemi nel far funzionare Karma con SystemJS, Angular2 e Typescript.

Ecco il mio karma.conf.js:

'use strict';
module.exports = function (config) {

        // base path, that will be used to resolve files and exclude
        basePath: '.',

        // frameworks to use
        frameworks: ['systemjs', 'jasmine'],

        plugins: ['karma-systemjs', 'karma-jasmine', 'karma-phantomjs-launcher'],

        files: [

        systemjs: {
            configFile: "systemjs.config.js",
            config: {
                //baseURL: ".",
                transpiler: "typescript",
                paths: {
                    "systemjs": "jspm_packages/system.js",
                    "system-polyfills": "jspm_packages/system-polyfills.js",
                    "typescript": "node_modules/typescript/lib/typescript.js"
                packages: {
                    'app': {
                        defaultExtension: 'ts'
            includeFiles: [
            serveFiles: [

        // proxied base paths
        proxies: {
            // required for component assets fetched by Angular's compiler
            "/app/": "/base/app/",
            "/jspm_packages/": "/base/jspm_packages/",
            "/node_modules/": "/base/node_modules/"

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

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

        // Start these browsers, currently available:
        // - Chrome
        // - ChromeCanary
        // - Firefox
        // - Opera
        // - Safari (only Mac)
        // - PhantomJS
        // - IE (only Windows)
        browsers: ['PhantomJS'],

        // If browser does not capture in given timeout [ms], kill it
        captureTimeout: 60000,

        // Continuous Integration mode
        // if true, it capture browsers, run tests and exit
        singleRun: true

Il mio karma-test-shim.js:

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

__karma__.loaded = function () {

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

function isSpecFile(path) {
    return path.slice(-8) == '.spec.js';

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

var allSpecFiles = Object.keys(window.__karma__.files)

// Load our SystemJS configuration.
    baseURL: '/base'

        map: {
            'rxjs': 'node_modules/rxjs',
            '@angular': 'node_modules/@angular',
            'app': 'app'
        packages: {
            'app': {
                main: 'main.js',
                defaultExtension: 'js'
            '@angular/core': {
                main: 'index.js',
                defaultExtension: 'js'
            '@angular/compiler': {
                main: 'index.js',
                defaultExtension: 'js'
            '@angular/common': {
                main: 'index.js',
                defaultExtension: 'js'
            '@angular/platform-browser': {
                main: 'index.js',
                defaultExtension: 'js'
            '@angular/platform-browser-dynamic': {
                main: 'index.js',
                defaultExtension: 'js'
            'rxjs': {
                defaultExtension: 'js'

]).then(function (providers) {
    var testing = providers[0];
    var testingBrowser = providers[1];


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

Il mio systemjs.config.js:

(function (global) {

    // map tells the System loader where to look for things
    var map = {
        'app': 'app', // 'dist',
        'rxjs': 'node_modules/rxjs',
        'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
        '@angular': 'node_modules/@angular',
        'crypto': '@empty'// this fixed my last issue

    // packages tells the System loader how to load when no filename and/or no extension
    var packages = {
        'app': {main: 'main.js', defaultExtension: 'js'},
        'rxjs': {defaultExtension: 'js'},
        'angular2-in-memory-web-api': {defaultExtension: 'js'}

    var packageNames = [

    // add package entries for angular packages in the form '@angular/common': { main: 'index.js', defaultExtension: 'js' }
    packageNames.forEach(function (pkgName) {
        packages[pkgName] = {main: 'index.js', defaultExtension: 'js'};

    var config = {
        map: map,
        packages: packages

    // filterSystemConfig - index.html's chance to modify config before we register it.
    if (global.filterSystemConfig) {



Quando eseguo i miei test con karma start karma.conf.js e i miei test si trovano accanto al principale ts File.

Ottengo questo errore:

11 05 2016 17:02:24.306:DEBUG [web-server]: serving (cached): /Users/julien/Documents/projects/bignibou/bignibou-site/bignibou-client/node_modules/typescript/lib/typescript.js
PhantomJS 2.1.1 (Mac OS X 0.0.0) ERROR
  Error: eval code
    eval@[native code]
    Evaluating /Users/julien/Documents/projects/bignibou/bignibou-site/bignibou-client/karma-test-shim.js
    Error loading /Users/julien/Documents/projects/bignibou/bignibou-site/bignibou-client/karma-test-shim.js

11 05 2016 17:02:24.316:DEBUG [karma]: Run complete, exiting.
11 05 2016 17:02:24.316:DEBUG [launcher]: Disconnecting all browsers
11 05 2016 17:02:24.324:DEBUG [launcher]: Process PhantomJS exited with code 0
11 05 2016 17:02:24.324:DEBUG [temp-dir]: Cleaning temp dir /var/folders/1p/pcqq7s0x58l_s7ds52gxt_fw0000gp/T/karma-62098834
11 05 2016 17:02:24.329:DEBUG [launcher]: Finished all browsers
npm ERR! Test failed.  See above for more details.

Qualcuno può aiutare, per favore?

2018-05-11 15:26



Riesco a vedere diversi problemi in quello che hai fatto.

Per prima cosa penso di configurare due volte SystemJS:

  • una volta in test-shim-karma.js file
  • una volta in karma.conf.js uno attraverso il plugin di karma di SystemJS.

Quindi non si configurano i moduli sorgente che verranno utilizzati nei file spec:

packages['base/app'] = {
  defaultExtension: 'js',
  format: 'cjs',
  map: Object.keys(window.__karma__.files).filter(onlyAppFiles).reduce(createPathRecords, {})

Chiama più volte il System.config metodo.

Vorrei anche aggiungere alcune voci nel files sezione del tuo karma.conf.js file:

files: [
  // Paths loaded by Karma
  {pattern: 'node_modules/es6-shim/es6-shim.min.js', included: true, watched: true},
  {pattern: 'node_modules/reflect-metadata/Reflect.js', included: true, watched: true},
  {pattern: 'node_modules/zone.js/dist/zone.js', included: true, watched: true},
  {pattern: 'node_modules/zone.js/dist/async-test.js', included: true, watched: true},
  {pattern: 'node_modules/systemjs/dist/system-polyfills.js', included: true, watched: true},
  {pattern: 'node_modules/systemjs/dist/system.src.js', included: true, watched: true},
  {pattern: 'node_modules/rxjs/**/*.js', included: false, watched: false},
  {pattern: 'node_modules/@angular/**/*.js', included: false, watched: false},
  {pattern: 'karma-test-shim.js', included: true, watched: true},

  // Paths loaded via module imports
  {pattern: 'app/**/*.js', included: false, watched: true},

  // Paths to support debugging with source maps in dev tools
  {pattern: 'app/**/*.ts', included: false, watched: true},
  {pattern: 'app/**/*', included: false, watched: false}

Potresti dare un'occhiata a questo progetto per una configurazione funzionante di Karma con Angular2 RC1 e TypeScript:

2018-05-30 15:49

Ho passato gli ultimi due giorni a guardare tutti i diversi semi A2 / clis e il 90% di loro utilizza il vecchio codice A2 e ho trovato difficile interpretarli nel nuovo codice A2.

Alla fine ho trovato questo.

Questo ha ottenuto i miei test sul karma in esecuzione con systemjs. È un progetto molto semplice e molto semplice che ottiene le nozioni di base e nessuna spazzatura extra forzata su di te.

Dovrai modificare alcuni URL di file in giro per abbinare qualsiasi cosa tu stia lavorando. Usando questo come guida, sono riuscito a ottenere test unitari in esecuzione con typescript e systemjs.

2018-05-11 21:24