angular / angular/angular-cli

ng-add support for Vitest browser providers doesn't work

未关闭
#32,401 2 条评论 0 个 reaction 已指派 0 人 在 GitHub 查看
area: @schematics/angular freq1: low severity3: broken type: bug/fix
主要语言
TypeScript
星标
27k
派生
11.8k
平均合并
14 小时 23 分钟
30 天内合并 PR
162

描述

### Command

add

### Is this a regression?

- [ ] Yes, this behavior used to work in the previous version

### The previous version in which this bug was not present was

_No response_

### Description

@angular/cli v21.2.0-next.0 added in https://github.com/angular/angular-cli/commit/f80db6fb714aa326f6ed03a8a51090ca59ad0955 `add ng-add support for Vitest browser providers` but it is not complete and does not actually work.

The schematic correctly adds the required packages and modifies `tsconfig.spec.json` but does not add the `browsers` option as documented at https://angular.dev/guide/testing/migrating-to-vitest#5-configure-browser-mode-optional.

Without this option the test doesn't actually run in browser environment and is still run in DOM emulation library within Node.js.

### Minimal Reproduction

Repro steps:

1. `ng new angular22dot2dot0next0 --ssr=false --style=scss --ai-config=none`
2. `ng add @vitest/browser-playwright`
3. `npx playwright install`
4. Open `app.spec.ts` and add line to any test: `console.log('RUNNING IN:', navigator.userAgent);`
5. Run test via `ng test`
6. Observe the console outputs: `RUNNING IN: Mozilla/5.0 (win32) AppleWebKit/537.36 (KHTML, like Gecko) jsdom/27.4.0`
7. Test still runs in Node.js with DOM emulation, not in Vitest browser ❌

How to fix:

1. Open `angular.json` and change:
```json
"test": {
"builder": "@angular/build:unit-test"
}
```

to:
```json
"test": {
"builder": "@angular/build:unit-test",
"options": {
"browsers": ["chromium"]
}
}
```
2. Run test via `ng test`
3. Observe actual Chrome for Testing window opens and Console outputs: `RUNNING IN: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/145.0.0.0 Safari/537.36`
4. Test runs in Vitest browser 👍

### Exception or Error

```text

```

### Your Environment

```text
_ _ ____ _ ___
/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
/ △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | |
/ ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |
/_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___|
|___/

Angular CLI : 21.2.0-next.0
Node.js : 24.13.0
Package Manager : npm 11.6.2
Operating System : win32 x64
```

### Anything else relevant?

_No response_

贡献指南

打开贡献指南

调研方向

使用列出的 ng new、ng add、Playwright 安装和 ng test 步骤复现该问题。将生成的 angular.json 和 tsconfig.spec.json 与文档中的浏览器模式配置进行比较,然后检查 commit f80db6f 引入的 ng-add 支持。完成的标准是 ng add 配置 browsers 选项,使 ng test 在 Vitest 浏览器环境中运行,而不是在 Node.js 中使用 jsdom。

由索引模型根据 Issue 内容生成。

评估

技术栈
angular, playwright, typescript
领域
build-system, cli, testing-qa
Issue 类型
缺陷
难度
3/5
预计耗时
1-2 天
活跃度
冷清
描述清晰度
基本清楚
新手友好度
68/100

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。