[英]Why isn't my “npm test” working with my Angular2 project?
Summary 摘要
I can't get karma to run my jasmine tests on an Angular2 project while watching my files for changes. 在观察我的文件进行更改时,我无法在Angular2项目上运行我的茉莉花测试。 I have found a hack that seems to work but would like to get the "official" method working properly.
我发现了一个似乎有用的hack但希望让“官方”方法正常工作。
The Problem 问题
I am working through the Angular2 (version 2.0.0) documentation examples and am currently going through the section on testing. 我正在处理Angular2(版本2.0.0)文档示例,目前正在进行有关测试的部分。 I want to have working code of my own to play with locally rather than just working on the Plunker they provide.
我想拥有自己的工作代码来与本地玩,而不是仅仅使用他们提供的Plunker。 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.
因此,我已经下载并合并了Angular2网站提供的Plunker代码(它没有,例如package.json,因此需要一些合并)和Angular2 Quickstart github代码中的“标准”文件。 I can get the app to work using
npm start
(so I know my code isn't, say, fundamentally badly formatted or missing parts). 我可以使用
npm start
让应用程序工作(所以我知道我的代码不是,比方说,基本上格式错误或缺少部分)。 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
. 测试使用单个贯穿,即
npm run test-once
,根据package.json,调用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\\"
. 但是,使用带有监视文件的业力不起作用,即
npm run test
或只是调用tsc && concurrently \\"tsc -w\\" \\"karma start karma.conf.js\\"
npm test
。
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. 我将尝试在这里提供一些似乎相关的代码,但只要明白,据我所知,我只是使用直接的官方Angular2文档代码。
package.json
: 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
: 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 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
output, with no errors, using npm run test-once
: 输出,没有错误,使用
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 一些进一步说明
tsconfig.json
and the results are the same. tsconfig.json
更改所需的端口,结果是相同的。 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)
. 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)
。 I don't know the significance of this, but it seems strange. Delaying execution, these browsers are not ready
, TypeError: Cannot read property ... of null
. 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. tsc
, tsc -w
, ./node_modules/concurrently/src/main.js "echo hello" "echo world"
, karma start
(as noted previously) tsc
, tsc -w
,。/ ./node_modules/concurrently/src/main.js "echo hello" "echo world"
, karma start
(如前所述) 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. 所以,在一个终端窗口(我在Mac上工作),我将运行
npm start
运行应用程序并继续观看文件。 Then, in another terminal window, I will just run karma start
(or karma start karma.conf.js
). 然后,在另一个终端窗口中,我将运行
karma start
(或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. 但是,这个hack并没有解释为什么
npm run test
不起作用。 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.
也许这对TDD来说是正常的,我不确定,但不必重新启动所有内容会很好。
So, how can I get npm test
to work? 那么,我怎样才能让
npm test
工作?
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. 我有这个问题,我认为它来自
karma-htmlfile-reporter
,我到处搜索,找到为什么我得到这个错误,但我无法karma-htmlfile-reporter
为什么。
Disable the html reporter by removing 'html'
from your reporters
and remove the htmlReporter
entry from your karma.conf.js
file. 通过移除禁用HTML记者
'html'
从reporters
和删除htmlReporter
从您的输入karma.conf.js
文件。
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. 但是如果您需要一个html文件报告,我不知道如何在启用此模块的情况下解决此问题。 You can still get a report by adding
| test-result.log
您仍然可以通过添加
| test-result.log
来获取报告 | test-result.log
at the end of your test
entry in package.json
. 在
package.json
中的test
条目末尾的| test-result.log
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.