Angular 单元测试卡在 GitHub Action CI 上

Question

我正在尝试使用 GitHub Actions 在默认 Angular 项目上设置 CI 管道。我可以在本地成功运行单元测试，但遇到 GitHub Actions 问题。我需要更改什么才能使其成功运行？

\n

name: Node.js CI\n\non:\n  push:\n    branches: [ master ]\n  pull_request:\n    branches: [ master ]\n\njobs:\n  build:\n\n    runs-on: ubuntu-latest\n\n    strategy:\n      matrix:\n        node-version: [10.x, 12.x, 14.x]\n\n    steps:\n    - uses: actions/checkout@v2\n    - name: Use Node.js ${{ matrix.node-version }}\n      uses: actions/setup-node@v1\n      with:\n        node-version: ${{ matrix.node-version }}\n    - run: npm ci\n    - run: npm run build --if-present\n    - run: npm test\n

\n

这是此步骤的日志输出

\n

> ng test\n\nCompiling @angular/core/testing : es2015 as esm2015\nCompiling @angular/platform-browser/testing : es2015 as esm2015\nCompiling @angular/compiler/testing : es2015 as esm2015\nCompiling @angular/platform-browser-dynamic/testing : es2015 as esm2015\nCompiling @angular/common/testing : es2015 as esm2015\nCompiling @angular/router/testing : es2015 as esm2015\n- Generating browser application bundles...\n17 12 2020 20:14:02.566:WARN [karma]: No captured browser, open http://localhost:9876/\n17 12 2020 20:14:02.708:INFO [karma-server]: Karma v5.1.1 server started at http://localhost:9876/\n17 12 2020 20:14:02.709:INFO [launcher]: Launching browsers Chrome with concurrency unlimited\n17 12 2020 20:14:02.713:INFO [launcher]: Starting browser Chrome\n\xe2\x9c\x94 Browser application bundle generation complete.\n- Generating browser application bundles...\n\xe2\x9c\x94 Browser application bundle generation complete.\n17 12 2020 20:14:07.847:WARN [karma]: No captured browser, open http://localhost:9876/\n17 12 2020 20:14:08.707:ERROR [launcher]: Cannot start Chrome\n    [2646:2646:1217/201408.612463:ERROR:browser_main_loop.cc(1434)] Unable to open X display.\n\n17 12 2020 20:14:08.707:ERROR [launcher]: Chrome stdout: \n17 12 2020 20:14:08.707:ERROR [launcher]: Chrome stderr: [2646:2646:1217/201408.612463:ERROR:browser_main_loop.cc(1434)] Unable to open X display.\n\n17 12 2020 20:14:08.712:INFO [launcher]: Trying to start Chrome again (1/2).\n17 12 2020 20:14:08.860:ERROR [launcher]: Cannot start Chrome\n    [2682:2682:1217/201408.854964:ERROR:browser_main_loop.cc(1434)] Unable to open X display.\n\n17 12 2020 20:14:08.861:ERROR [launcher]: Chrome stdout: \n17 12 2020 20:14:08.861:ERROR [launcher]: Chrome stderr: [2682:2682:1217/201408.854964:ERROR:browser_main_loop.cc(1434)] Unable to open X display.\n\n17 12 2020 20:14:08.863:INFO [launcher]: Trying to start Chrome again (2/2).\n17 12 2020 20:14:09.006:ERROR [launcher]: Cannot start Chrome\n    [2711:2711:1217/201409.000191:ERROR:browser_main_loop.cc(1434)] Unable to open X display.\n\n17 12 2020 20:14:09.006:ERROR [launcher]: Chrome stdout: \n17 12 2020 20:14:09.007:ERROR [launcher]: Chrome stderr: [2711:2711:1217/201409.000191:ERROR:browser_main_loop.cc(1434)] Unable to open X display.\n\n17 12 2020 20:14:09.008:ERROR [launcher]: Chrome failed 2 times (cannot start). Giving up.\n

\n

Answer 1

如果您不想按照其他答案中的建议更改 package.json、karma.conf 或安装 Puppeteer（无论是什么），您只需修改 GitHub 操作配置即可将 和 标志传递--watch=false给--browsers=ChromeHeadless底层脚本。

jobs:
  build:
    steps:
    - run: npm test -- --watch=false --browsers=ChromeHeadless

第一个“浮动”--很重要......它告诉 NPM 将任何后续参数传递给它正在调用的脚本，而不是尝试根据 npm 评估它们。所以如果npm test调用的话ng test，上面的内容实际上会调用ng test --watch=false --browsers=ChromeHeadless。

--watch=false将修复“运行永远不会结束”问题，该问题是由于ng test监视文件更改以触发测试重新运行而引起的。

--browsers=ChromeHeadless将修复 GitHub Actions 无法在没有显示器的系统上运行完整的 Chrome 浏览器的事实（因此错误输出中会出现“无法打开 X 显示”。）因此，它将运行一个模拟显示部分的特殊无头版本。