Toms(@toms74209200) Testing Trophyは叫ばない フロントエンドカンファレンス北海道2025 2025-09-06 

テスト書いてますか？ 

フロントエンドテストの普及 テストツールの充実 

Testing Trophy https://x.com/kentcdodds/status/960723172591992832 🙅 🙆 『Googleのソフトウェアエンジニアリング―持続可能なプログラミングを支える技術、文化、プロセス』より 

Testing Trophy • リソースには限りがあるよ • ユーザーの使い方に近いテストが意味のあるテストだよ • 統合テストが一番コスパがいいよ https://kentcdodds.com/blog/the-testing-trophy-and-testing-classi fi cations 

新たな課題 • 2回に1回は失敗する • 変更のたびにテストが壊れる • いつまでたっても終わらない 第2回　偽陽性と偽陰性 ～自動テストの信頼性をむしばむ現象を理解する～ | gihyo.jp https://gihyo.jp/dev/serial/01/savanna-letter/0002 第8回　脆いテスト ～継続的な変更と改善を阻むテストの原因と対策～ | gihyo.jp https://gihyo.jp/dev/serial/01/savanna-letter/0008 

• 2回に1回は失敗する • 変更のたびにテストが壊れる • いつまでたっても終わらない 新たな課題 第2回　偽陽性と偽陰性 ～自動テストの信頼性をむしばむ現象を理解する～ | gihyo.jp https://gihyo.jp/dev/serial/01/savanna-letter/0002 第8回　脆いテスト ～継続的な変更と改善を阻むテストの原因と対策～ | gihyo.jp https://gihyo.jp/dev/serial/01/savanna-letter/0008 「3回くらいリトライしたらうまくいくよ」 / / CIͩͱࣦഊ͢ΔͷͰεΩοϓ͍ͯ͠·͢ɻϩʔΧϧͰ࣮ߦ͍ͯͩ͘͠͞ɻ 失敗するから失敗してもテスト通ったことにします マシンパワーで解決💪 「リリースに間に合わないのでテストスキップしてリリースします」 CI通るまで休憩☕ 

• 2回に1回は失敗する • 変更のたびにテストが壊れる • いつまでたっても終わらない 新たな課題 第2回　偽陽性と偽陰性 ～自動テストの信頼性をむしばむ現象を理解する～ | gihyo.jp https://gihyo.jp/dev/serial/01/savanna-letter/0002 第8回　脆いテスト ～継続的な変更と改善を阻むテストの原因と対策～ | gihyo.jp https://gihyo.jp/dev/serial/01/savanna-letter/0008 「3回くらいリトライしたらうまくいくよ」 / / CIͩͱࣦഊ͢ΔͷͰεΩοϓ͍ͯ͠·͢ɻϩʔΧϧͰ࣮ߦ͍ͯͩ͘͠͞ɻ 失敗するから失敗してもテスト通ったことにします マシンパワーで解決💪 「リリースに間に合わないのでテストスキップしてリリースします」 CI通るまで休憩☕ どうしてこうなった🤷 

Testing Trophyだけでは解決できない問題がある • 「統合テスト」って？ • なんでもかんでも統合テストにしてない？ • 単体テストでも統合テストでも 脆いテストや信頼不能テストは生まれる ここはOK👌 

Toms(@toms74209200) 株式会社アジェンダ（＠札幌） どんぐりはいいぞ whoami https://note.com/donguri_of fi cial/n/nc8ce1d339f09 

ここまでのまとめ • テストつらい：信頼不能テスト、脆いテスト、スローテスト • Testing Trophyだけでは解決できなさそう 新しい指標が必要 

Googleのテストサイズ Feature Small Medium Large Network access No localhost only Yes Database No Yes Yes File system access No Yes Yes Use external systems No Discouraged Yes Multiple threads No Yes Yes Sleep statements No Yes Yes System properties No Yes Yes Time limit (seconds) 60 300 900 https://testing.googleblog.com/2010/12/test-sizes.html 『Googleのソフトウェアエンジニアリング―持続可能なプログラミングを支える技術、文化、プロセス』 

Googleのテストサイズ 『Googleのソフトウェアエンジニアリング―持続可能なプログラミングを支える技術、文化、プロセス』より 

Feature Small Medium Large Network access No localhost only Yes Database No Yes Yes File system access No Yes Yes Use external systems No Discouraged Yes Multiple threads No Yes Yes Sleep statements No Yes Yes System properties No Yes Yes Time limit (seconds) 60 300 900 Googleのテストサイズ 安定 不安定 短い 長い テスト時間 安定性 https://testing.googleblog.com/2010/12/test-sizes.html 

3つのテスト手法 『単体テストの考え方/使い方 プロジェクトの持続可能な成長を実現するための戦略』 状態ベース・テスト 出力値ベース・テスト コミュニケーション・ベース・テスト 

フロントエンドの3つのテスト手法 出力値 状態 コミュニケーション 関数 (00% 0, /( UI  (00% 0, E2E  (00% 0, 壊れやすい 壊れにくい 

Test sizesとテスト手法 関数 UI E2E Small GOOD GOOD - Medium NG OK GOOD Large NG NG OK 

『Clean Architecture 達人に学ぶソフトウェアの構造と設計』 

『Clean Architecture 達人に学ぶソフトウェアの構造と設計』 “最上位レベルのディレクトリ構造と 最上位レベルのパッケージのソースファイルは、 「ヘルスケアシステム」「会計システム」「在庫管理システム」と叫んでいるだろうか？” 

叫ぶテストアーキテクチャ 

叫ぶテストアーキテクチャ small・UIテスト medium・UIテスト small・関数テスト large・E2Eテスト 

叫ぶテストアーキテクチャ vite.small.con fi g.ts 

叫ぶテストアーキテクチャ 個別に実行できる CI/CDのタイミングに応じて実行するテストをカスタマイズ 

まとめ • フロントエンドテストの課題：失敗しやすいテスト、脆いテスト、スローテスト • Test sizesとテスト手法によりテストを分類 • Test sizesごとにテストファイルを分離、分けて実行 関数 UI E2E Small GOOD GOOD - Medium NG OK GOOD Large NG NG OK