普段何気なく書いているUIコンポーネントテストについてまとめた。
UIコンポーネントテストは、「UIコンポーネント」の動作を自動的にテストするプロセスである。「UIコンポーネント」について、Reactの公式ドキュメント1では以下のように説明されている。
React lets you combine your markup, CSS, and JavaScript into custom “components”, reusable UI elements for your app.
Vue.js（v3）の公式ドキュメント2では次のように説明されている。
Components allow us to split the UI into independent and reusable pieces, and think about each piece in isolation.
まとめると、UIコンポーネントとはアプリケーション内でHTML要素を再利用可能なパーツとして切り出すことだ。つまり、UIコンポーネントテストはこれらの再利用可能なHTML要素が意図通りに実装されているかを検証するプログラムであると言える。
コンポーネントテストの範囲は広く、以下のような要素を含む。
- レンダリング結果
- イベントを検知した後の動作
- 状態に応じた制御
例えば、「レンダリング結果のテスト」ではコンポーネントのpropsに応じたDOMの描画が正しく行われているかを確認する。また、「イベントを検知した後のテスト」では、ユーザーの操作によって引き起こされるイベント（クリックやホバーなど）が正しく処理されるかをテストする。
さらに、「状態に応じた制御のテスト」では、複数のコンポーネントが連動している場合や、状態管理ライブラリと連携した動作を検証する。このようなテストには、Recoil3やPinia4などのライブラリが使用されることがある。
これらのテストは、UIコンポーネントの状態をセットアップする専用のライブラリ（例: Testing Library、Vue Test Utils）や、ブラウザの動作を再現するライブラリ（例: jsdom）、テストライブラリ（例: Jest）と組み合わせて実施される。
- Reactの公式ドキュメント↩
- Vue.jsの公式ドキュメント↩
- RecoilはReact用の状態管理ライブラリである。↩
- PiniaはVue用の状態管理ライブラリである。以前はVuexがメインの選択肢であったが、Piniaに移行する動きがある。Vuexは現在もメンテナンスされているが、将来的にはVue 3.xのようにEnd Of Life（EOL）となる可能性がある。↩
