2023/10/25 CTOA若手エンジニアコミュニティ 勉強会 #4
フロントエンドにおけるテスト方針やじはむ@yajihum2023/10/25@CTOA若手エンジニアコミュニティ 勉強会 #4〜Testing Trophyの概念とBDD〜
View Slide
@yajihum@yajihumhttps://yajium.dayやじはむ自己紹介↑ロリス@COMPASSFront-end Engineer 社会人2年目
フロントエンドのテスト、何を意識して書いてますか?突然ですが...そもそも、ただ書くのではなく、何かを意識しながら書けていますか?
BDDTesting 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 の 作 者 で あ る KentC.Doddsは、Integrationテストに最もコストをかけるべきだと言っている
なぜIntegrationテストか?Testing Trophyの図参照:https://testingjavascript.com/コンポーネントだけで成立する機能はほとんどないフロントエンドにおいて、単体のIntegrationテストが一番効果とコストのバランスが取れているソフトウェアが正しく動くことを保証する効果が薄いのに単体テストを多く書くことは最適ではない
Testing Trophyのテスト方針とBDDIntegrationテストを多く書くことが大切なのはわかったが、具体的に何をどう書いていけばいいか?⭐️実装の詳細をテストしないことが大切
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 のテスト方針テストピラミッド~自動テストの信頼性を中長期的に保つ最適なバランス~フロントエンド開発のためのテスト入門 今からでも知っておきたい自動テスト戦略の必須知識