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

[klofi]

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 f80db6f 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:

"test": {
  "builder": "@angular/build:unit-test"
}

to:

"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

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

[klofi]

Found one more issue with the schematic from f80db6f. When running it in a project that had a library added via ng add the schematic will not modify tsconfig.spec.json of the library.

Repro:

1. After ng new run: ng generate library my-lib
2. After ng add @vitest/browser-playwright the "@vitest/browser-playwright" will not be added to compilerOptions.types of projects\my-lib\tsconfig.spec.json ❌.

[maruthang]

Hi, I'd like to work on this issue.

Root cause: The vitest-browser schematic in packages/schematics/angular/vitest-browser/index.ts adds dependencies and updates tsconfig.spec.json, but doesn't configure the browsers option in angular.json. Users have to manually add it.

Proposed fix: Use the updateWorkspace() utility (same pattern as other schematics) to automatically add the browsers option to the test target in angular.json:

• chromium for Playwright and Preview providers
• chrome for WebDriverIO

Existing browsers configurations are preserved and not overwritten. The log message is updated to reflect the automatic configuration.

Submitting a PR now.