Angular UT : karma+jasmine+puppeteer 遇到的神坑！！！希望帮助到大家

1. puppeteer安装失败原因

puppeteer是个啥在这就不多加赘述了，这里重点讲的是puppeteer安装失败的问题

国内的小伙伴们使用puppeteer的时候应该都遇到这个问题，puppeteer会绑定最新版本的Chromium,使用

npm i puppeteer

安装时下载速度之慢，有时甚至下载失败。

解决方法：

•  使用 淘宝镜像（本地可以，但是在git上公司不允许）

npm install cnpm -g --registry=http://registry.npm.taobao.org
cnpm i puppeteer

• 在.gitlab-ci.yml中的使用

// 避免下载chromium
- npm config set puppeteer_skip_chromium_download = 1
- npm install --registry=$NPM_CONFIG_REGISTRY

// 将 预先现在好的linux版本的chromium 放在gitlab runner上面，将它copy到原本正常下载的位置
- mkdir -p node_modules/puppeteer/.local-chromium
- cp -rf xxx/npm/.local-chromium/. node_modules/puppeteer/.local-chromium/
// 添加访问权限，这和版本有关，低版本好像是不需要的
- chmod -R 777 node_modules/karma/lib/launchers
- chmod -R 777 node_modules/puppeteer/.local-chromium/

2.  Error : Coverage summary Unknown% ( 0/0 )

> ng test --code-coverage

11 10 2019 06:52:35.314:INFO [karma-server]: Karma v3.1.4 server started at http://0.0.0.0:9876/
11 10 2019 06:52:35.323:INFO [launcher]: Launching browsers ChromeHeadless with concurrency unlimited
11 10 2019 06:52:35.330:INFO [launcher]: Starting browser Chrome
11 10 2019 06:53:35.362:WARN [launcher]: Chrome have not captured in 60000 ms, killing.
11 10 2019 06:53:37.366:WARN [launcher]: Chrome was not killed in 2000 ms, sending SIGKILL.
11 10 2019 06:53:39.368:WARN [launcher]: Chrome was not killed by SIGKILL in 2000 ms, continuing.

=============================== Coverage summary ===============================
Statements : Unknown% ( 0/0 )
Branches : Unknown% ( 0/0 )
Functions : Unknown% ( 0/0 )
Lines : Unknown% ( 0/0 )
================================================================================
 

 Error 原因：和puppeteer的版本有关，因为我之前存放在runner上面的chromium版本较低。

 解决方案：下载对应的puppeteer，将 .local-chromium 更换到最新版本。

3 . Error: spawn EACCES

12 10 2019 03:47:52.106:ERROR [karma-server]: { Error: spawn EACCES
at exports._errnoException (util.js:1020:11)
at ChildProcess.spawn (internal/child_process.js:328:11)
at exports.spawn (child_process.js:369:9)
at spawnWithoutOutput (xxx/node_modules/karma/lib/launchers/process.js:169:26)
at Object.ProcessLauncher._execCommand (xxx/node_modules/karma/lib/launchers/process.js:75:21)
at Object.ProcessLauncher._start (xxx/node_modules/karma/lib/launchers/process.js:33:10)
at Object.<anonymous> (xxx/node_modules/karma/lib/launchers/process.js:19:10)
at emitOne (events.js:101:20)
at Object.emit (events.js:188:7)
at Object.BaseLauncher.start (xxx/node_modules/karma/lib/launchers/base.js:43:10)
at Object.jobs.add [as j] (xxx/node_modules/karma/lib/launcher.js:85:17)
at Object.setTimeout.bind.j (xxx/node_modules/qjobs/qjobs.js:143:18)
at ontimeout (timers.js:386:11)
at tryOnTimeout (timers.js:250:5)
at Timer.listOnTimeout (timers.js:214:5) code: 'EACCES', errno: 'EACCES', syscall: 'spawn' }

Error 原因：.local-chromium更新到新版本之后，缺少访问权限

解决方案：

old code:

chmod 777 node_modules/karma/lib/launchers

fix code:

- chmod -R 777 node_modules/karma/lib/launchers
- chmod -R 777 node_modules/puppeteer/.local-chromium/

4. Error : error while loading shared libraries: libX11-xcb.so.1: cannot open shared object file: No such file or directory

12 10 2019 06:01:13.738:ERROR [launcher]: Cannot start ChromeHeadless
xxx/node_modules/puppeteer/.local-chromium/linux-686378/chrome-linux/chrome: error while loading shared libraries: libX11-xcb.so.1: cannot open shared object file: No such file or directory

 Error 原因：缺少packages

解决方案：

之前我们用的docker image的版本过低 node-6 ,将base image换到了node:10.15.0-alpine，成功解决

5. karma.config.js的配置

// Karma configuration file, see link for more information
// https://karma-runner.github.io/0.13/config/configuration-file.html

process.env.CHROME_BIN = process.env.CHROME_BIN || require('puppeteer').executablePath();

module.exports = function(config) {
  config.set({
    basePath: '',
    frameworks: ['jasmine', '@angular/cli'],
    plugins: [
      require('karma-jasmine'),
      require('karma-chrome-launcher'),
      require('karma-jasmine-html-reporter'),
      require('karma-coverage-istanbul-reporter'),
      require('@angular/cli/plugins/karma')
    ],
    client: {
      clearContext: false // leave Jasmine Spec Runner output visible in browser
    },
    files: [{ pattern: './src/test.ts', watched: false }],
    exclude: ['src/*.ts'],

    preprocessors: {
      './src/test.ts': ['@angular/cli']
    },
    mime: {
      'text/x-typescript': ['ts', 'tsx']
    },
    coverageIstanbulReporter: {
      dir: require('path').join(__dirname, '/coverage'),
      reports: ['html', 'lcovonly', 'text-summary'],
      // Combines coverage information from multiple browsers into one report rather than outputting a report for each browser.
      combineBrowserReports: true,

      // if using webpack and pre-loaders, work around webpack breaking the source path
      fixWebpackSourcePaths: true,

      // Omit files with no statements, no functions and no branches from the report
      skipFilesWithNoCoverage: true,

      // Most reporters accept additional config options. You can pass these through the `report-config` option
      'report-config': {
        html: {
          subdir: 'html'
        }
      }
    },
    angularCli: {
      environment: 'dev'
    },
    reporters: config.angularCli && config.angularCli.codeCoverage ? ['progress', 'coverage-istanbul'] : ['progress', 'kjhtml'],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ['ChromeHeadlessNoSandbox'],
    customLaunchers: {
      ChromeHeadlessNoSandbox: {
        base: 'ChromeHeadless',
        flags: [
          '--headless', 
          '--no-sandbox', 
          ]
      }
    },
    singleRun: true,
    captureTimeout: 60000, // it was already there
    browserDisconnectTimeout: 60000,
    browserDisconnectTolerance: 3,
    browserNoActivityTimeout: 60000 //by default 10000
  });
};

最后想说的是：遇到问题，莫烦（不过问题一个个冒出来也是够烦的，哈哈哈），根据error，对症下药，不要偏离了方向，我刚开始的就是不停的更改karma.config.js的配置，结果并没有啥子鸟用，一度怀疑人生了，不过该干的活硬着头皮也要干下去的，终于的终于换了个方向之后，问题逐渐的明朗，当我看到code coverage的时候激动疯了，亢奋的写下了这篇坑了我两天的issue，希望帮助到同样在坑中挣扎的你们，笔芯！