React.js の テスト って、どんなものがあるのかな？
今回は、React.js アプリの自動テストライブラリ Jest・Vitest・React Testing Library について解説します。
React.js の環境構築がまだの場合は、下記より環境構築を行なってください。
React.js テスト Jest・Vitest・React Testing Library とは？
React.js アプリのテストでは、目的ごとに役割の違うツールを組み合わせて使います。
それぞれの役割は次のとおりになります。
| ツール | 役割 |
|---|---|
| Jest / Vitest | テストの実行 |
| React Testing Library | Reactコンポーネントをユーザー目線でテスト |
Jest / Vitest 比較表
Jest と Vitest は、どちらもテストを実行するためのツールで、Viteを使っている場合は、基本的に Vitest を選ぶとよりスムーズに導入できます。
また Vitest は、Jest 互換API を持っており、書き方がほぼ共通している ため、既存のJestコード をそのまま流用できるケースが多いです。
新規に Vite + React.js で開発する場合 は、Vitest がおすすめです。
既存の Next.js や Jest ベースのプロジェクト では、Jest を選ぶと開発がスムーズになります。
| 項目 | Jest | Vitest |
|---|---|---|
| 特徴 | 実績が豊富・情報が多い | 高速・Viteと相性が良い |
| 動作速度 | やや重い | かなり速い |
| 安定性 | 実績多数・枯れている | 比較的新しい（急成長中） |
| 設定の簡単さ | やや多め | シンプル |
| Vite対応 | 追加設定が必要 | 標準対応（そのまま使える） |
| TypeScript対応 | ts-jest など追加設定が必要 | 標準サポート（設定が簡単） |
| モック機能 | 豊富（jest.fn など） | ほぼ同等（vi.fn など） |
| Jest互換API | ー | あり（多くのAPIが互換） |
| エコシステム | 関連ライブラリが非常に豊富 | 主要ライブラリは対応済み |
| おすすめな人 | Next.js / 既存プロジェクト | Vite + React / 新規プロジェクト |
React Testing Library
React Testing Library は、React.js コンポーネントを実際に画面に表示しているかのようにテストできるライブラリです。
コンポーネントの状態や関数といった内部実装ではなく、画面に表示される内容やユーザーの操作を中心にテスト をするのが特徴です。
また React Testing Library は、あくまで ユーザー視点でのテストを重視 しており、実装の変更に強く、保守性や拡張性の高いテストをする ことを目的としています。
Vitest・React Testing Library のインストールと基本的な使い方
それでは、ここから実際に Vitest・React Testing Library を インストール したり、コンポーネントで利用する 基本的な流れを見ていきましょう。
Vitest・React Testing Library のインストール
Vitest・React Testing Library を インストール します
- –D → –save-dev の省略形で、パッケージは devDependencies（開発用依存） に追加される
- vitest → テストの実行・アサーション・モックなどを提供するテストフレームワーク
- @testing-library/react → Reactコンポーネントを「ユーザー視点」でテストするためのライブラリ
- @testing-library/user-event → 実際のユーザー操作を再現するシミュレーションライブラリ
- @testing-library/jest-dom → DOM（HTML要素）を直感的に確認できる matcher を expect に追加する拡張ライブラリ
- jsdom → Node.js上でDOMを仮想的に再現する環境ライブラリ
npm install -D vitest @testing-library/react @testing-library/user-event @testing-library/jest-dom jsdomVitest の設定
vite.config.js にテスト設定を追加します
// vite.config.js
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
export default defineConfig({
plugins: [react()],
test: {
globals: true, // describe / it / expect をimportなしで使える設定
environment: 'jsdom', // Node.js上にDOMを扱うために擬似ブラウザ環境を作る設定
setupFiles: './src/setupTests.js', // 事前設定ファイル
},
});
事前設定ファイルの作成
setupTests.js の 事前設定ファイル を作成する
// /src/setupTests.js
import '@testing-library/jest-dom';Vitest・React Testing Library の基本的な使い方
テストするコンポーネントの作成
ボタンをクリックすると、1つずつカウントアップされる Buttonコンポーネント を作成
// Button.jsx
import { useState } from "react";
export default function Button() {
const [count, setCount] = useState(0);
return (
<div>
<button onClick={() => setCount(count + 1)}>クリック</button>
<p>カウント: {count}</p>
</div>
);
}テストコードの作成
Vitest は デフォルトの設定 で、*.test.* と *.spec.* を 自動でテスト対象 にするため、test フォルダ配下に、Button.test.jsx で テストコードの作成
// src/test/Button.test.jsx
import { describe, it, expect } from 'vitest';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import Button from '../Button';
describe('Buttonコンポーネント', () => {
it('初期表示では「カウント: 0」と表示される', () => {
// ボタンコンポーネントを描画
render(<Button />);
// 「カウント: 0」と表示されていることを確認
expect(screen.getByText('カウント: 0')).toBeInTheDocument();
// DOMをコンソールに出力
screen.debug();
});
it('ボタンをクリックすると「カウント: 1」に増える', async () => {
// ボタンコンポーネントを描画
render(<Button />);
// ボタンの取得
const button = screen.getByText('クリック');
// ボタンをクリック
await userEvent.click(button);
// 「カウント: 1」と表示されていることを確認
expect(screen.getByText('カウント: 1')).toBeInTheDocument();
// DOMをコンソールに出力
screen.debug();
});
});| 処理 | 処理内容 |
|---|---|
render() | コンポーネントを画面に表示しているように描画 |
screen.getByText() | 画面上のテキストを取得 |
userEvent.click() | ユーザーがクリックした動作を再現 |
describe / it | テストのグループと個別テスト |
expect(...).toBeInTheDocument() | 要素が画面に表示されているかを確認 |
テストの実行
# Vitest を実行 ※自動で watch モード実行
npx vitest
# 1回だけ実行の場合
npx vitest run処理内容
- 対象のフォルダの場所で、「npx vitest run」のコマンドを入力し、実行
- DOMがコンソールに出力され、「クリック」、「カウント: 0」、「カウント: 1」が表示されていることを確認
- テストのグループ「Buttonコンポーネント」と個別テスト「初期表示では「カウント: 0」と表示される」、個別テスト「ボタンをクリックすると「カウント: 1」に増える」の表示と 検証がpassしている 事を確認
まとめ
React.js テスト について、Jest・Vitest・React Testing Library とあわせて解説してきましたが、いかがでしたでしょうか？
テストを実行するツールである Jest や Vitest と、 React.js コンポーネントを実際に画面に表示しているかのように確認できる React Testing Library を組み合わせることで、実装の変更に強く、保守性や拡張性の高いテスト ができるようになります。
まずは Vitest と React Testing Library の基本的な使い方をしっかり押さえ、小さな コンポーネント で試しながら、少しずつ 品質の高いコード で開発できるようになっていきましょう。
公式サイト
Vitest ※英語
コメント