Angular 2 Karma Testing, JS

You are having trouble setting up testing in an angular 2 app with karma. I am following a similar model created by ng-cli and the ng2-test-seed repository ( https://github.com/juliemr/ng2-test-seed/ ). The template should start karma, as usual, include files, and then use system.js to import and run test files. All the latest, karma @current, angular @ current candidate release (1)

I persistently get a really useless error that seems to be related to a file that was not found; at first it was a systemjs.config.js file, but now some angular testing components:

19 05 2016 11:34:51.324:DEBUG [middleware:source-files]: Requesting /base/client/vendor/@angular/core/testing.js /
19 05 2016 11:34:51.324:DEBUG [middleware:source-files]: Fetching /<path to project>client/vendor/@angular/core/testing.js
19 05 2016 11:34:51.325:DEBUG [middleware:source-files]: Requesting /base/client/vendor/@angular/platform-browser-dynamic/testing.js /
19 05 2016 11:34:51.325:DEBUG [middleware:source-files]: Fetching /<path to project>client/vendor/@angular/platform-browser-dynamic/testing.js
19 05 2016 11:34:51.325:WARN [web-server]: 404: /base/client/vendor/@angular/core/testing.js
19 05 2016 11:34:51.325:WARN [web-server]: 404: /base/client/vendor/@angular/platform-browser-dynamic/testing.js
Missing error handler on `socket`.
TypeError: (msg || "").replace is not a function
    at /<path to project>node_modules/karma/lib/reporter.js:45:23
    at onBrowserError (/<path to project>node_modules/karma/lib/reporters/base.js:58:60)
    at .<anonymous> (/<path to project>node_modules/karma/lib/events.js:13:22)
    at emitTwo (events.js:106:13)
    at emit (events.js:191:7)
    at onKarmaError (/<path to project>node_modules/karma/lib/browser.js:95:13)
    at Socket.<anonymous> (/<path to project>node_modules/karma/lib/events.js:13:22)
    at emitOne (events.js:101:20)
    at Socket.emit (events.js:188:7)
    at Socket.onevent (/<path to project>node_modules/socket.io/lib/socket.js:335:8)
    at Socket.onpacket (/<path to project>node_modules/socket.io/lib/socket.js:295:12)
    at Client.ondecoded (/<path to project>node_modules/socket.io/lib/client.js:193:14)
    at Decoder.Emitter.e19 05 2016 11:34:51.333:DEBUG [Chrome 50.0.2661 (Mac OS X 10.11.4)]: Disconnected during run, waiting 2000ms for reconnecting.
mit (/<path to project>node_modules/component-emitter/index.js:134:20)
    at Decoder.add (/<path to project>node_modules/socket.io-parser/index.js:247:12)
    at Client.ondata (/<path to project>node_modules/socket.io/lib/client.js:175:18)
    at emitOne (events.js:96:13)
19 05 2016 11:34:53.337:WARN [Chrome 50.0.2661 (Mac OS X 10.11.4)]: Disconnected (1 times)

karma-test-shim.js, , , ,

karma.conf.js

module.exports = function configureKarma(config) {
  config.set({
    basePath: '.',
    frameworks: ['jasmine'],
    plugins: [
      require('karma-jasmine'),
      require('karma-chrome-launcher'),
    ],
    customLaunchers: {
      // chrome setup for travis CI using chromium
      Chrome_travis_ci: {
        base: 'Chrome',
        flags: ['--no-sandbox'],
      },
    },
    files: [
      { pattern: 'node_modules/es6-shim/es6-shim.js', included: true, watched: false },
      { pattern: 'node_modules/zone.js/dist/zone.js', included: true, watched: false },
      { pattern: 'node_modules/reflect-metadata/Reflect.js', included: true, watched: false },
      { pattern: 'node_modules/systemjs/dist/system-polyfills.js', included: true, watched: false },
      { pattern: 'node_modules/systemjs/dist/system.src.js', included: true, watched: false },
      { pattern: 'node_modules/zone.js/dist/async-test.js', included: true, watched: false },
      //
      // // include karma shim
      { pattern: 'karma-test-shim.js', included: true, watched: true },
      //
      // // include app
      { pattern: '.dev/client/**/*', included: false, watched: true },

    ],
    exclude: [
      // Vendor packages might include spec files. We don't want to use those.
      'node_modules/**/*.spec.js',
    ],
    preprocessors: {},
    reporters: ['progress'],
    port: 9876,
    colors: true,
    logLevel: config.DEBUG,
    autoWatch: true,
    browsers: ['Chrome'],
    singleRun: false,
  });
};

karma-test-shim.js:

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

__karma__.loaded = function () {
  console.log('loaded');
};

var distPath = '/base/client/';
var appPath = distPath + '';


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

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

function isAppFile(path) {
  return isJsFile(path) && (path.substr(0, appPath.length) == appPath);
}

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

console.log(allSpecFiles);
// Load our SystemJS configuration.
System.config({
  baseURL: distPath
});

System.import('systemjs.config.js').then(function() {
  // Load and configure the TestComponentBuilder.
  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);
+4

All Articles