コンポーネントテストの手法と その効果を考える

Transcript

1. 2024/09/20 Encraft #18 コンポーネントテストの手法と その効果を考える
2. nus3（なすさん）
3. 今日話したいこと  はじめに  各ライブラリの特徴  各ライブラリのベンチマーク  各ライブラリの違い  コンポーネントテストの効果を考える
4. 今日話したいこと  はじめに  各ライブラリの特徴  各ライブラリのベンチマーク  各ライブラリの違い  コンポーネントテストの効果を考える
5. お詫び 発表時間に対して スライドを作りすぎてしまいました 割愛した部分は公開したスライドを ご覧ください
6. コンポーネントテストとは
7. コンポーネントテストとは フロントエンドのコンポーネントを対象にしたテスト
8. コンポーネントテストとは フロントエンドのコンポーネントを対象にしたテスト ❶対象のコンポーネントをレンダリング コンポーネントテストとは
9. コンポーネントテストとは フロントエンドのコンポーネントを対象にしたテスト ❷レンダリングしたコンポーネントを操作 コンポーネントテストとは
10. コンポーネントテストとは フロントエンドのコンポーネントを対象にしたテスト ❸意図した挙動になっているか確認 コンポーネントテストとは
11. コンポーネントテストとして 使えるツール、ライブラリ が増えてきた
12. 例えば Safetest Playwright Testing Library Jest Vitest (Browser Mode) 右にいくほど最近出てきたものな印象
13. それぞれの違いを整理し、 どのような効果があるかを 考えたい
14. 今日話したいこと  はじめに ! 各ライブラリの特徴  各ライブラリのベンチマーク  各ライブラリの違い  コンポーネントテストの効果を考える
15. それぞれのライブラリで コンポーネントテストを実装 使ったことないツールもあったしね
16. 使用したライブラリ 5 Vites" 5 jsdom、Plawright(Browser Mode)、 WebdriverIO(Browser Mode 5 Playwright 5 Storybook (@storybook/test-runner 5 WebdriverII 5 Cypres8 5 Safetest
17. ライブラリの特徴を それぞれ、ざっくり紹介 スライド作りすぎちゃっタ
18. Vitest € Vite-nativeなテストフレームワーy € Viteと同じ設定でテストを実行できI € Jestとの互換性を意識したインターフェーQ € Testing Libraryを使えI € Browser Mode(experimental)ができたことで、
 コンポーネントをブラウザ上にレンダリングし、
 テストを実行できる
19. Playwright WebdriverIO 設定を切り替えるだけで 同じテストを別の動作環境で実行できる Vitest
20. Vitest Testing Libraryを組み合わせたJestのような記法が使える
21. Playwright w Mircosoftq w @storybook/test-runnerやVitestのprovider、SafeTestで 使われていp w experimentalだが、コンポーネントをブラウザ上に
 レンダリングし、テストを実行することも可 w コンポーネントのbundleとserveにはViteを使っている https://playwright.dev/docs/test-components#under-the-hood
