ng-add support for Vitest browser providers doesn't work
- 主要言語
- TypeScript
- スター
- 27k
- フォーク
- 11.8k
- 平均マージ
- 14時間 23分
- マージ済み PR(30日)
- 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 を、ドキュメントに記載されたブラウザーモードの設定と比較し、その後、コミット f80db6f で導入された ng-add のサポートを調査します。ng add が browsers オプションを設定し、ng test が Node.js の jsdom ではなく Vitest のブラウザー環境で実行されるようになれば完了です。
索引モデルが issue の本文から書いたものです。
評価
- 技術スタック
- angular, playwright, typescript
- 領域
- build-system, cli, testing-qa
- issue の種類
- バグ
- 難易度
- 3/5
- 見積もり時間
- 1〜2日
- 活発さ
- 静か
- 明瞭さ
- おおむね明確
- 初心者へのやさしさ
- 68/100