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

オープン
#32,401 コメント 2 件 リアクション 0 件 担当者 0 名 GitHub で見る

まだ誰も着手していません。

評価

難易度
3/5
見積もり時間
1〜2日
初心者へのやさしさ
68/100
issue の種類
バグ
明瞭さ
おおむね明確
活発さ
静か
技術スタック
angular, playwright, typescript

調査の方向性

記載されている ng new、ng add、Playwright のインストール、ng test の手順で問題を再現します。生成された angular.json と tsconfig.spec.json を、ドキュメントに記載されたブラウザーモードの設定と比較し、その後、コミット f80db6f で導入された ng-add のサポートを調査します。ng add が browsers オプションを設定し、ng test が Node.js の jsdom ではなく Vitest のブラウザー環境で実行されるようになれば完了です。

索引モデルが issue の本文から書いたものです。

説明

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

主要言語
TypeScript
スター
27k
フォーク
11.8k
平均マージ
16時間 35分
マージ済み PR(30日)
176

コントリビューションガイド

コントリビューションガイドを開く

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

angular/angular-cli のほかの issue

angular/angular-cli の issue をすべて見る

似ている issue

TypeScript の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。