22. Playwright https://playwright.dev/docs/test-components#step-2-create-a-test-file-srcappspectstsx React、Svelte、Vue、SolidJSに対応
23. Playwright https://playwright.dev/docs/testing-library#cheat-sheet 記法は違えど、 Testing Libraryのような 書き方もできる
24. R コンポーネントの開発環境E R R コンポーネントの開発フロー(Chromatic$ R コンポーネントのテス6 R Chromatic 、@storybook/test-runnerを使い、
 play関数に書いた内容をブラウザ上でテストできる コンポーネントのドキュメントE Interaction Testみたいな呼び方もあった気がしたけど、 新しいドキュメントではComponent testで統一されていたでござる
25. play関数を使った コンポーネントのテスト
26. PlaywrightのコンポーネントテストにStoryを使う
 (Portable stories) https://storybook.js.org/docs/api/portable-stories/portable-stories-playwright
27. PlaywrightのコンポーネントテストにStoryを使う
 (Portable stories) https://storybook.js.org/docs/api/portable-stories/portable-stories-playwright Portable storiesは名前からも Storybookで定義したStoryを色んなテストフレームワークで 使えるようにしたいって思いがありそう ※個人の感想です
28. WebdriverIO R Node.jsで実行できるブラウザ、モバイルのテスト自動化 フレームワーT R クロスブラウザに対4 R コンポーネントをブラウザ上にレンダリングし、
 テストを実行できD R Lit、Vue、Svelte、SolidJS、React、Preact、Stencil
 に対応 Stencil初耳だったわ
29. WebdriverIO Testing Libraryが使えるのでVitestと同じような記法で書ける
30. R コンポーネントをブラウザ上にレンダリングし、
 テストを実行できX R 公式ではReact、Angular、Vue、Svelteに対1 R R Cypress Cloudというエンタープライズ向けのSaaSがあX R テストの解析やテストの並列化など、テストに関する 機能を提供 別ライブラリに対応するためのAPIも公開してそƒ
31. spyなど独特な記法はあれど、他ライブラリと似たような
 記法で書ける
32. Safetest t Netfilxで採用されているテストフレームワーr t コンポーネントをブラウザ上にレンダリングし、
 テストを実行できH t ブラウザ上の操作にはPlaywrightを使ってH t JestやVitestのテストランナーを使えH t セットアップが簡! t ReactなどのUIライブラリに依存しない
33. Safetest ここから先は Safetestを実際に使ってみて、 READMEを読んだ 程度の知識で喋ります 間違ってたら懇親会の時に優しく教えてね
34. Safetest Safetestのセットアップファイルを作成 アプリのエントリーポイントを指定する
35. Safetest アプリのエントリーポイントでSafetestのbootstrapを呼ぶ
36. Safetest アプリのエントリーポイントでSafetestのbootstrapを実行する このbootstrapが実行される際にglobで指定した
 .safetest.tsxファイルを別々にバンドル
37. Safetest コンポーネントのテストを書く
38. Safetest `s あらかじめアプリケーションを起動しておく
 （npm run devなどW Ts Node.js: テストの中でrender関数が呼ばれるとブラウザ上でアプリケーション の画面に遷移しようとすE as ブラウザ: bootstarpが呼ばれると、importGlobで指定され、バンドルされた モジュール（コンポーネント）とテストケースがマッピン™ s ブラウザ: render関数で指定されたコンポーネント（モジュール）を
 importし、ブラウザ上にレンダリン™ 8s Node.js側に戻り、render関数以降のテストがPlaywright実行 多分、こんな流れのはず
39. 今日話したいこと  はじめに  各ライブラリの特徴 4 各ライブラリのベンチマーク  各ライブラリの違い  コンポーネントテストの効果を考える
40. それぞれのライブラリで テストを実行した際にかかった時間を計測
41. 用意したコンポーネント
42. È3 各inputに値を入# 3 Submitボタンをクリッ Ç3 onSubmitが実行されÄ Â3 入力された値が引数に渡される 用意した⁨⁩テストケース
43. 50ケースあるテストファイルを5つ用意 × 5ファイル テストの実行量はなんとなくです。特に意味はないヨ
44. 計測したライブラリ 8 Vitest + jsdoE 8 Vitest (Browser Mode) + Playwrigh( 8 Vitest (Browser Mode) + WebdriverIA 8 WebdriverIA 8 Storybook (@storybook/test-runner! 8 Safetest 今回実装した内容は以下のリポジトリにあるヨ (⁨⁩色々整ってないけど、許してネ) https://github.com/nus3/benchmark-component-test
45. 計測しなかったライブラリ q Cypressのコンポーネントテストはデフォルトだと、ファイルごとで
 並列にテストが実行されず、あまりにも実行時間が長くなったので除W q 並列で実行するにはCypress Cloudを使う必要があH q Playwrightのコンポーネントテストは用意したテストケースを満たすような
 テストがかけず時間切U q コンポーネントテストでonSubmitをモックして、submit時に引数の値を
 確認する方法がオラにはわからなんだ Playwrightのコンポーネントテスト、ガンガン使ってますって人がいたら、ぜひ話そ
46. 計測に使ったスクリプト https://github.com/nus3/benchmark-component-test/blob/main/scripts/benchmark.ts 各ライブラリ、どんくらい時間かかったんやろなぁ〜ぐらいの 軽い気持ちで見てもらえると
47. 計測結果 ※ちゃんと有意差を示すにはサンプリングの回数がもっと
 必要だと思うので、あくまで参考程度に
48. 計測結果 ※ちゃんと有意差を示すにはサンプリングの回数がもっと必要だと思うので、あくまで参考程度に ※計測した後に気づいたが一部の条件が平等ではない { StorybookとSafetestはテストの実行以外に、
 Storybookのビルドやアプリのサーバー起動が必要で、
 その時間を含められてなy { vitest-wdioはVitest側からproviderOptionsを使って並列に実行する設定を
 渡せていない ほんとに単純な実装しかしてないので、考慮漏れとかあれば教えてください
49. 今日話したいこと  はじめに  各ライブラリの特徴  各ライブラリのベンチマーク C 各ライブラリの違い  コンポーネントテストの効果を考える
50. ライブラリそれぞれで 何が違うのか
51. コンポーネントがレンダリングされる
 場所の違い b コンポーネントはNode.js上でレンダリングされ2 b コンポーネントの操作時に使われるDOM API等は
 jsdomがエミュレートしてくれる ＋ Jest Vitest
52. コンポーネントがレンダリングされる
 場所の違い A コンポーネントはブラウザ上でレンダリングされ% A コンポーネントの操作は実際のブラウザ上で行われる Safetest Playwright WebdriverIO
53. 自動ブラウザテストの違い Playwright WebdriverIO ブラウザの自動操作をする際の アーキテクチャがそれぞれ違う
54. 自動ブラウザテストの違い Playwright WebdriverIO ブラウザの自動操作をする際の アーキテクチャがそれぞれ違う アーキテクチャの違いについてはtogamiさんのZennの記事が とてもわかりやすくて、ありがたかったでござる https://zenn.dev/togami2864/articles/65af759b4a34f6
55. WebDriver WebdriverIO https://www.neovasolutions.com/2022/05/19/browser-automation-tools-protocols-webdriver-vs-cdp/ – 標準化されたWebDriverというプロトコルを使ってブラウザを操R – 各ブラウザではWebDriverプロトコルに対応したDriverを持っていH – クロスブラウザに対d – 間にDriverが必要で、一方向通信
56. Chrome DevTools Protocol(CDP) https://brahmakothapalli.hashnode.dev/playwright-01-selenium-playwright-architecture-comparison t CDPを使ってブラウザを操™ t Chromiumベースのブラウザでしか使えなƒ t PlaywrightではFirefox、Safariでも操作できるようにパッチを当てていV t Driverが間に必要ない、またWebSocketを使った双方向通信を行なっている Playwright WebdriverIO
57. Native https://github.com/cypress-io/cypress-documentation/issues/872#issuecomment-586708267 • ブラウザ上にCypressのテストランナーがあe • 対象のコンポーネントを直接操P • windowやdocumentなどブラウザ上のオブジェクトにもアクセスできe • 複数タブや複数ブラウザを同時に制御できない
58. WebDriver BiDi c 新しいプロトコルで仕様の策定が進められていF c WebDriverの遅さ、CDPのChromium依存という
 両ライブラリの問題点を解消したプロトコX c c c Chrome、Edge、Firefoxでの実装が進んでF Puppeteer v23でFirefoxを操作する際に
 WebDriver BiDiがデフォルト€ WebDriverIOでもv9からWebDriver BiDiがデフォルトに
59. 今日話したいこと  はじめに  各ライブラリの特徴  各ライブラリのベンチマーク  各ライブラリの違い Y コンポーネントテストの効果を考える
60. それぞれの違いから コンポーネントテストの 効果を考える ラストスパートだ！ここからは個人の意見だヨ！！
61. jsdomを使ったコンポーネントテスト ‡ Node.jsで完結する分、導入コストは低く、
 実行時間も短X ‡ 操作手順が少ない（シンプルな）コンポーネントを対象と したテストに最™ ‡ 複雑な手順のコンポーネントを対象にしたテストは
 デバッグがしづらX ‡ ブラウザ上とは異なる挙動になる場合もあd ‡ クリック可能か、z-index、フォーカス、Canvas
62. そもそもシンプルなコンポーネント に対するテストは必要なのか e 品質の担保というより、設計を見直す機会として捉えてW e シンプルなコンポーネントのはずなのに...
 テストが書きづらいぞ...何だ...何かがおかしい..` e copilotやエディタの拡張の登場もあり、コンポーネントテストを書くコストは
 低くなってW e シンプルなコンポーネントな分、テストコード自体も読みやすい→変更箇所の 対応がしやすい→不要な場合に消しやすい
63. ブラウザを使ったコンポーネントテスト n ブラウザ上でレンダリングされるという信頼性の高“ n 挙動が違うんじゃないかという心配がいらなo n E2Eと比べると導入コストは低く、実行時間も短o n 複雑なコンポーネントのデバッグをブラウザ上で
 確認できR n experimentalなライブラリが多いが、これらがstableにな ることで、コンポーネントに対して品質を担保したい時の
 第1の選択肢になりうるのでは
64. ブラウザを使ったコンポーネントテスト s クロスブラウザ対応はWebDriver BiDiの動向が気になˆ s 仕様の策定がどう進んでいくg s 各ブラウザ、テストツールはどう対応するのg s 現状、experimentalなものが多t s ドキュメントや導入事例が十分ではないことT s E2Eほどではないが、実行時間はjsdomと比べて長そ7 s 全てのコンポーネントをブラウザ上で
 レンダリングし、テストする必要はない
65. コンポーネント開発環境として • コンポーネントの開発からテストまでStorybook上で行q • Storybookには、開発環境、ドキュメント、テスト、VRT などコンポーネント開発に関わる機能が揃っていI • play関数を使ったコンポーネントテストのデバッグが優) • ブラウザ上でテストを1ステップずつ確認できI • Storybookの環境は自前で構築してもいいし、
 お金をかけてChromaticに任せちゃってもいい
66. キニナル点
67. Next.jsとコンポーネントテスト ‚ Next.js(App Router)とコンポーネントテストの関係が
 どうなっていくのかワタシキニナリマQ ‚ Client ComponentをテストするのはイメージできI ‚ Suspense使ってる（SSR Streaming）コンポーネントを 対象にブラウザを使ったコンポーネントテストは
 できるの8 ‚ コンポーネントテスト側でも同じ挙動が
 再現できるのか
68. ぜひ、皆さんの考えも 聞かせてください〜 本日は聞いてもろてありがとネ〜