先生と生徒の会話形式で理解しよう

生徒

「Reactって、ちゃんと動いているかどうかは目で見れば分かるんじゃないんですか？」

先生

「小さい画面ならそれでも大丈夫ですが、機能が増えると見落としが増えます。そこでテストが役立ちます。」

生徒

「TypeScriptを使っていると、テストも型を意識する必要があるんですか？」

先生

「はい。PropsやStateを型安全にテストすると、間違いに早く気づけて安心して修正できますよ。」

1. Reactにおけるテストとは何か

Reactのテストとは、「このコンポーネントが想定どおりに動くか」を機械に確認してもらう作業です。ボタンを押したら文字が変わるか、正しいPropsを渡したら正しく表示されるか、などをチェックします。

人が毎回クリックして確認するのは大変ですが、テストを書いておくと、あとからコードを直したときでも自動で確認できます。

TypeScriptを使っている場合は、テストでも型が守られているかを確認できます。これにより、「間違ったPropsを渡してしまう」「Stateの扱いを間違える」といったミスを減らせます。

2. 型安全なテストが初心者にやさしい理由

テストと聞くと難しそうに感じますが、型安全なテストは初心者にこそ向いています。理由は、「正しい使い方」を型が教えてくれるからです。

PropsやStateに型が付いていると、テストコードを書くときにも「何を渡せばいいか」が分かります。間違った値を渡そうとすると、エディタやTypeScriptが教えてくれます。

例え：テストは完成した料理の味見、型はレシピです。レシピがあれば、間違った材料を使わずに済みます。

3. Propsを型安全にテストする基本

まずはPropsを受け取るシンプルなコンポーネントを考えます。表示用のメッセージをPropsで受け取るケースです。


type MessageProps = {
  text: string;
};

function Message(props: MessageProps) {
  return <p>{props.text}</p>;
}

このコンポーネントをテストするとき、正しいPropsを渡しているかが重要です。型があることで、テストコードでも「textは文字列でなければならない」と分かります。

型安全なテストでは、「Propsに正しい値を渡したとき、画面がどうなるか」を確認します。

4. 間違ったPropsを防ぐというテストの役割

TypeScriptを使っていると、テストコードでも間違ったPropsは書けません。たとえば、文字列の代わりに数字を渡そうとするとエラーになります。

これは、「実行する前に失敗に気づける」という大きなメリットです。テストは「正しく動くか」だけでなく、「間違った使い方をしていないか」を確認する役割も持っています。

初心者にとっては、「型エラーが出たら直す」という流れが、そのまま正しいテストの書き方につながります。

5. Stateを使うコンポーネントのテストの考え方

次に、Stateを使うコンポーネントを考えます。Stateは画面の中で変わる値なので、「初期状態」と「変化後」を意識してテストします。


import React, { useState } from "react";

function Counter() {
  const [count, setCount] = useState<number>(0);

  return (
    <div>
      <p>{count}</p>
      <button onClick={() => setCount(count + 1)}>増やす</button>
    </div>
  );
}

この場合、テストでは「最初は0が表示されているか」「ボタンを押すと1になるか」を確認します。

Stateに型が付いていることで、countが数字であることが保証され、テストも安心して書けます。

6. PropsとStateを組み合わせたテストの視点

実際のReactアプリでは、PropsとStateが組み合わさることが多くあります。たとえば、Propsで初期値を受け取り、それをStateとして管理するケースです。

この場合、テストでは次の点を確認します。

正しいPropsを渡したときに初期Stateが正しくなるか
Stateが変わったときに表示が変わるか

型安全にしておくと、PropsとStateのつながりが分かりやすくなり、テストの内容も整理しやすくなります。

7. テストコードでも型が守ってくれること

TypeScriptを使ったReactでは、テストコードもTypeScriptで書くことが一般的です。そのため、コンポーネントと同じ型情報を使えます。

これは、「本番コードとテストコードのズレ」を防ぐ効果があります。Propsの型を変えたら、テスト側もエラーになるので、修正忘れに気づけます。

結果として、テストは「動作確認」だけでなく、「型の整合性チェック」としても働きます。

8. 初心者が意識したいテストの粒度

初心者の場合、すべてを細かくテストしようとすると大変です。まずは次のようなポイントに絞ると続けやすくなります。

Propsを渡したら正しく表示されるか
Stateの初期値が正しいか
ユーザー操作でStateが変わるか

これらは画面の基本動作なので、型安全なテストとの相性がとても良いです。

9. 型安全なテストがリファクタリングを助ける

テストがある状態でコードを書き直すと、「どこを直したら壊れるか」がすぐ分かります。これを安心してリファクタリングできると言います。

型安全なPropsとState、そして型安全なテストがそろっていると、Reactのコードはとても壊れにくくなります。

初心者にとっては、「直したら動かなくなった」という不安を減らせるのが大きなメリットです。

10. PropsとStateを型安全にテストするという考え方

PropsとStateを型安全にテストするとは、「正しい使い方だけができる状態で、動作を確認する」ことです。

型はルール、テストは確認作業です。この2つを組み合わせることで、Reactのアプリは初心者でも安心して成長させられます。

最初は難しく感じるかもしれませんが、「Propsを渡して表示を見る」「Stateが変わるかを見る」という基本だけでも、十分に価値のあるテストになります。

Reactで学ぶPropsとStateを型安全にテストする方法！初心者でも安心できるテストの考え方