はじめに
アプリを作った後はしっかり動作するかを確認するためにテストを書くことが重要です。本記事では、Jest と React Testing Library を使って、テストのアイデアをどのように組み立てるかを初心者目線で解説します。
前提とする環境
本記事の内容は、以下の環境を前提としています。
- Node.js 18 以上（
node -vでバージョン確認） - npm または yarn を使用（
npm -v/yarn -vでバージョン確認） - React 18 以上（
package.jsonのreactのバージョンを確認） - Vite を利用した React プロジェクト
- Jest と React Testing Library を使用したテスト環境
テスト環境の準備
まず、必要なライブラリをインストールします。
npm install --save-dev jest @testing-library/react @testing-library/jest-dom
次に、package.json に以下を追加して、テストコマンドを実行できるようにします。
"scripts": {
"test": "jest"
}
基本的なテストの流れ
テストを書くときは、以下の流れで考えると分かりやすくなります。
「何をテストするか？」を決める
まず、テスト対象のコンポーネントで「正しく動いてほしい機能」をリストアップします。
(例)
- タイトルが表示されているか
- 入力欄に文字を入れて、登録ボタンを押すとデータが追加されるか
- 削除ボタンを押すとリストからデータが消えるか
- 入力なしで登録ボタンを押したときにエラーが表示されるか
「どうやってテストするか」を考える
Jest と React Testing Library を使って、どのようにテストするかを考えます。
| 目的 | 使用する関数 | 提供元 |
|---|---|---|
| コンポーネントを表示する | render(<App />) |
React Testing Library |
| 画面から要素を取得する |
screen.getByText() / screen.getByTestId()
|
React Testing Library |
| ボタンをクリックする | fireEvent.click(button) |
React Testing Library |
| 期待する動作を確認する | expect(...).toBeInTheDocument() |
Jest |
テストコードを書く
例えば、「タイトルが表示されているか」をテストする場合、以下のコードになります。
📂 tests/App.test.jsx
import React from "react";
import { render, screen } from "@testing-library/react";
import "@testing-library/jest-dom";
import App from "../src/App";
describe("タイトル表示のテスト", () => {
it("タイトルが 学習記録 であること", () => {
render(<App />);
const title = screen.getByText("学習記録");
expect(title).toBeInTheDocument();
});
});
テストを実行する
ターミナルで以下を実行すると、テストが実行されます。
npm test
テストが成功すると PASS と表示され、失敗すると FAIL となります。
まとめ
- Jest は「期待する動作になっているか？」を確認するためのツール
- React Testing Library は「React コンポーネントの動作をテストするツール」
- テストを書くときは、「何をテストするか？」→「どうやってテストするか？」→「コードを書く」→「実行する」の流れで考える