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

Aperta
#32,401 2 commenti 0 reazioni 0 assegnatari Vedi su GitHub

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
3/5
Tempo stimato
1-2 giorni
Idoneità per principianti
68/100
Tipo di issue
Bug
Chiarezza
Abbastanza chiara
Stato di attività
Tranquilla
Stack tecnologico
angular, playwright, typescript

Direzione di ricerca

Riproduci il problema con i passaggi elencati per ng new, ng add, l’installazione di Playwright e ng test. Confronta i file angular.json e tsconfig.spec.json generati con la configurazione documentata della modalità browser, quindi esamina il supporto per ng-add introdotto dal commit f80db6f. Il lavoro è completato quando ng add configura l’opzione browsers in modo che ng test venga eseguito nell’ambiente browser di Vitest invece che in jsdom in Node.js.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

area: @schematics/angular freq1: low severity3: broken type: bug/fix
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:
"test": {
  "builder": "@angular/build:unit-test"
}

to:

"test": {
  "builder": "@angular/build:unit-test",
  "options": {
    "browsers": ["chromium"]
  }
}
  1. Run test via ng test
  2. 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
  3. 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

Lingua principale
TypeScript
Stelle
27k
Fork
11.8k
Merge medio
16h 21m
PR unite (30g)
170

Guida per i contributori

Apri la guida per i contributori

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di angular/angular-cli

Tutte le issue di angular/angular-cli

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.