テストライブラリによってコンポーネントテストの実行時間はどう変わるか / component-test-performance-by-library

https://voicy.connpass.com/event/342447/
Startup Angular #9 バレンタインLT会 での発表資料

Transcript

1. テストライブラリによって コンポーネントテストの実行時間は どう変わるか？ Startup Angular #9 バレンタインLT会 2025-02-14 @Classi. Corp daichi（だいち）
2. daichi（だいち） 2022〜2025 Angular, Tools, CI/CD @da1chi24
3. コンポーネントテストとは
4. コンポーネントテストとは ① 対象のコンポーネントをレンダリングする
5. コンポーネントテストとは ② レンダリングしたコンポーネントを操作する
6. コンポーネントテストとは ③ 振る舞いを検証する
7. 利用できるライブラリ Jasmine jest Web Test Runner vitest 📝 右にいくほど新しい
8. どれを選べばいいのか？
9. 実行時間で比較してみよう
10. 用意したコンポーネント
11. 1. 各 input に値を入力 2. Submit ボタンをクリック 3. EventEmitterが発火し、入力された値が formData() の引数として渡される 実施するテストケース
12. ひたすら実行しコマンド実行〜終了まで計測 ✖ 1000
13. • Karma (Headless Chrome) • Web Test Runner (Headless Chrome) • Jest (jsdom) • Vitest + Webdriverio (Headless Chrome) • Vitest + Playwright (Headless Chromium) • Vitest + jsdom 検証するテストライブラリ
14. 計測結果 ※あくまで参考値なので雰囲気だけ掴んでもらえると GitHub Actionsで実行した結果をグラフにしたもの https://github.com/kudoas/benchmark-component-test-for-angular/actions/runs/13299959177/job/37139499475 🥇 🥈 🥉
15. なぜ実行時間に差が出るのか？
16. 🗂 glob • テスト対象の実行ファイルの集計 🛠 setup （テスト集計後〜テスト実行前） • テスト実行環境の準備、依存関係の解決、テストコードの変換 etc. 🧪 assertion • テストの実行 テストを実行するステップをざっくりいうと...
17. 計測結果をステップで分けると傾向が見えるかも 📝GlobとSetupを分割して計測するの難しかったので、 Assertion以外の時間としてまとめています
18. Glob + Setup
19. テストコードを変換するバンドルツールの違い Webpack jest Web Test Runner vitest ts-jest
20. esbuild は Glob + Setup の時間が短い 📝ただし今回はテストファイルは少ないため、大きな差になっていない可能性あり +α
21. Assertion
22. Node.jsでエミュレートしてレンダリングする DOM API を実行し、コンポーネントを操作する コンポーネントがレンダリングされる場所の違い jsdom jest vitest ➕
23. 実際のブラウザでコンポーネントをレンダリングする 実際のブラウザでコンポーネントを操作する コンポーネントがレンダリングされる場所の違い vitest ➕ webdriverio or playwright Web Test Runner
24. ブラウザ操作のアーキテクチャの違い https://zenn.dev/togami2864/articles/65af759b4a34f6 📝優良記事なので興味ある方はぜひ！ 今回使ったライブラリのものだけ話します
25. 一方向にHTTP通信を行って操作する。間にDriverが必要 毎回通信するため、ブラウザ操作に時間がかかる Webdriver Protocol ➕ webdriverio Browser Automation Tools Protocols – Webdriver vs CDP
26. WebSocketでコネクションする。Driverを介さない Webdriver Protocolよりも安定していて速い Chrome Devtools Protocol (CDP) Playwright 01: Selenium - Playwright architecture comparison playwright Web Test Runner
27. Assertionはwebdriver > jsdom ≒ CDP 📝 CDPがjsdomと同じくらいの時間になったのが意外🧐 +α CDP CDP jsdom jsdom webdriver
28. （余裕あったら） Karmaのアーキテクチャ https://karma-runner.github.io/6.4/intro/how-it-works.html 実行プロセス ① Node.js のサーバーが起動 ② ブラウザを立ち上げて websocketで通信 ③ ブラウザ上に配置された iframe でテストスクリプトを実行する 👉 起動までは時間がかかるが、テストの実行自体は早 い
29. 📝 周辺ライブラリやプロトコルの組み合わせによって、同じ テストでも実行時間は異なる ⚠ かなり限られた状況での検証だったので、実運用だと違 う場合は十分ありうる 知見ある方はぜひ話しましょう！ 最後に、テストの実行時間と一概に言っても...
30. daichi（だいち） 2022〜2025 Angular, Tools, CI/CD @da1chi24
31. • コンポーネントテストの手法とその効果を考える • 次世代のブラウザテスト自動化プロトコルWeb Driver BiDi • Playwright 01: Selenium - Playwright architecture comparison • Browser Automation Tools Protocols – Webdriver vs CDP この発表で参考にさせていただいた資料一覧