Why isn't my “npm test” working with my Angular2 project?

Question

Summary

I can't get karma to run my jasmine tests on an Angular2 project while watching my files for changes. I have found a hack that seems to work but would like to get the "official" method working properly.

The Problem

I am working through the Angular2 (version 2.0.0) documentation examples and am currently going through the section on testing. I want to have working code of my own to play with locally rather than just working on the Plunker they provide. Therefore, I have downloaded and merged the Plunker code provided by the Angular2 website (which does not have, eg package.json, thus requiring some merging) with the "standard" files in the Angular2 Quickstart github code. I can get the app to work using npm start (so I know my code isn't, say, fundamentally badly formatted or missing parts). However, I cannot get the testing to work.

The problem seems to be with getting the watched typescript compilation to coordinate properly with karma. The testing works with a single run-through, ie npm run test-once which, according to package.json, invokes tsc && karma start karma.conf.js --single-run . However, using karma with watched files does not work, ie npm run test or just npm test which invokes tsc && concurrently \\"tsc -w\\" \\"karma start karma.conf.js\\" .

Some Relevant Code (I think) and Output/Errors

I'll try to provide here some of the code that seems relevant, but just understand that, as far as I can tell, I am just using straight-up official Angular2 documentation code.

package.json :

{
  ...
  "scripts": {
    "start": "tsc && concurrently \"tsc -w\" \"lite-server\" ",
    ...
    "test": "tsc && concurrently \"tsc -w\" \"karma start karma.conf.js\"",
    "test-once": "tsc && karma start karma.conf.js --single-run",
    ...
  },
  ...
  "dependencies": {
    "@angular/common":  "2.0.0",
    "@angular/compiler":  "2.0.0",
    "@angular/core":  "2.0.0",
    "@angular/forms": "2.0.0",
    "@angular/http":  "2.0.0",
    "@angular/platform-browser":  "2.0.0",
    "@angular/platform-browser-dynamic":  "2.0.0",
    "@angular/router":  "3.0.0",
    "@angular/upgrade":  "2.0.0",
    "systemjs": "0.19.27",
    "core-js": "^2.4.1",
    "reflect-metadata": "^0.1.3",
    "rxjs": "5.0.0-beta.12",
    "zone.js": "^0.6.23",
    "angular2-in-memory-web-api": "0.0.20",
    "bootstrap": "^3.3.6"
  },
  "devDependencies": {
    "concurrently": "^2.2.0",
    "lite-server": "^2.2.0",
    "typescript": "^2.0.2",
    "typings": "^1.0.4",
    "canonical-path": "0.0.2",
    "http-server": "^0.9.0",
    "tslint": "^3.7.4",
    "lodash": "^4.11.1",
    "jasmine-core": "~2.4.1",
    "karma": "^1.2.0",
    "karma-chrome-launcher": "^0.2.3",
    "karma-cli": "^0.1.2",
    "karma-htmlfile-reporter": "^0.2.2",
    "karma-jasmine": "^0.3.8",
    "protractor": "^3.3.0",
    "rimraf": "^2.5.2"
  },
  ...
}

tsconfig.json :

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true
  }
}

output, with errors, when I use npm run test (or, equivalently, npm test ):

| ==> npm test

> angular2-quickstart@1.0.0 test /path/to/proj
> tsc && concurrently "tsc -w" "karma start karma.conf.js"

[1] 22 09 2016 11:19:09.622:WARN [watcher]: Pattern "/path/to/proj/testing/**/*.js" does not match any file.
[1] 22 09 2016 11:19:09.655:WARN [watcher]: Pattern "/path/to/proj/testing/**/*.ts" does not match any file.
[1] 22 09 2016 11:19:09.656:WARN [watcher]: Pattern "/path/to/proj/testing/**/*.js.map" does not match any file.
[1] 22 09 2016 11:19:10.040:WARN [karma]: No captured browser, open http://localhost:9876/
[1] 22 09 2016 11:19:10.063:WARN [karma]: Port 9876 in use
[1] 22 09 2016 11:19:10.063:WARN [karma]: Port 9877 in use
[1] 22 09 2016 11:19:10.063:WARN [karma]: Port 9878 in use
[1] 22 09 2016 11:19:10.063:WARN [karma]: Port 9879 in use
[1] 22 09 2016 11:19:10.064:INFO [karma]: Karma v1.3.0 server started at http://localhost:9880/
[1] 22 09 2016 11:19:10.064:INFO [launcher]: Launching browser Chrome with unlimited concurrency
[1] 22 09 2016 11:19:10.100:INFO [launcher]: Starting browser Chrome
[1] 22 09 2016 11:19:11.030:INFO [Chrome 53.0.2785 (Mac OS X 10.11.6)]: Connected on socket /#Qadj2c9N0RBUEQHYAAAA with id 20369349
    Chrome 53.0.2785 (Mac OS X 10.11.6): Executed 6 of 6 SUCCESS (0.272 secs / 0.257 secs)
