Upgrade to Pro — share decks privately, control downloads, hide ads and more …

フロントエンドにおける テスト方針〜Testing Trophyの概念とBDD〜

Avatar for やじはむ やじはむ
October 25, 2023
Technology
2
7.3k

フロントエンドにおける テスト方針〜Testing Trophyの概念とBDD〜

2023/10/25 CTOA若手エンジニアコミュニティ 勉強会 #4

Avatar for やじはむ

やじはむ

October 25, 2023
Tweet

More Decks by やじはむ

See All by やじはむ
TypeScriptのパフォーマンス改善
Avatar for やじはむ yajihum
21
9.9k
アクセシビリティを考慮したUI/CSSフレームワーク・ライブラリ選定
Avatar for やじはむ yajihum
3
2.3k

Other Decks in Technology

See All in Technology
AI時代だからこそ考える、僕らが本当につくりたいスクラムチーム / A Scrum Team we really want to create in this AI era
Avatar for TAKAKING22 takaking22
6
2.8k
ユニットテストに対する考え方の変遷 / Everyone should watch his live coding
Avatar for mdstoy mdstoy
0
110
SoccerNet GSRの紹介と技術応用：選手視点映像を提供するサッカー作戦盤ツール
Avatar for MIXI ENGINEERS mixi_engineers
PRO
1
160
Azure SynapseからAzure Databricksへ 移行してわかった新時代のコスト問題！？
Avatar for Databricks Japan databricksjapan
0
120
ZOZOのAI活用実践〜社内基盤からサービス応用まで〜
Avatar for ZOZO Developers zozotech
PRO
0
140
"複雑なデータ処理 × 静的サイト" を両立させる、楽をするRails運用 / A low-effort Rails workflow that combines “Complex Data Processing × Static Sites”
Avatar for hogelog hogelog
3
1.7k
AIが書いたコードをAIが検証する！自律的なモバイルアプリ開発の実現
Avatar for henteko henteko
1
290
バイブコーディングと継続的デプロイメント
Avatar for nwiizo nwiizo
2
380
履歴 on Rails: Bitemporal Data Modelで実現する履歴管理/history-on-rails-with-bitemporal-data-model
Avatar for hypermkt hypermkt
0
2k
成長自己責任時代のあるきかた/How to navigate the era of personal responsibility for growth
Avatar for Hiromu Shioya kwappa
3
220
それでも私はContextに値を詰めたい | Go Conference 2025 / go conference 2025 fill context
Avatar for Yoichiro Shimizu budougumi0617
4
1.1k
Optuna DashboardにおけるPLaMo2連携機能の紹介 / PFN LLM セミナー
Avatar for Preferred Networks pfn
PRO
1
820

Featured

See All Featured
Making Projects Easy
Avatar for Brett Harned brettharned
118
6.4k
Building Applications with DynamoDB
Avatar for Matt Wood mza
96
6.6k
Intergalactic Javascript Robots from Outer Space
Avatar for Vicent Martí tanoku
273
27k
Building Adaptive Systems
Avatar for Chris Keathley keathley
43
2.8k
Principles of Awesome APIs and How to Build Them.
Avatar for Keavy McMinn keavy
127
17k
jQuery: Nuts, Bolts and Bling
Avatar for Doug Neiner dougneiner
64
7.9k
Unsuck your backbone
Avatar for Amy Palamountain ammeep
671
58k
Balancing Empowerment & Direction
Avatar for Lara Hogan lara
4
670
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
Avatar for Rebecca Miller-Webster rmw
35
3.2k
Fantastic passwords and where to find them - at NoRuKo
Avatar for Phil Nash philnash
52
3.4k
[RailsConf 2023 Opening Keynote] The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
30
9.7k
Practical Tips for Bootstrapping Information Extraction Pipelines
Avatar for Matthew Honnibal honnibal
PRO
23
1.5k

