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

Aberta
#32,401 2 comentários 0 reações 0 responsáveis Ver no GitHub

Ninguém assumiu esta issue ainda.

Avaliação

Dificuldade
3/5
Tempo estimado
1-2 dias
Facilidade para iniciantes
68/100
Tipo de issue
Bug
Clareza
Razoavelmente clara
Status de atividade
Pouca atividade
Stack de tecnologia
angular, playwright, typescript

Direção de pesquisa

Reproduza o problema com as etapas listadas de ng new, ng add, instalação do Playwright e ng test. Compare os angular.json e tsconfig.spec.json gerados com a configuração documentada do modo de navegador e, em seguida, inspecione o suporte a ng-add introduzido pelo commit f80db6f. O trabalho estará concluído quando ng add configurar a opção browsers para que ng test seja executado no ambiente de navegador do Vitest em vez de jsdom no Node.js.

Escrita pelo modelo de indexação a partir do texto da issue.

Descrição

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

Linguagem predominante
TypeScript
Estrelas
27k
Forks
11.8k
Merge médio
16h 35min
PRs com merge (30d)
176

Guia de contribuição

Abrir o guia de contribuição

Primeiros passos

  1. Leia a issue inteira e depois o guia de contribuição do projeto.
  2. Comente na issue dizendo que vai assumir — evita que duas pessoas façam o mesmo trabalho.
  3. Faça um fork do repositório e trabalhe em uma branch.
  4. Abra um pull request que referencie o número da issue.

Mais de angular/angular-cli

Todas as issues de angular/angular-cli

Issues semelhantes

Mais issues de TypeScript

Receba novas issues na sua caixa de entrada

Um resumo curto de issues do GitHub para quem está começando.