使用Karma为Typecript运行Angular 2测试

Question

I'm trying to test Angular 2 Typescript code using karma. I have two dummy tests. One tests if 'true' equals 'true', the other calls a method from AppComponent that return a hardcoded string. When I remove the second test case and only run the first one through npm test it will open the browser, run the test and it will work. When I add the second test it will give me an error. AppComponent.ts

///<reference path="../../node_modules/angular2/typings/browser.d.ts"/>
import {Component} from 'angular2/core';

@Component({
    selector: 'my-app',
    templateUrl: 'partials/app.html',
})

export class AppComponent {

  response(text:string):any {
        return 'hello';
    }
}

AppComponent.spec.ts

/// <reference path="../../node_modules/angular2/typings/browser.d.ts" />
/// <reference path="../../typings/main/ambient/jasmine/index.d.ts" />

import {it, describe, expect, beforeEach, inject} from 'angular2/testing';
import {AppComponent} from "./app.component";

describe('First Test', () => {
    let component: AppComponent;

    it('Value of testvar should be test', () => {
        expect(true).toEqual(true);
    });
});
describe('Second Test', () => {
  let component = new AppComponent();
  it('value must be true', () => {
    expect(component.response('hi').toEqual('hello'));
  });
});

When I run npm test it will start up the browser and it will error. Console output is down here:

wlan-145-94-194-94:folder ruben$ npm test

> plugify-admin@ pretest /Users/ruben/dev/folder
> gulp pretest

(node:3251) fs: re-evaluating native module sources is not supported. If you are using the graceful-fs module, please update it to a more recent version.
[15:12:54] Using gulpfile ~/dev/folder/gulpfile.js
[15:12:54] Starting 'copylibs'...
[15:12:54] Starting 'typescript'...
[15:12:58] Finished 'copylibs' after 4.23 s
[15:12:58] Finished 'typescript' after 4.26 s
[15:12:58] Starting 'pretest'...
[15:12:58] Finished 'pretest' after 115 μs

> folder@ test /Users/ruben/dev/folder
> karma start karma.conf.js

29 04 2016 15:13:00.742:INFO [karma]: Karma v0.13.22 server started at http://localhost:9876/
29 04 2016 15:13:00.763:INFO [launcher]: Starting browser Firefox
29 04 2016 15:13:04.603:INFO [Firefox 46.0.0 (Mac OS X 10.11.0)]: Connected on socket /#IPI7AaPJBP7EA1i4AAAA with id 84025354
29 04 2016 15:13:05.403:WARN [web-server]: 404: /base/builds/development/js/app.component
Missing error handler on `socket`.
TypeError: (msg || "").replace is not a function
    at /Users/ruben/dev/folder/node_modules/karma/lib/reporter.js:45:23
    at onBrowserError (/Users/ruben/dev/folder/node_modules/karma/lib/reporters/base.js:58:60)
    at .<anonymous> (/Users/ruben/dev/folder/node_modules/karma/lib/events.js:13:22)
    at emitTwo (events.js:111:20)
    at emit (events.js:191:7)
    at onKarmaError (/Users/ruben/dev/folder/node_modules/karma/lib/browser.js:95:13)
    at Socket.<anonymous> (/Users/ruben/dev/folder/node_modules/karma/lib/events.js:13:22)
    at emitOne (events.js:101:20)
    at Socket.emit (events.js:188:7)
    at Socket.onevent (/Users/ruben/dev/folder/node_modules/socket.io/lib/socket.js:335:8)
    at Socket.onpacket (/Users/ruben/dev/folder/node_modules/socket.io/lib/socket.js:295:12)
    at Client.ondecoded (/Users/ruben/dev/folder/node_modules/socket.io/lib/client.js:193:14)
    at Decoder.Emitter.emit (/Users/ruben/dev/folder/node_modules/component-emitter/index.js:134:20)
    at Decoder.add (/Users/ruben/dev/folder/node_modules/socket.io-parser/index.js:247:12)
    at Client.ondata (/Users/ruben/dev/folder/node_modules/socket.io/lib/client.js:175:18)
    at emitOne (events.js:96:13)
29 04 2016 15:13:07.475:WARN [Firefox 46.0.0 (Mac OS X 10.11.0)]: Disconnected (1 times)

Firefox 46.0.0 (Mac OS X 10.11.0): Executed 0 of 0 DISCONNECTED (2.876 secs / 0 secs)
npm ERR! Test failed.  See above for more details.

Answer 1

I would try the following:

import {it, describe, expect, beforeEach, inject} from 'angular2/testing';
import {AppComponent} from "./app.component";

describe('Tests', () => {
  let component: AppComponent = new AppComponent();

  it('Value of testvar should be test', () => {
    expect(true).toEqual(true);
  });

  it('value must be true', () => {
    expect(component.response('hi').toEqual('hello'));
  });
});

Answer 2

I had this problem - despite the rather unhelpful error message, the root cause was a bad path in the karma.conf.js files array. Verify that all paths are correct and it should (might?) clear up.

Answer 3

Had near same problem

29 07 2016 13:27:03.298:WARN [web-server]: 404: /base/dist/vendor/ts-md5/dist/dist/md5.js
Missing error handler on `socket`.
TypeError: (msg || "").replace is not a function

Usually issue in paths or wrong import . In my case it happened because of extra slash in module path in system-config.ts

Was

/** Map relative paths to URLs. */
const map: any = {
  'ts-md5': 'vendor/ts-md5/',

Correct is

/** Map relative paths to URLs. */
const map: any = {
  'ts-md5': 'vendor/ts-md5', // <- no slash now