Tweet
Tweet

Slide 1

Slide 1 text

テストライブラリによって コンポーネントテストの実行時間は どう変わるか？ Startup Angular #9 バレンタインLT会 2025-02-14 @Classi. Corp daichi（だいち）

Slide 2

Slide 2 text

daichi（だいち） 2022〜2025 Angular, Tools, CI/CD @da1chi24

Slide 3

Slide 3 text

コンポーネントテストとは

Slide 4

Slide 4 text

コンポーネントテストとは ① 対象のコンポーネントをレンダリングする

Slide 5

Slide 5 text

コンポーネントテストとは ② レンダリングしたコンポーネントを操作する

Slide 6

Slide 6 text

コンポーネントテストとは ③ 振る舞いを検証する

Slide 7

Slide 7 text

利用できるライブラリ Jasmine jest Web Test Runner vitest 📝 右にいくほど新しい

Slide 8

Slide 8 text

どれを選べばいいのか？

Slide 9

Slide 9 text

実行時間で比較してみよう

Slide 10

Slide 10 text

用意したコンポーネント

Slide 11

Slide 11 text

1. 各 input に値を入力 2. Submit ボタンをクリック 3. EventEmitterが発火し、入力された値が formData() の引数として渡される 実施するテストケース

Slide 12

Slide 12 text

ひたすら実行しコマンド実行〜終了まで計測 ✖ 1000

Slide 13

Slide 13 text

● Karma (Headless Chrome) ● Web Test Runner (Headless Chrome) ● Jest (jsdom) ● Vitest + Webdriverio (Headless Chrome) ● Vitest + Playwright (Headless Chromium) ● Vitest + jsdom 検証するテストライブラリ

Slide 14

Slide 14 text

計測結果 ※あくまで参考値なので雰囲気だけ掴んでもらえると GitHub Actionsで実行した結果をグラフにしたもの https://github.com/kudoas/benchmark-component-test-for-angular/actions/runs/13299959177/job/37139499475 🥇 🥈 🥉

Slide 15

Slide 15 text

なぜ実行時間に差が出るのか？

Slide 16

Slide 16 text

🗂 glob ● テスト対象の実行ファイルの集計 🛠 setup （テスト集計後〜テスト実行前） ● テスト実行環境の準備、依存関係の解決、テストコードの変換 etc. 🧪 assertion ● テストの実行 テストを実行するステップをざっくりいうと...

Slide 17

Slide 17 text

計測結果をステップで分けると傾向が見えるかも 📝GlobとSetupを分割して計測するの難しかったので、 Assertion以外の時間としてまとめています

Slide 18

Slide 18 text

Glob + Setup

Slide 19

Slide 19 text

テストコードを変換するバンドルツールの違い Webpack jest Web Test Runner vitest ts-jest

Slide 20

Slide 20 text

esbuild は Glob + Setup の時間が短い 📝ただし今回はテストファイルは少ないため、大きな差になっていない可能性あり +α

Slide 21

Slide 21 text

Assertion

Slide 22

Slide 22 text

Node.jsでエミュレートしてレンダリングする DOM API を実行し、コンポーネントを操作する コンポーネントがレンダリングされる場所の違い jsdom jest vitest ➕

Slide 23

Slide 23 text

実際のブラウザでコンポーネントをレンダリングする 実際のブラウザでコンポーネントを操作する コンポーネントがレンダリングされる場所の違い vitest ➕ webdriverio or playwright Web Test Runner

Slide 24

Slide 24 text

ブラウザ操作のアーキテクチャの違い https://zenn.dev/togami2864/articles/65af759b4a34f6 📝優良記事なので興味ある方はぜひ！ 今回使ったライブラリのものだけ話します

Slide 25

Slide 25 text

一方向にHTTP通信を行って操作する。間にDriverが必要 毎回通信するため、ブラウザ操作に時間がかかる Webdriver Protocol ➕ webdriverio Browser Automation Tools Protocols – Webdriver vs CDP

Slide 26

Slide 26 text

WebSocketでコネクションする。Driverを介さない Webdriver Protocolよりも安定していて速い Chrome Devtools Protocol (CDP) Playwright 01: Selenium - Playwright architecture comparison playwright Web Test Runner

Slide 27

Slide 27 text

Assertionはwebdriver > jsdom ≒ CDP 📝 CDPがjsdomと同じくらいの時間になったのが意外🧐 +α CDP CDP jsdom jsdom webdriver

Slide 28

Slide 28 text

（余裕あったら） Karmaのアーキテクチャ https://karma-runner.github.io/6.4/intro/how-it-works.html 実行プロセス ① Node.js のサーバーが起動 ② ブラウザを立ち上げて websocketで通信 ③ ブラウザ上に配置された iframe でテストスクリプトを実行する 👉 起動までは時間がかかるが、テストの実行自体は早 い

Slide 29

Slide 29 text

📝 周辺ライブラリやプロトコルの組み合わせによって、同じ テストでも実行時間は異なる ⚠ かなり限られた状況での検証だったので、実運用だと違 う場合は十分ありうる 知見ある方はぜひ話しましょう！ 最後に、テストの実行時間と一概に言っても...

Slide 30

Slide 30 text

daichi（だいち） 2022〜2025 Angular, Tools, CI/CD @da1chi24

Slide 31

Slide 31 text

● コンポーネントテストの手法とその効果を考える ● 次世代のブラウザテスト自動化プロトコルWeb Driver BiDi ● Playwright 01: Selenium - Playwright architecture comparison ● Browser Automation Tools Protocols – Webdriver vs CDP この発表で参考にさせていただいた資料一覧