PR：この記事にはアフィリエイトリンクが含まれます。
Reactのコンポーネントテストは、画面が表示されたら終わり、とはいきません。ボタンを押した後や通信を待った後まで確かめて、動作の変化を追います。始めたばかりの頃は、どこを試せばいいのか迷いますよね。
React Testing LibraryとVitestを使うと、フォーム入力やクリックなど、利用者が目にする動きをテストできます。本を読みながら環境づくりから非同期処理、モックまで順にたどると、全体の流れをつかみやすくなります。
3冊の早見表
3冊の特徴を表にまとめました。Reactのテストを日本語で学ぶ本、React 19の開発全体を扱う英語書、Testing Libraryに焦点を当てた英語書です。
| 書名 | 中心テーマ | 主な環境・内容 | 参考価格 |
|---|---|---|---|
 基本からしっかり学ぶフロントエンドテスト入門 | Reactのテスト全般 | React、TypeScript、Vite、Vitest | 3,080円（税込） |
 Full-Stack React, TypeScript, and Node 第2版 | React 19を含むフルスタック開発 | Vitest、React Testing Library、Node.js | 販売店で確認 |
 Simplify Testing with React Testing Library | RTLによるコンポーネントテスト | Jest、Create React App、API連携など | 販売店で確認 |
1冊目は日本語で環境構築から学べます。ほかの2冊は英語です。テストを集中的に学ぶか、アプリ開発の中で取り上げるかによって、読み進めやすさが変わります。
1冊目の定価は税込3,080円です。実売価格は時期や販売店で変わるので、購入時に確認してください。
テストの役割
コンポーネントテストでは、値を渡したときの表示やクリック後の画面の変化を確かめます。スクリーンショットでは見えにくい、操作への反応も試せるのが利点です。
たとえばフォームなら、値を入力して保存ボタンを押し、完了メッセージが表示されるかを確認します。内部の関数が何回呼ばれたかを調べ、画面に出る結果も見れば、変更後の動作を追えます。
ただし、テストを増やすだけで品質が上がるわけではありません。実装の細部に頼ると、利用者から見える動きは同じなのに、内部を整理しただけでテストが失敗することもあります。画面に現れる結果を確かめましょう。
部品内の表示や入力の分岐は、コンポーネントテストで確認できます。画面をまたいだ操作の流れはE2Eテストで試すなど、範囲を分けると役割が明確になります。
RTLの視点
React Testing Library（RTL）は、DOMに表示された内容やユーザー操作を通してコンポーネントをテストするライブラリーです。getByRoleでボタンや見出しを探せば、画面を使う人に近い視点で確かめられます。
「保存」という名前のボタンなら、getByRole('button', { name: '保存' })のように指定できます。CSSクラスや状態変数に頼らず、内部の実装を整理した後もテストを保ちやすい書き方です。
入力やクリックにはuserEventを使うと、利用者の操作に近い流れを再現できます。フォーム入力からバリデーション、送信後の表示まで試すことで、テストに動作の意図が表れます。
確かめたい内容を言葉にしておくのも効果的です。「入力が空ならエラーが見える」「成功後に完了表示が出る」。期待する結果が明確なら、テスト名と確認内容も自然につながります。
Vitestの守備範囲
Vitestはテストを実行するランナーです。ReactコンポーネントのテストにはRTLなどを組み合わせます。ブラウザーに近いDOMを用意するjsdomやTypeScriptの設定も必要で、最初は環境づくりで迷うことがあります。
依存先の関数を置き換える場面では、Vitestのvi.fnやvi.spyOnが役立ちます。vi.fnは呼び出しを記録する関数を作るもの。vi.spyOnは既存の関数を監視したり置き換えたりするときに使います。
通信や日時など、実行のたびに結果が変わる外部依存はモックで制御できます。成功と失敗の返答を切り替えれば、エラー表示も安定して確かめられます。ただし、モックが多すぎると実際の連携から離れてしまいます。
非同期処理は、クリック直後ではなく、処理後に画面が更新されるのを待って確認します。読み込み中、成功、失敗と状態を分けておけば、表示漏れや待ち時間の不具合にも気づきやすくなります。
日本語の基礎書
技術評論社の『エンジニア選書 基本からしっかり学ぶフロントエンドテスト入門』は、ReactとTypeScriptを使う人向けの一冊です。2026年6月発売、328ページ。サンプル環境にはViteを使い、Vitestの基本からコンポーネントテストまで扱います。
テスト環境の準備では、TypeScriptとjsdomを取り上げています。 カスタムHookの基本的なテストや非同期処理を含むテストも扱い、React開発で出会う場面を順に学べます。
コンポーネントの表示は、propsによる違いや非同期処理を含めて確認します。さらにuserEventによる操作、フォーム入力、バリデーションも登場。操作によって画面がどう変わるか、手を動かして追えます。
モックではvi.fnとvi.spyOn、外部依存の置き換えを扱います。PlaywrightやStorybookにも触れ、フロントエンドテスト全体を見渡せる内容です。日本語で順に学びたい初心者には、この本をおすすめします。
React19と全体開発
Packtの『Full-Stack React, TypeScript, and Node: Build scalable and cloud-ready web applications using modern React, TypeScript, and Docker, Second Edition』は、React 19を使ったフルスタック開発書です。英語で全626ページ。テストはアプリ制作の一部として扱われます。
テストの章では、Reactのクライアントサイドテストに加え、モックやChrome debuggerを取り上げます。VitestとReact Testing Libraryも登場。Reactアプリの開発とテストをまとめて学びたい人におすすめです。
本全体ではReactとTypeScriptのほか、Node.js、Express、PostgreSQL、Prismaなども扱います。バックエンドやデータベースを含めたアプリ構築が中心なので、テスト手法だけを深く学ぶ本とは役割が異なります。
英語の技術書を読みながら、626ページの実装を追える人に合う一冊です。コンポーネントテストの詳しい解説を優先する人には日本語の基礎書やRTL特化書を、アプリ全体を作る課題に取り組む人には本書をおすすめします。
RTLを深掘る英語書
『Simplify Testing with React Testing Library』は、RTLを使った保守しやすいテストが中心です。2021年刊、246ページ。例ではJest、jest-dom、Create React Appを使います。
fireEventやuser-eventによる操作テストのほか、API、Context API、Redux、GraphQL、Material-UIを使うコンポーネントも扱います。基本的な表示確認から外部連携を含む例まで、題材に幅があります。
TDDや既存テストのリファクタリング、CypressによるE2Eテストも収録しています。テストコードを書く方法と既存のテストを手入れする方法を、RTLを軸に学べます。こうした内容を求めるReact経験者におすすめです。
刊行は2021年で、中心となる例はJestとCreate React Appです。Vitestの設定や現在の構成を学ぶ用途ではなく、RTLの考え方を知る本として読むのが現実的。英語の本とこれらの環境に慣れているReact経験者におすすめします。
結論
ReactとVitestのコンポーネントテストを日本語で基礎から学ぶなら、『基本からしっかり学ぶフロントエンドテスト入門』をおすすめします。 ReactとTypeScriptの設定やjsdomの準備をはじめ、フォームや非同期処理、モックまで扱います。定価は税込3,080円で、実売価格は購入時に確認してください。
React 19のアプリ全体を英語で作りながらテストを学ぶ人には、Packtの第2版がおすすめです。RTLで保守しやすいテストやJest環境の例を掘り下げたい経験者には、『Simplify Testing with React Testing Library』をすすめます。
決め手は、学びたい範囲です。日本語のVitest入門なら技術評論社の本、フルスタック開発ならPacktの本、Testing Libraryの応用ならCrumpの本を選ぶと、読みたいテーマに沿って学習を始められます。
Amazon の PC をスコア化してみた
Amazonにある8〜14インチの小型WindowsタブレットやノートPCを、スペック別にスコア化して比較・ランキング。
