ng-add support for Vitest browser providers doesn't work
Nobody has claimed this yet.
Assessment
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Newbie friendliness
- 68/100
- Issue type
- Bug
- Clarity
- Mostly clear
- Activity status
- Quiet
- Tech stack
- angular, playwright, typescript
- Domain
- build-system, cli, testing-qa
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.
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:
ng new angular22dot2dot0next0 --ssr=false --style=scss --ai-config=noneng add @vitest/browser-playwrightnpx playwright install- Open
app.spec.tsand add line to any test:console.log('RUNNING IN:', navigator.userAgent); - Run test via
ng test - Observe the console outputs:
RUNNING IN: Mozilla/5.0 (win32) AppleWebKit/537.36 (KHTML, like Gecko) jsdom/27.4.0 - Test still runs in Node.js with DOM emulation, not in Vitest browser ❌
How to fix:
- Open
angular.jsonand change:
"test": {
"builder": "@angular/build:unit-test"
}
to:
"test": {
"builder": "@angular/build:unit-test",
"options": {
"browsers": ["chromium"]
}
}
- Run test via
ng test - 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 - Test runs in Vitest browser 👍
Exception or Error
Your Environment
_ _ ____ _ ___
/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
/ △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | |
/ ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |
/_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___|
|___/
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
- Dominant language
- TypeScript
- Stars
- 27k
- Forks
- 11.8k
- Avg merge
- 16h 35m
- Merged PRs (30d)
- 176
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
More from angular/angular-cli
-
area: @angular/build gemini-triaged
Difficulty 2/5 1-3 hours Newbie friendliness 74/100
angular/angular-cli#33955 ·
-
area: @angular/cli gemini-triaged
Difficulty 2/5 1-3 hours Newbie friendliness 72/100
angular/angular-cli#33055 · 1 comment · 3 reactions ·
-
area: @angular/build gemini-triaged
Difficulty 4/5 3-5 days Newbie friendliness 72/100
angular/angular-cli#34137 ·
-
angular/build:library area: @angular/build gemini-triaged
angular/angular-cli#34131 · 1 assignee ·
-
angular/build:library area: @angular/build gemini-triaged
angular/angular-cli#34130 · 1 assignee ·
All issues in angular/angular-cli
Similar issues
-
Browser Waiting for: Product Owner
Difficulty 2/5 1-3 hours Newbie friendliness 85/100
getsentry/sentry-javascript#24577 · 1 comment ·
-
Difficulty 2/5 1-3 hours Newbie friendliness 78/100
agilepathway/label-checker#640 ·
-
Difficulty 2/5 1-3 hours Newbie friendliness 84/100
copse-dev/agent-pane#2953 ·
-
agentic-workflows
Difficulty 1/5 Under an hour Newbie friendliness 85/100
githubnext/rig#534 ·
-
automation missing-model model-sync provider:pioneer
Difficulty 2/5 1-3 hours Newbie friendliness 76/100
anomalyco/models.dev#7701 ·