Testing Trophyは叫ばない

フロントエンドカンファレンス北海道2025 の発表資料

Zennの記事: https://zenn.dev/toms74209200/articles/frontend-test-architecture

# 参考文献

- The Testing Trophy and Testing Classifications https://kentcdodds.com/blog/the-testing-trophy-and-testing-classifications
- 第2回　偽陽性と偽陰性 ～自動テストの信頼性をむしばむ現象を理解する～ | gihyo.jp https://gihyo.jp/dev/serial/01/savanna-letter/0002
- 第8回　脆いテスト ～継続的な変更と改善を阻むテストの原因と対策～ | gihyo.jp https://gihyo.jp/dev/serial/01/savanna-letter/0008
- 単体テストの考え方/使い方 プロジェクトの持続可能な成長を実現するための戦略, Vladimir Khorikov, 須田 智之, マイナビ出版, 2022 http://book.mynavi.jp/ec/products/detail/id=134252
- Googleのソフトウェアエンジニアリング―持続可能なプログラミングを支える技術、文化、プロセス, Titus Winters, Tom Manshreck, Hyrum Wright, 竹辺 靖昭, 久富木 隆一, オライリー・ジャパン, 2021 https://www.oreilly.co.jp/books/9784873119656/
- Clean Architecture　達人に学ぶソフトウェアの構造と設計, Robert C.Martin, 角 征典, 高木 正弘, ドワンゴ, 2018 https://asciidwango.jp/post/176293765750/clean-architecture

Transcript

1. Toms(@toms74209200) Testing Trophyは叫ばない フロントエンドカンファレンス北海道2025 2025-09-06
2. テスト書いてますか？
3. フロントエンドテストの普及 テストツールの充実
4. Testing Trophy https://x.com/kentcdodds/status/960723172591992832 🙅 🙆 『Googleのソフトウェアエンジニアリング―持続可能なプログラミングを支える技術、文化、プロセス』より
5. Testing Trophy • リソースには限りがあるよ • ユーザーの使い方に近いテストが意味のあるテストだよ • 統合テストが一番コスパがいいよ https://kentcdodds.com/blog/the-testing-trophy-and-testing-classi fi cations
6. 新たな課題 • 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
7. • 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通るまで休憩☕
8. • 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通るまで休憩☕ どうしてこうなった🤷
9. Testing Trophyだけでは解決できない問題がある • 「統合テスト」って？ • なんでもかんでも統合テストにしてない？ • 単体テストでも統合テストでも 脆いテストや信頼不能テストは生まれる ここはOK👌
10. Toms(@toms74209200) 株式会社アジェンダ（＠札幌） どんぐりはいいぞ whoami https://note.com/donguri_of fi cial/n/nc8ce1d339f09
11. ここまでのまとめ • テストつらい：信頼不能テスト、脆いテスト、スローテスト • Testing Trophyだけでは解決できなさそう 新しい指標が必要
12. 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のソフトウェアエンジニアリング―持続可能なプログラミングを支える技術、文化、プロセス』
13. Googleのテストサイズ 『Googleのソフトウェアエンジニアリング―持続可能なプログラミングを支える技術、文化、プロセス』より
14. 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
15. 3つのテスト手法 『単体テストの考え方/使い方 プロジェクトの持続可能な成長を実現するための戦略』 状態ベース・テスト 出力値ベース・テスト コミュニケーション・ベース・テスト
16. フロントエンドの3つのテスト手法 出力値 状態 コミュニケーション 関数 (00% 0, /( UI  (00% 0, E2E  (00% 0, 壊れやすい 壊れにくい
17. Test sizesとテスト手法 関数 UI E2E Small GOOD GOOD - Medium NG OK GOOD Large NG NG OK
18. 『Clean Architecture 達人に学ぶソフトウェアの構造と設計』
19. 『Clean Architecture 達人に学ぶソフトウェアの構造と設計』 “最上位レベルのディレクトリ構造と 最上位レベルのパッケージのソースファイルは、 「ヘルスケアシステム」「会計システム」「在庫管理システム」と叫んでいるだろうか？”
20. 叫ぶテストアーキテクチャ
21. 叫ぶテストアーキテクチャ small・UIテスト medium・UIテスト small・関数テスト large・E2Eテスト
22. 叫ぶテストアーキテクチャ vite.small.con fi g.ts
23. 叫ぶテストアーキテクチャ 個別に実行できる CI/CDのタイミングに応じて実行するテストをカスタマイズ
24. まとめ • フロントエンドテストの課題：失敗しやすいテスト、脆いテスト、スローテスト • Test sizesとテスト手法によりテストを分類 • Test sizesごとにテストファイルを分離、分けて実行 関数 UI E2E Small GOOD GOOD - Medium NG OK GOOD Large NG NG OK