Angular 17.1的ng test --no-browsers功能无法正常使用求助

问题背景 #

使用Angular CLI 17.1.1、Node 18.13.0、npm 8.19.3环境，尝试用ng test --no-browsers在无浏览器环境运行单元测试，但命令执行后仅启动9876端口的Karma服务器，未自动执行测试并返回终端提示符。

复现步骤及输出：

~/bob/git >ng new nobrowserstestproj --routing
? Which stylesheet format would you like to use? CSS
? Do you want to enable Server-Side Rendering (SSR) and Static Site Generation (SSG/Prerendering)? No
CREATE nobrowserstestproj/README.md (1072 bytes)
CREATE nobrowserstestproj/.editorconfig (274 bytes)
CREATE nobrowserstestproj/.gitignore (548 bytes)
CREATE nobrowserstestproj/angular.json (2652 bytes)
CREATE nobrowserstestproj/package.json (1049 bytes)
CREATE nobrowserstestproj/tsconfig.json (903 bytes)
CREATE nobrowserstestproj/tsconfig.app.json (263 bytes)
CREATE nobrowserstestproj/tsconfig.spec.json (273 bytes)
CREATE nobrowserstestproj/.vscode/extensions.json (130 bytes)
CREATE nobrowserstestproj/.vscode/launch.json (470 bytes)
CREATE nobrowserstestproj/.vscode/tasks.json (938 bytes)
CREATE nobrowserstestproj/src/main.ts (250 bytes)
CREATE nobrowserstestproj/src/favicon.ico (15086 bytes)
CREATE nobrowserstestproj/src/index.html (304 bytes)
CREATE nobrowserstestproj/src/styles.css (80 bytes)
CREATE nobrowserstestproj/src/app/app.component.css (0 bytes)
CREATE nobrowserstestproj/src/app/app.component.html (19903 bytes)
CREATE nobrowserstestproj/src/app/app.component.spec.ts (952 bytes)
CREATE nobrowserstestproj/src/app/app.component.ts (314 bytes)
CREATE nobrowserstestproj/src/app/app.config.ts (227 bytes)
CREATE nobrowserstestproj/src/app/app.routes.ts (77 bytes)
CREATE nobrowserstestproj/src/assets/.gitkeep (0 bytes)
✔ Packages installed successfully.
    Successfully initialized git.

~/bob/git >cd nobrowserstestproj/
✔ ~/bob/git/nobrowserstestproj [master L|✔] 
08:33 $ ng test --no-browsers
✔ Browser application bundle generation complete.
31 01 2024 08:33:39.199:WARN [karma]: No captured browser, open http://localhost:9876/
31 01 2024 08:33:39.219:INFO [karma-server]: Karma v6.4.2 server started at  http://localhost:9876/

问题原因 #

--no-browsers参数仅禁止Angular CLI自动启动可视化浏览器，但Karma仍处于等待浏览器连接的状态，且默认开启监听模式（watch=true），不会自动终止服务器。要实现无浏览器环境下一次性执行测试并返回提示符，需指定无头浏览器并关闭监听模式。

解决方案 #

方案1：直接使用完整命令执行 #

运行以下命令，显式指定无头Chrome浏览器并关闭监听模式：

ng test --no-browsers --browsers ChromeHeadless --watch=false

执行后Karma会启动Headless Chrome执行所有测试，完成后自动终止服务器并返回终端提示符，同时输出测试结果。

方案2：修改项目配置简化命令 #

若需长期使用无浏览器测试，可修改angular.json将参数默认配置进去：

1. 打开项目根目录下的angular.json
2. 定位到projects -> nobrowserstestproj -> architect -> test -> options节点
3. 添加或修改配置项：

   "options": {
     "noBrowsers": true,
     "browsers": "ChromeHeadless",
     "watch": false
     // 保留原有其他配置
   }
   

之后直接运行ng test即可实现无浏览器一次性执行测试。

注意事项 #

• 确保项目已安装karma-chrome-launcher依赖，Angular新项目默认包含，若缺失可执行：

  npm install karma-chrome-launcher --save-dev
  

• 若需使用其他无头浏览器（如Firefox Headless），可替换ChromeHeadless为FirefoxHeadless，并确保对应启动器已安装。

内容的提问来源于stack exchange，提问作者bob r