フロントエンドのテストコード何を書くか

フロントエンドのテストコード何を書くか梅田LT @www_yto

自己紹介 @www_yto(watanabe yuito) フロントエンドエンジニア SaaS の開発 React, Next.js, TypeScript フロントエンドのテストコード何を書くか
@www_yto

話したいことフロントエンドのテスト不要説テストの対象/レベル/種類どこに張るかフロントエンドのテストコード何を書くか @www_yto

フロントエンドのテスト不要説フロントエンドのテストコード何を書くか @www_yto

テスト不要の考えフロントエンドはクリーンアーキテクチャで言う所の一番外側ドメインがないテスト対象(≒ ドメイン)が存在しない/ROI が低いフロントエンドのテスト不要説 @www_yto

テストはドメインに対して書きたいフロントエンドにはドメインがないフロントエンドのテスト不要説 @www_yto

ドメインとは知識、影響力、または活動の領域。ユーザーがプログラムを適用する対象エリアは、ソフトウェアのドメインである。 A sphere of knowledge, influence, or activity.
The subject area to which the user applies a program is the domain of the software. —Eric Evans フロントエンドのテスト不要説 @www_yto

> ユーザーがプログラムを適用する対象エリアユーザーがブラウザ上で操作する UI ユーザーが入力するフォームやデータユーザーが発生させるイベントやアクションユーザーが経験する画面遷移と情報表示の流れフロントエンドのテスト不要説 @www_yto

フロントエンドにはドメインがない UI 操作フローのデザイン表示状態の遷移フロントエンドのテスト不要説 @www_yto

フロントエンドのドメインユーザーの操作と状態管理 WEB フロントエンドにおけるソフトウェア設計の考察フロントエンドのテスト不要説 @www_yto

フロントエンドのドメイン ui = f(state) フロントエンドのテスト不要説 @www_yto

ドメインに対してテストを書きたい! 何を? どこに? どのレベルで? フロントエンドのテスト不要説 @www_yto

テストの対象/レベル/種類 @www_yto

テストの対象 1. ライブラリが提供する関数 2. ロジックを担う関数 3. UI を表現する関数 4. Web
API クライアント 5. API サーバー 6. DB サーバーテストの対象/レベル/種類 @www_yto

テスト種類 1. 機能テスト 2. 非機能テスト 3. ホワイトボックステスト 4. リグレッションテストテストの対象/レベル/種類
@www_yto

テストレベル 1. 静的テスト(Static) typo や型エラー 2. ユニットテスト(Unit) 依存関係を持たない 3. 結合テスト(Integration)
複数の unit を統合。(できるだけモックを使用しない) 4. E2E テスト(End to End) モックを使用しないテストの対象/レベル/種類 @www_yto

トレードオフ壊れやすさ速さ信頼性テストの対象/レベル/種類 @www_yto

どこに張るか @www_yto

(再掲)フロントエンドのドメインユーザーの操作と状態管理 WEB フロントエンドにおけるソフトウェア設計の考察どこに張るか @www_yto

静的テストドメインのテストはできない単体テスト適切に呼び出されているかわからない https://x.com/erinfranmc/status/1 148986961207730176?s=20 E2E テスト壊れやすい
どこに張るか @www_yto

統合テストユーザー操作(ユースケース)を網羅できるテスティングトロフィー https://www.testingjavascript.co m/ どこに張るか @www_yto

統合テスト例 1. セレクトボックスの操作する 2. URL の検索クエリが変化する 3. 検索クエリの変化により、データ取得 API が呼ばれる
4. 一覧表示内容が更新されるどこに張るか @www_yto

まとめフロントエンドにもドメインはあるユーザーの操作状態管理統合テストを厚く書くユーザー操作を網羅信頼性,スピード,コストのトレードオフのバランスが良いフロントエンドのテストコード何を書くか @www_yto

参考 WEB フロントエンドにおけるソフトウェア設計の考察フロントエンドアプリケーションの静的、単体、結合、E2E テスト Write tests. Not too many.
Mostly integration. Clean Architecture フロントエンド開発のためのテスト入門今からでも知っておきたい自動テスト戦略の必須知識フロントエンドのテストコード何を書くか @www_yto

フロントエンドのテストコード何を書くか

フロントエンドのテストコード何を書くか

Watanabe Yuito

More Decks by Watanabe Yuito

Other Decks in Technology

Featured

Transcript