angular / angular/angular-cli

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

Abierto
#32,401 2 comentarios 0 reacciones 0 asignados Ver en GitHub
area: @schematics/angular freq1: low severity3: broken type: bug/fix
Lenguaje dominante
TypeScript
Estrellas
27k
Forks
11.8k
Merge medio
14 h 23 min
PR fusionados (30 d)
162

Descripción

### 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_

Guía de contribución

Abrir la guía de contribución

Línea de trabajo

Reproduce el problema con los pasos indicados de ng new, ng add, instalación de Playwright y ng test. Compare los angular.json y tsconfig.spec.json generados con la configuración documentada del modo de navegador y, después, inspeccione la compatibilidad con ng-add introducida por el commit f80db6f. Se considera terminado cuando ng add configura la opción browsers para que ng test se ejecute en el entorno de navegador de Vitest en lugar de jsdom en Node.js.

Escrito por el modelo de indexación a partir del texto del issue.

Evaluación

Stack tecnológico
angular, playwright, typescript
Área
build-system, cli, testing-qa
Tipo de issue
Error
Dificultad
3/5
Tiempo estimado
1-2 días
Estado de actividad
Tranquilo
Claridad
Bastante claro
Aptitud para principiantes
68/100

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.