为什么我的 "npm test" 不能使用我的 Angular2 项目？

Question

总结

在查看我的文件更改时，我无法对运行我在 Angular2 项目上的 jasmine 测试产生业力。我发现了一个似乎有效但希望 "official" 方法正常工作的技巧。

问题

我正在研究 Angular2（2.0.0 版）文档示例，目前正在研究测试部分。我想要自己的工作代码在本地使用，而不是仅仅使用他们提供的 Plunker。因此，我已经下载并合并了 Angular2 网站提供的 Plunker 代码（没有 package.json，因此需要一些合并）与 Angular2 快速入门 github 中的 "standard" 文件代码。我可以使用 npm start 使该应用程序正常工作（所以我知道我的代码不是，比如说，根本上格式错误或缺少部分）。但是，我无法进行测试。

问题似乎在于让 watched typescript 编译与 karma 正确协调。测试使用单个运行-through，即 npm run test-once，根据 package.json，调用 tsc && karma start karma.conf.js --single-run。但是，将 karma 与监视文件一起使用不起作用，即 npm run test 或仅 npm test 调用 tsc && concurrently \"tsc -w\" \"karma start karma.conf.js\".

一些相关代码（我认为）和Output/Errors

我将尝试在此处提供一些看似相关的代码，但请理解，据我所知，我只是使用直接的官方 Angular2 文档代码。

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

当我使用 npm run test（或者等效地，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

输出，没有错误，使用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)

一些进一步的说明

它必须搜索多个端口才能找到未使用的端口这一事实似乎无关紧要，因为我可以在 tsconfig.json 内更改所需的端口并且结果是相同的。
请注意，在错误输出的中途我得到两行：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)。我不知道这有什么意义，但看起来很奇怪。
我已经 Google 搜索（包括通过 Whosebug/StackExchange）一些错误消息，包括 Delaying execution, these browsers are not ready、TypeError: Cannot read property ... of null。我遇到了一些讨论（包括一些很长的讨论）但没有明显的解决方案。
大多数单独的工具似乎都可以单独使用。即 tsc、tsc -w、./node_modules/concurrently/src/main.js "echo hello" "echo world"、karma start（如前所述）

一个似乎对我有用的技巧

我找到了一种适合我的解决方案。我会在这里展示它，这样如果其他人遇到同样的问题，至少有一种方法可以（某种程度上）解决它。但是，如果有人能为我提供 真正的 解决方案，那就更好了。

我的解决方案是让计算机观看文件，但是在应用运行ning 时这样做，而不是以专门用于测试的方式。因此，在一个终端 window（我正在开发 Mac）中，我将运行 npm start 运行应用程序并继续观看文件.然后，在另一个终端 window，我将运行 karma start（或 karma start karma.conf.js）。每次我更改文件时，该应用程序都会重新启动，这反过来又会导致业力重新运行我的测试。

不过，这个 hack 并没有解释为什么 npm run test 不起作用。此外，上述 hack 似乎确实失败了，比如说，每十个文件更改一次。也许这对 TDD 来说是正常的，我不确定，但如果不必重新启动一切就更好了。

那么，我怎样才能让 npm test 工作？

Answer 1

我遇到了这个问题，我认为它来自 karma-htmlfile-reporter，我到处搜索以找出为什么会出现此错误，但我无法弄清楚为什么。

通过从 reporters 中删除 'html' 并从 karma.conf.js 文件中删除 htmlReporter 条目来禁用 html 报告器。

然后一切都应该正常工作。

但是如果您需要 html 文件报告，我不知道如何在启用此模块的情况下解决此问题。您仍然可以通过在 package.json 中的 test 条目末尾添加 | test-result.log 来获得报告。

为什么我的 "npm test" 不能使用我的 Angular2 项目？

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

javascript

npm

jasmine

karma-runner

angular