Transcript

  1. フロントエンドにおける テスト方針 やじはむ @yajihum 2023/10/25 @CTOA若手エンジニアコミュニティ 勉強会 #4 〜Testing Trophyの概念とBDD〜

  2. @yajihum @yajihum https://yajium.day やじはむ 自己紹介 ↑ロリス @COMPASS Front-end Engineer 社会人2年目

  3. フロントエンドのテスト、 何を意識して書いてますか？ 突然ですが... そもそも、ただ書くのではなく、何かを意識しながら書けていますか？

  4. BDD Testing Trophy 弊社では最近、以下を意識してテストを書いている

  5. E2Eテスト End to Endの略 ヘッドレスブラウザ+UIオートメーションで実施するテストのこと Integration(結合)テスト コンポーネント間の相互作用をテストするもの 単体テストより単位が大きく広くカバーする Unit(単体)テスト コンポーネント単体をテストするもの

    コーナーケースの検証の向いている 静的解析 TypeScriptやESLintなどによる静的解析 前提として、テストの種類には以下の4つがある

  6. どの範囲のテストにどれくらいのコストをかけるか テストピラミッドの図 参照：https://gihyo.jp/dev/serial/01/savanna-letter/0005 テストピラミッドは、 Unitテストの比率が一番高くな るようにしている フロントエンドのテストにおいて 本当に効果的か？

  7. 最適化の答えの一つ Testing Trophyの考え方 Testing Trophyの図 参照：https://testingjavascript.com/ Testing Library の 作

    者 で あ る Kent C.Doddsは、 Integrationテスト に最もコストをかけるべきだと 言っている

  8. なぜInteg rationテストか？ Testing Trophyの図 参照：https://testingjavascript.com/ コンポーネントだけで成立する機能は ほとんどない フロントエンドにおいて、単体の Integrationテストが一番 効果とコストのバランスが取れている

    ソフトウェアが正しく動くことを 保証する効果が薄いのに単体テストを多 く書くことは最適ではない

  9. Testing Trophyのテスト方針とBDD Integrationテストを多く書くことが大切なのはわかったが、 具体的に何をどう書いていけばいいか？ ⭐️実装の詳細をテストしないことが大切

  10. Testing Trophyのテスト方針とBDD 実装の詳細とは？ →簡単に言うと、「ユーザーから見えないもの」のこと 例えば、以下の2つの対比がある ユーザーから見えないもの コンポーネント内で使用している関数 ステートなど ユーザーから見えるもの ボタンや表示されているテキスト

    UI部分全般

  11. Testing Torphyのテスト方針とBDD なぜ実装の詳細を書いてはいけないのか？ False Negative 壊れるべきでないときに壊れてしまう ユーザーの振る舞いを変えずに実装の詳細だけを変更（リファクタリン グ）するときに、実装の詳細を書いたテストは当然壊れる False Positive

    壊れるべきときに壊れない 実装の詳細のテストは粒度が小さいため、コンポーネント間の連携などの 挙動を担保できない テストは通っているのに、アプリ全体の挙動は壊れているなどに繋がる

  12. Testing Torphyのテスト方針とBDD ユーザーから見えるものをテストする つまりBDDをするということ！ BDD：Behavior-Driven Development（振る舞い駆動開発） 「ユーザーがこれをするとこうなる」という粒度（抽象度）でテストを書くこと になるので、ユースケース単位のコンポーネント間の連携テストが書きやすい

  13. まとめ Testing Trophyの概念とは、各テストの効果とコストを 考えた上で、一番効果的なIntegrationテストをたくさん 書こうというもの Testing Trophyの概念に沿ったテストの書き方として、 「実装の詳細を書かない」ことが大切 「実装の詳細を書かない」→「ユーザーから見えるものを テストする」にはBDDをしよう！

  14. ご清聴 ありがとうございました！

  15. 参考 【フロントエンド】コンポーネント指向 React / Vue のテスト 方針 テストピラミッド～自動テストの信頼性を中長期的に保つ最適 なバランス～ フロントエンド開発のためのテスト入門

    今からでも知っておき たい自動テスト戦略の必須知識