【入門編】 React Testing Libraryを用いたPropsの検証 – React実践ガイド

こんにちは！Reactの学習、楽しく進められていますか？
「コンポーネントを作ったはいいけれど、ちゃんとProps（プロパティ）が正しく画面に反映されているか、どうやって確かめればいいんだろう……？」
そんな風に悩んで、ブラウザで何度も画面をリロードしながら確認していませんか？

大丈夫ですよ、その悩みは誰もが最初に通る温かい第一歩です。

今回は、Reactのテストの定番ツールである「React Testing Library（RTL）」を使って、コンポーネントが「親から渡された大事な荷物（Props）」をきちんと受け取って、正しく画面に表示できているかをテストする方法を、一緒に優しく紐解いていきましょう！

—

Propsの検証って、たとえると「お買い物の検品」なんです

いきなり難しいテストコードを見る前に、ちょっと身近な例え話をさせてくださいね。

あなたは今、おもちゃ屋さんの店員さんだと想像してください。
お客さん（＝親コンポーネント）から、「『ロボット』という名前で、色は『赤』のオモチャを陳列して！」という注文書（＝Props）を受け取りました。

あなたがやるべきことは何でしょうか？
1. 棚にちゃんと「ロボット」という名前の札が出ているか？
2. タグの色はちゃんと「赤」になっているか？

これをご自身の目で確かめますよね。React Testing Libraryを使ったPropsの検証も、これとまったく同じです。
「親から渡されたデータが、画面のどこに、どうやって形になって現れているか」を、テストの目でこっそりチェックしてあげる作業なんですよ。

—

今回の主役：検証するコンポーネントを作ってみよう

まずは、テストの対象となる小さなコンポーネントを用意しましょう。
今回は、ユーザーの名前と、その人が「管理者かどうか」を受け取って表示するシンプルなプロフィールカードです。

// UserCard.tsx
import React from ‘react’;

// TypeScriptでPropsの型をしっかり定義します（これめっちゃ大事！）
type UserCardProps = {
name: string;
isAdmin: boolean;
};

export const UserCard: React.FC = ({ name, isAdmin }) => {
return (

{/ ユーザーの名前を表示する /}

Propsの検証って、たとえると「お買い物の検品」なんです
今回の主役：検証するコンポーネントを作ってみよう

{name} さんのプロフィール

{name} さんのプロフィール

{/ 管理者かどうかに応じて、テキストを切り替える /}
{isAdmin ? (

権限：管理者です

) : (

権限：一般ユーザーです

)}

);
};

このコンポーネントには、`name` と `isAdmin` という2つのPropsがあります。
「`name` に “太郎” を渡したら、画面に “太郎さんのプロフィール” って出るかな？」
「`isAdmin` に `true` を渡したら、”管理者です” って文字がちゃんで見つかるかな？」

これをテストで自動確認できるようにしていきましょう！

—

React Testing LibraryでPropsを検証する

それではいよいよ、テストコードの登場です。
初心者の方が迷いがちな `getByRole` や `queryByText` といった便利ツール（クエリと呼びます）を実際にどう使うのか、見ていきましょう。

// UserCard.test.tsx
import React from ‘react’;
import { render, screen } from ‘@testing-library/react’;
import { UserCard } from ‘./UserCard’;

describe(‘UserCardコンポーネントのProps検証’, () => {

// テストケース1: 一般ユーザーのデータが正しく表示されるか？
test(‘一般ユーザーの名称と権限が正しく画面に現れること’, () => {
// 1. 【準備】コンポーネントにPropsを渡してレンダリング（画面に描画）する
render();

// 2. 【検証】名前（見出し）が期待通りに表示されているかチェック
// getByRoleを使うことで、「h2という見出しロールを持ち、かつ『花子さんのプロフィール』というテキストを持つ要素」を探します
const headingElement = screen.getByRole(‘heading’, { name: ‘花子さんのプロフィール’ });
expect(headingElement).toBeInTheDocument(); // 画面に存在しているか？

// 3. 【検証】一般ユーザー用のテキストが表示されているかチェック
// getByTextは、指定したテキストが画面内にあるかを探してくれます
const roleText = screen.getByText(‘権限：一般ユーザーです’);
expect(roleText).toBeInTheDocument();
});

// テストケース2: 管理者のデータが正しく表示されるか？
test(‘管理者の場合は、管理者用の権限テキストが表示されること’, () => {
// 今度は別のProps（isAdmin = true）を渡してみます
render();

// 名前の確認
expect(screen.getByRole(‘heading’, { name: ‘太郎さんのプロフィール’ })).toBeInTheDocument();

// 管理者用のテキストが表示されていることを確認
const adminText = screen.getByText(‘権限：管理者です’);
expect(adminText).toBeInTheDocument();
});

});

—

ここがつまずきやすいポイント！知っておくと安心のコツ

1. `getByRole` ってなんだか難しそう……

最初は戸惑うかもしれませんが、React Testing Libraryの `getByRole` は、「実際のユーザーが画面を見るときに認識しやすいアクセシビリティの基準」をもとに要素を探してくれる、とっても優秀で優しい子です。
「ボタン」「見出し」「リンク」などを、人間と同じような感覚で見つけてくれます。迷ったらまずは `screen.getByRole` を頼ってみてください。

2. `getBy` と `queryBy` の違いって？

`getBy…` : 「そこにあるはず！」という要素を探します。もし見つからなければ、テストは即座にエラーになります（石橋を叩いて渡る用）。
`queryBy…` : 「もしかしたら、ないかもしれない」要素を探します。もし見つからなくてもエラーにならず、単に `null` を返してくれます（「管理者じゃない時は、この文字が表示されて“いない”こと」を確認したい時に大活躍します！）。

—

さいごに

いかがでしたでしょうか？
「Propsの検証」と聞くと、なんだか難解な数式を解くような身構えをしてしまいがちですが、やっていることは実にシンプル。
「このデータを渡したら、画面のこの場所にこれが映るはず！」というお約束を、コードを通じてそっと確認してあげているだけなんです。

最初は思い通りにテストが通らなくて、赤文字のエラー画面にドキッとしてしまうこともあるかもしれませんが、それもエンジニアがみんな通る楽しい道です。
「あ、今はデータがうまく伝わってなかったんだな、よしよし直してあげよう」と、コンポーネントと対話するような気持ちで、テストライフを楽しんでくださいね。

あなたのReactの旅を、心から応援しています！