Angular の Unit Test で style が増え続ける問題を回避すると、実行時間が約半分になった

追記 2021/12/3 : Angular v13 からは、この問題は発生しないようです: 詳細

SharedStylesHost isn't cleaning up styles between Karma test specs · Issue #31834 · angular/angular

↑この Issue にあるように、Angular の Karma を使ったテストで、<style>要素が増え続ける問題がある模様。実際に Headless ではなくブラウザでテストを実行し、DevTools で中をみていると<head>の中で<style>が増加している様子を確認できました。

fix(docs-infra): speed up ng test by cexbrayat · Pull Request #39866 · angular/angular

回避策として、Angular のドキュメントに対する↑この PR のコードのように、test.ts（ng test の --mainで指定している entry-point のファイル）にて、ɵDomSharedStylesHostのngOnDestroy()を挟むようにすると、<style>要素が削除されている様子を確認できました。さらに、テストの実行時間が約半分になりました。

約半分と書きましたが、推測するに、改善具合はテストの数に依存していそうです。PR では1,000を超えるテストで大幅に効果があったようです。

経緯

テストを書いていると、HeadlessChrome 0.0.0 (Mac OS X x.x.x) ERROR Disconnectedundefined の出力で、テストが途中で終わってしまい、その原因を調査していました。

We experienced the same and for us the cause was a memory leak in our tests which was causing these seemingly random errors while in reality we where sometimes hitting the memory limit. Running large test sets with chrome headless · Issue #137 · karma-runner/karma-chrome-launcher

memory leak を解消したら直ったとあります。確かにブラウザを強制終了させたら同じログが出ます。書いていたテストを見直すと、余計な Component や Module をインポートしていたのでそれを修正すると解消しました。

調査中に、以下の Angular のテストを早くする方法の記事を発見しました。今回の style 要素の削除の件も取り上げてられています。