🐷

フロントエンドテストの概要

2024/07/23に公開

この記事のゴール

フロントエンドの目的、テスト手法、戦略モデルを理解すること。

事業の信頼のため
事業に経済的な影響を及ぼすバグを含めてしまった場合、
信頼を取り戻すために時間と経済的な工数がかかる。
バグを含めてリリースをすると、サービスが利用できないだけではなく、
サービスに対するイメージが低下する。

健全なコードを維持するため
テストコードにより、リファクタリングをした際に既存のコードに不備がないか確認可能。

下記にフロントエンドテスト手法を示す。

バグの早期発見に繋がる。変数や関数の戻り値が期待通りであるかの検証に役に立つ。

テスト対象モジュールが、入力力期待する出力が得られるかに着目したテスト。

複数モジュールが連動する機能に着目したテスト。

UI テストに加え、外部ストレージや連携するサブシステムを含むテスト。

単体テスト、結合テスト、E2E テストのコスト配分が大切

手動テスト、E2E テストなど上層のテストが多く書かれたアンチパターン。
運用コストが高く稀に失敗する不安定なテストがよりコストを必要とする。

下層のテストを多く書くことで、安定した費用対効果の高いテストになると提唱している。
仮想のテストを充実させることで、安定かつ高速なテスト戦略となる。

最も比重を置くべきは結合テストであるという主旨のもの。
単体の UI コンポーネントで成立する機能はほとんどない。