[1] 22 09 2016 11:19:12.187:INFO [watcher]: Changed file "/path/to/proj/app/model/hero.service.js".
[1] 22 09 2016 11:19:12.205:INFO [watcher]: Changed file "/path/to/proj/app/model/hero.js".
[1] 22 09 2016 11:19:12.231:INFO [watcher]: Changed file "/path/to/proj/app/model/http-hero.service.js".
[1] 22 09 2016 11:19:12.251:INFO [watcher]: Changed file "/path/to/proj/app/model/test-heroes.js".
[1] 22 09 2016 11:19:12.269:INFO [watcher]: Changed file "/path/to/proj/app/shared/twain.service.js".
[0] 11:19:12 AM - Compilation complete. Watching for file changes.
[1] 22 09 2016 11:19:12.337:INFO [watcher]: Changed file "/path/to/proj/app/1st.spec.js".
[1] 22 09 2016 11:19:12.351:INFO [watcher]: Changed file "/path/to/proj/app/about.component.js".
...many more similar lines for seemingly all project files...
[1] 22 09 2016 11:19:12.670:INFO [watcher]: Changed file "/path/to/proj/app/shared/highlight.directive.js".
[1] 22 09 2016 11:19:12.683:INFO [watcher]: Changed file "/path/to/proj/app/shared/title-case.pipe.js".
[1] 22 09 2016 11:19:12.744:INFO [karma]: Delaying execution, these browsers are not ready: Chrome 53.0.2785 (Mac OS X 10.11.6)
    Chrome 53.0.2785 (Mac OS X 10.11.6): Executed 6 of 6 SUCCESS (0.211 secs / 0.2 secs)
[1] Chrome 53.0.2785 (Mac OS X 10.11.6): Executed 0 of 6 SUCCESS (0 secs / 0 secs)
[1] Missing error handler on `socket`.
[1] TypeError: Cannot set property '20369349' of null
[1]     at createHtmlResults (/path/to/proj/node_modules/karma-htmlfile-reporter/index.js:57:32)
[1]     at initializeHtmlForBrowser (/path/to/proj/node_modules/karma-htmlfile-reporter/index.js:78:5)
[1]     at onBrowserStart (/path/to/proj/node_modules/karma-htmlfile-reporter/index.js:91:5)
[1]     at null.<anonymous> (/path/to/proj/node_modules/karma/lib/events.js:13:22)
[1]     at emitTwo (events.js:105:20)
[1]     at emit (events.js:185:7)
[1]     at onStart (/path/to/proj/node_modules/karma/lib/browser.js:126:13)
[1]     at Socket.<anonymous> (/path/to/proj/node_modules/karma/lib/events.js:13:22)
[1]     at emitOne (events.js:95:20)
[1]     at Socket.emit (events.js:182:7)
[1]     at Socket.onevent (/path/to/proj/node_modules/socket.io/lib/socket.js:335:8)
[1]     at Socket.onpacket (/path/to/proj/node_modules/socket.io/lib/socket.js:295:12)
[1]     at Client.ondecoded (/path/to/proj/node_modules/socket.io/lib/client.js:193:14)
[1]     at Decoder.Emitter.emit (/path/to/proj/node_modules/component-emitter/index.js:134:20)
[1]     at Decoder.add (/path/to/proj/node_modules/socket.io-parser/index.js:247:12)
[1]     at Client.ondata (/path/to/proj/node_modules/socket.io/lib/client.js:175:18)
    Chrome 53.0.2785 (Mac OS X 10.11.6) ERROR
[1]   Disconnectedundefined
    Chrome 53.0.2785 (Mac OS X 10.11.6): Executed 0 of 6 DISCONNECTED (2.008 secs / 0 secs)
[1] 22 09 2016 11:19:15.628:ERROR [karma]: [TypeError: Cannot read property '20369349' of null]
[1] TypeError: Cannot read property '20369349' of null
[1]     at onBrowserComplete (/path/to/proj/node_modules/karma-htmlfile-reporter/index.js:95:23)
[1]     at null.<anonymous> (/path/to/proj/node_modules/karma/lib/events.js:13:22)
[1]     at emitOne (events.js:95:20)
[1]     at emit (events.js:182:7)
[1]     at null._onTimeout (/path/to/proj/node_modules/karma/lib/browser.js:166:17)
[1]     at Timer.listOnTimeout (timers.js:92:15)
[1] karma start karma.conf.js exited with code 1

