liumiaocn:demo liumiao$ npm install --save-dev karma-phantomjs-launcher > phantomjs-prebuilt@2.1.16 install /Users/liumiao/Desktop/demo/node_modules/phantomjs-prebuilt > node install.js Considering PhantomJS found at /usr/local/phantomjs/phantomjs-2.1.1-macosx/bin/phantomjs Found PhantomJS at /usr/local/phantomjs/phantomjs-2.1.1-macosx/bin/phantomjs ...verifying Writing location.js file PhantomJS is already installed on PATH at /usr/local/phantomjs/phantomjs-2.1.1-macosx/bin/phantomjs npm WARN eslint-plugin-compat@3.3.0 requires a peer of eslint@^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 but none is installed. You must install peer dependencies yourself. + karma-phantomjs-launcher@1.0.4 added 16 packages from 36 contributors in 9.804s liumiaocn:demo liumiao$
步骤3: 修改Karma的配置文件
将缺省的karma配置文件做如下修改即可
liumiaocn:demo liumiao$ diff karma.conf.js karma.conf.js.origin 10c10 < require('karma-phantomjs-launcher'), --- > require('karma-chrome-launcher'), 28,29c28,29 < browsers: ['PhantomJS'], < singleRun: true, --- > browsers: ['Chrome'], > singleRun: false, liumiaocn:demo liumiao$
修改说明：
仍然需要将singleRun设定为true
将chrome的launcher换成phantomjs
将浏览器也从Chrome换成PhantomJS
如果使用的是Angular 8或者是es6的target设定需要将target做如下修改
liumiaocn:demo liumiao$ diff tsconfig.json tsconfig.json.org 13c13 < "target": "es5", --- > "target": "es2015", liumiaocn:demo liumiao$
步骤3: 执行测试
执行ng test可以看到使用的是PhantomJS进行的测试，而且在执行过程中并没有浏览器被打开和执行。
liumiaocn:demo liumiao$ ng test --code-coverage 25% building 94/94 modules 0 active01 11 2019 06:11:48.490:INFO [karma-server]: Karma v4.1.0 server started at :9876/ 01 11 2019 06:11:48.493:INFO [launcher]: Launching browsers PhantomJS with concurrency unlimited 25% building 96/96 modules 0 active01 11 2019 06:11:48.573:INFO [launcher]: Starting browser PhantomJS 01 11 2019 06:11:52.035:INFO [PhantomJS 2.1.1 (Mac OS X 0.0.0)]: Connected on socket PTR3E6eTdHOW0JcEAAAA with id 8370488 PhantomJS 2.1.1 (Mac OS X 0.0.0): Executed 3 of 3 SUCCESS (0.512 secs / 0.769 secs) TOTAL: 3 SUCCESS TOTAL: 3 SUCCESS TOTAL: 3 SUCCESS =============================== Coverage summary =============================== Statements : 100% ( 7/7 ) Branches : 100% ( 0/0 ) Functions : 100% ( 2/2 ) Lines : 100% ( 6/6 ) ================================================================================ liumiaocn:demo liumiao$
此中方式由于PhantomJS已经暂停更新，碰到问题时可能会较为尴尬，比如目前就出现在Angular 8升级是PhantomJS无法正常动作的网上发帖求助，实际上修改为es5能解决大部分问题，所以选择时需要慎重考虑。
无需打开浏览器的测试环境: Chrome的无头模式
PhantomJS使用Webkit内核，无需打开浏览器来完成测试，而实际上除去IE的很多浏览器都提供这种所谓的无头（Headless）模式，Chrome也可以直接提供，在Chrome 59开始提供了headless mode（无头模式）。在Angular 8中使用Chrome的无头模式进行测试非常简单，只需要修改缺省的浏览器从Chrome到ChromeHeadless即可。
步骤1: 修改Karma的配置文件
将缺省的karma配置文件做如下修改即可
liumiaocn:demo liumiao$ diff karma.conf.js karma.conf.js.origin 28,29c28,29 < browsers: ['ChromeHeadless'], < singleRun: true, --- > browsers: ['Chrome'], > singleRun: false, liumiaocn:demo liumiao$
修改说明：
仍然需要将singleRun设定为true
将浏览器从Chrome改成ChromeHeadless
步骤2: 执行测试
执行ng test可以看到使用的是ChromeHeadless进行的测试，而且在执行过程中并没有浏览器被打开和执行。
liumiaocn:demo liumiao$ ng test --code-coverage 25% building 15/15 modules 0 active01 11 2019 06:37:05.037:INFO [karma-server]: Karma v4.1.0 server started at :9876/ 01 11 2019 06:37:05.040:INFO [launcher]: Launching browsers ChromeHeadless with concurrency unlimited 25% building 93/93 modules 0 active01 11 2019 06:37:05.154:INFO [launcher]: Starting browser ChromeHeadless 01 11 2019 06:37:08.720:INFO [HeadlessChrome 78.0.3904 (Mac OS X 10.14.0)]: Connected on socket Br7fkzwejyGNs2WgAAAA with id 35869507 HeadlessChrome 78.0.3904 (Mac OS X 10.14.0): Executed 3 of 3 SUCCESS (0.374 secs / 0.319 secs) TOTAL: 3 SUCCESS TOTAL: 3 SUCCESS TOTAL: 3 SUCCESS =============================== Coverage summary =============================== Statements : 100% ( 7/7 ) Branches : 100% ( 0/0 ) Functions : 100% ( 2/2 ) Lines : 100% ( 6/6 ) ================================================================================ liumiaocn:demo liumiao$
总结