「Frontendのテスト全部知る 〜Unit TestからE2Eまで〜 - Encraft #18」に参加してきました

• 2024/9/20
• https://knowledgework.connpass.com/event/327800/

コンポーネントのテストとして採れそうな手法と、その効果を考える

• nus3さん（サイボウズ株式会社）
• https://speakerdeck.com/yotahada3/frontend-component-test

コンポーネントテスト

• 対象のコンポーネントをレンダリングしてテストする
  • 前はjestやtesting-library
  • 最近はPlaywrightとかでも
• vitest
  • ブラウザモードができた
  • jsdomとPlaywright/chromeとか切り替えられる
• Playwright
  • コンポーネントをレンダリングしてテストできる
  • testing-libraryと似た感じで書ける
• Storybook
  • chromaticと組み合わせたり
  • jestやvitestでStoryを使える
• WebdriverIO
• Cypress
• Safetest
  • Netflix
  • アプリを起動しておいて動かす
• 違い
  • jsdom上
    • jest,vitest
  • ブラウザ上
    • それ以外

上手に付き合うコンポーネントテスト

• Yosuke Kuramiさん
• https://speakerdeck.com/quramy/shang-shou-nifu-kihe-ukonponentotesuto

コンポーネントテスト導入

• 自動テストをどうしてやるか
  • スピードを損なわずに開発する
  • 既存機能が壊れてないこと
  • 見て目の変更を手動で確認するコストの削減
• 新規立ち上げ時は見送っても
  • 後から入れられるようにしておく
• Storybookでテストするのがお手軽
  • Storyを書いておけばコンポーネントテストの備えになる
• Storybookでテスト
  • chromatic
  • LostPixel
  • Storycap
  • storybook/test-runner
  • storycap/testrun
  • jest
  • vitest

コンポーネントテスト運用

• 実行速度を速くする
  • 並列実行
    • CPU増強してワーカーを増やす
    • ジョブを分けて同時に動かす
  • ランナーを使い分ける
    • ブラウザなしでjsdomだけなら遅くなりにくい
• Flakyテストをなくす
  • 成功したり失敗したり不安定なテスト
  • vrtの閾値の調整
  • 部分的な差し替え
    • 動画とかiframeとか

急拡大するナレッジワークの開発組織を支える E2E テスト基盤

• toriiさん（株式会社ナレッジワーク）
• https://speakerdeck.com/kworkdev/knowledgework-e2e-testing-platform-to-support-rapidly-expanding-development-organizations

E2Eテスト

• プロダクトが急拡大してる
  • E2Eがあると安心
• E2Eテスト
  • Playwright
  • 毎朝動いてる
  • マルチテナントなサービスなのでテスト用のテナントを用意してる
• QAとの協業
  • テスト観点
  • CIの監視