UIコンポーネントテストは単体テストと似ている面もありつつ、異なる点も存在する。両者の違いを明確にすることで更に理解を深めたい。
単体テストとは
『【この1冊でよくわかる】 ソフトウェアテストの教科書 [増補改訂 第２版]』1によると、単体テストは次のように説明されている。
単体テストとは、ソフトウェアの最小単位である「モジュール」ごとに行うテストです。主に詳細設計書どおりにモジュールが動くかどうかをテストし、コーディングされたソフトウェアの論理構造が適切かどうかを確認します。
フロントエンド領域の「モジュール」はビジネスロジックを処理するための関数やクラスになることが多い。例えば「APIレスポンスパラメータの結果をソートして画面にテーブルを描く」処理が求められているため、「①結果をソート」する関数を書いて「②テーブルを描く」処理に組み込んだとする。①の処理は『【この1冊でよくわかる】 ソフトウェアテストの教科書 [増補改訂 第２版]』の「モジュール」と言えるだろう。
単体テストは1つの処理に対応するテストと捉えるとわかりやすい。
両者の違い
UIコンポーネントテストは、これらの再利用可能なHTML要素（UIコンポーネント）が意図通りに実装されているかを検証するプログラムである。よって、両者には次のような違いが見られる。
| - | 単体テスト | UIコンポーネントテスト |
|---|---|---|
| テスト対象の処理の単位 | 単一 | 単一または複数 |
| 何をテストするか | 入力に対する出力結果 | DOMのレンダリング結果やイベントの状態 |
| 状況の再現方法 | 入力を与える | 初期状態やユーザー操作の再現など |
テスト対象の処理の単位
単体テストは「モジュール」ごとに行うため、テスト対象は単一の範囲となる。 一方UIコンポーネントテストは一つのUIコンポーネントの挙動をテスト対象にすることもあれば、複数のUIコンポーネント同士を組み合わせた場合の挙動を確かめることもある。 よって、単一または複数の対象をテストする。
UIコンポーネントテストの方が範囲が広い、と考えるとわかりやすいかもしれない。
何をテストするか
単体テストは関数やクラスの入力（引数やコンストラクター）に対する出力結果をテストする。入力を作るためにモックを使うことはある。しかし、入力に対する出力をテストする点は同じである。 一方、UIコンポーネントテストは入力内容・出力内容が多岐にわたる。
- ユーザーのマウス操作に応じてUIコンポーネントの見た目が変化するか
- 初期状態（props）の与え方に対応して操作できる状態が変わるか
- データの取得完了までは別のUIコンポーネントが表示されているか
UIコンポーネントテストでは特定の状況や状態のとき、UIコンポーネントの状態が意図通りになっているかを確かめる、と捉えると良い。
状況の再現方法
単体テストで特定の状況を再現するためには、テスト対象の入力を正しく設定すれば良い。しかし、UIコンポーネントテストでは「特定の状況を再現」する必要がある。 それはユーザー操作＝ブラウザ上で発火したイベントであったり、初期状態（props）であったりする。
仕様のパターン化ができていないとテストが書けない。これは単体テスト・UIコンポーネントテスト共通である。追加でUIコンポーネントテストは状況を作り出しているのは誰かを意識してパターンを出す必要がある。
