ng-add support for Vitest browser providers doesn't work
- Dominant language
- TypeScript
- Stars
- 27k
- Forks
- 11.8k
- Avg merge
- 14h 23m
- Merged PRs (30d)
- 162
Description
### 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_
Contributor guide
Research direction
Reproduce the issue with the listed ng new, ng add, Playwright install, and ng test steps. Compare the generated angular.json and tsconfig.spec.json with the documented browser-mode configuration, then inspect the ng-add support introduced by commit f80db6f. Done means ng add configures the browsers option so ng test runs in the Vitest browser environment rather than jsdom in Node.js.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- angular, playwright, typescript
- Domain
- build-system, cli, testing-qa
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 68/100