Zenn
🪐

Angular CLI の Web Test Runner サポートを試す

2025/02/09に公開
Angular
karma
jasmine
webtestrunner
tech

Angular v17.1 より密かに実験的機能として Web Test Runner をテストランナーとしたビルダーが追加されました。この記事では、実際に Angularプロジェクトで Web Test Runnerを有効にして試したことを紹介します。Angular が Web Test Runner サポートを検討している背景などは公式ブログを参照してください。

https://blog.angular.dev/moving-angular-cli-to-jest-and-web-test-runner-ef85ef69ceca

また 上記の記事では jest のサポートについても取り上げられています。こちらの CLI のサポートについて詳しく知りたい方は、以下のブログをご覧ください。

https://zenn.dev/lacolaco/articles/angular-16-jest

Web Test Runner を試す

プロジェクトを作成する

まずは新規で Angular プロジェクトを作成します。

npm init @angular@latest ng19-wtr

Web Test Runner ビルダーに切り替える

Web Test Runner はブラウザテストですが、現在はミニマムな実装になっているため assets や styles といったオプションはサポートされていません（この辺りは後述します）。そのため、次のように非対応のオプションは削除します。

angular.json
 "test": {
-  "builder": "@angular-devkit/build-angular:karma",
+  "builder": "@angular-devkit/build-angular:web-test-runner",
   "options": {
     "polyfills": [
       "zone.js",
       "zone.js/testing"
     ],
     "tsConfig": "tsconfig.spec.json",
-    "assets": [
-      {
-        "glob": "**/*",
-        "input": "public"
-      }
-    ],
-    "styles": [
-      "src/styles.css"
-    ],
-    "scripts": []
   }
 }

このように変更して ng test コマンドを実行すると、Web Test Runner の npm パッケージが不足していることがエラーとして表示されます。その内容に従い、@web/test-runner を追加でインストールします。

npm install @web/test-runner --save-dev

テストを実行する

再度 ng test コマンドを実行します。自動生成される AppComponent には簡易なユニットテストが app.component.spec.ts として書かれているので、うまくセットアップできていればテストが通るはずです。

テスト実行結果

Web Test Runner ビルダーの設定

Angula CLI v19.1.6 時点ではサポートされている設定はかなり少ないです。

angular.json で定義できるオプションは schema.json で分かりますが、この中でもサポートされていないものはログとして別途表示するようになっています。差分から実際に利用できるオプションは以下です。

  • tsConfig: テスト用のtsconfigファイルを指定する
  • polyfills: 基本的にzone.jsを指定する
  • include/exclude: テストで実行するファイルをGlobパターンで絞る

注意点

Web Test Runner で実行できるのはブラウザテストですが、browsers という任意のブラウザを選択できるオプションはまだ対応していません。そのため、Web Test Runner のデフォルトである Chrome でしか実行できません。

また、assets オプションと styles オプションも指定することができません。そのため、テスト実行時に画像やフォントなどの静的ファイルやCSSを読み込むことができず、これらを加味したテストを実行することはできません。

watch 相当のオプションや機能もまだ実装されていません。そのため、単発のテスト実行しかできません。

この辺りはおそらく今後サポートされるはずですが、現在では商用利用するには機能が不足しています、そのため、試験的な利用に留めておくのが良いと思います。

Karma の代替としての Web Test Runner

Web Test Runner ビルダーはテストランナーである Karma の代替となるものなので、テスティングフレームワークとして jasmine は引き続き利用されます。そのため、Angular 標準の karma/jasmine から移行する場合は、jasmine でのテストを変更箇所が少なく済むことが期待できます。移行先の選択肢として今後の動きに期待したいですね。

Discussion