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

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

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

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

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

E2Eテスト End to Endの略ヘッドレスブラウザ+UIオートメーションで実施するテストのこと Integration(結合)テストコンポーネント間の相互作用をテストするもの単体テストより単位が大きく広くカバーする Unit(単体)テストコンポーネント単体をテストするもの
コーナーケースの検証の向いている静的解析 TypeScriptやESLintなどによる静的解析前提として、テストの種類には以下の4つがある

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

最適化の答えの一つ Testing Trophyの考え方 Testing Trophyの図参照：https://testingjavascript.com/ Testing Library の作
者である Kent C.Doddsは、 Integrationテストに最もコストをかけるべきだと言っている

なぜInteg rationテストか？ Testing Trophyの図参照：https://testingjavascript.com/ コンポーネントだけで成立する機能はほとんどないフロントエンドにおいて、単体の Integrationテストが一番効果とコストのバランスが取れている
ソフトウェアが正しく動くことを保証する効果が薄いのに単体テストを多く書くことは最適ではない

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

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

Testing Torphyのテスト方針とBDD なぜ実装の詳細を書いてはいけないのか？ False Negative 壊れるべきでないときに壊れてしまうユーザーの振る舞いを変えずに実装の詳細だけを変更（リファクタリング）するときに、実装の詳細を書いたテストは当然壊れる False Positive
壊れるべきときに壊れない実装の詳細のテストは粒度が小さいため、コンポーネント間の連携などの挙動を担保できないテストは通っているのに、アプリ全体の挙動は壊れているなどに繋がる

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

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

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

参考【フロントエンド】コンポーネント指向 React / Vue のテスト方針テストピラミッド～自動テストの信頼性を中長期的に保つ最適なバランス～フロントエンド開発のためのテスト入門
今からでも知っておきたい自動テスト戦略の必須知識

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

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

やじはむ

More Decks by やじはむ

Other Decks in Technology

Featured

Transcript

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

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

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

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

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

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

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

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

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

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

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

More Decks by やじはむ

Other Decks in Technology

Featured

Transcript

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

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