output, with no errors, using npm run test-once :

| ==> npm run test-once

> angular2-quickstart@1.0.0 test-once /Users/AndrewWillems/Documents/Computer/Programming/js/la-learning-angular/ang-web-site/sec04-advd-docmntn/v03/sec14g-testing-starting-w-quickstart
> tsc && karma start karma.conf.js --single-run

22 09 2016 11:24:36.021:WARN [watcher]: Pattern "/Users/AndrewWillems/Documents/Computer/Programming/js/la-learning-angular/ang-web-site/sec04-advd-docmntn/v03/sec14g-testing-starting-w-quickstart/testing/**/*.js" does not match any file.
22 09 2016 11:24:36.052:WARN [watcher]: Pattern "/Users/AndrewWillems/Documents/Computer/Programming/js/la-learning-angular/ang-web-site/sec04-advd-docmntn/v03/sec14g-testing-starting-w-quickstart/testing/**/*.ts" does not match any file.
22 09 2016 11:24:36.053:WARN [watcher]: Pattern "/Users/AndrewWillems/Documents/Computer/Programming/js/la-learning-angular/ang-web-site/sec04-advd-docmntn/v03/sec14g-testing-starting-w-quickstart/testing/**/*.js.map" does not match any file.
22 09 2016 11:24:36.422:WARN [karma]: Port 9876 in use
22 09 2016 11:24:36.423:WARN [karma]: Port 9877 in use
22 09 2016 11:24:36.423:WARN [karma]: Port 9878 in use
22 09 2016 11:24:36.423:WARN [karma]: Port 9879 in use
22 09 2016 11:24:36.424:INFO [karma]: Karma v1.3.0 server started at http://localhost:9880/
22 09 2016 11:24:36.424:INFO [launcher]: Launching browser Chrome with unlimited concurrency
22 09 2016 11:24:36.430:INFO [launcher]: Starting browser Chrome
22 09 2016 11:24:37.272:INFO [Chrome 53.0.2785 (Mac OS X 10.11.6)]: Connected on socket /#7TxMaq43YrbuDQr-AAAA with id 4862877
Chrome 53.0.2785 (Mac OS X 10.11.6): Executed 6 of 6 SUCCESS (0.248 secs / 0.231 secs)

Some Further Notes

• The fact that it has to search through several ports to find one that is not in use does not seem relevant, as I can change the desired port within tsconfig.json and the results are the same.
• Note that halfway through output with errors I get two lines: Chrome 53.0.2785 (Mac OS X 10.11.6): Executed 6 of 6 SUCCESS (0.211 secs / 0.2 secs) , followed immediately by [1] Chrome 53.0.2785 (Mac OS X 10.11.6): Executed 0 of 6 SUCCESS (0 secs / 0 secs) . I don't know the significance of this, but it seems strange.
• I have done Google searches (including through StackOverflow/StackExchange) for some of the error messages including Delaying execution, these browsers are not ready , TypeError: Cannot read property ... of null . I've encountered some discussions (including some long ones) but no obvious solutions.
• Most of the individual tools seem to work fine on their own. ie tsc , tsc -w , ./node_modules/concurrently/src/main.js "echo hello" "echo world" , karma start (as noted previously)

One Hack That Does Seem To Work For Me

I have found one hack of a solution that works for me. I'll show it here so that if others encounter this same problem, at least there is a way to (sort of) work around it. However, if someone can provide me with a real solution, that would be so much better.

My solution is to get the computer to watch the files, but do so while the app is running, not in a way that is dedicated to testing. So, in one terminal window (I'm working on a Mac), I will run npm start which runs the app and continues watching the files. Then, in another terminal window, I will just run karma start (or karma start karma.conf.js ). The app will re-launch every time I make a file change and this in turn gets karma to re-run my tests.

That hack, though, doesn't explain why npm run test doesn't work. Additionally, the above hack does seem to fail, say, once out of every ten file changes. Maybe that's normal for TDD, I'm not sure, but it would be nice to not have to re-boot everything.

So, how can I get npm test to work?

Answer 1

I had this issue and I figured that it was coming from karma-htmlfile-reporter , I searched everywhere to find why I got this error but I couldn't figure why.

Disable the html reporter by removing 'html' from your reporters and remove the htmlReporter entry from your karma.conf.js file.

Then everything should work fine.

But if you need an html file report, I don't know how to fix this issue with this module enabled. You can still get a report by adding | test-result.log | test-result.log at the end of your test entry in package.json .