ReactJSテスト：ビギナーズガイド
こんにちは、未来のReact開発者さんたち！Reactテストの世界に陪你案内するのを嬉しく思っています。コンピュータサイエンスを多くの年間教えてきた者として、テストが優れた開発者を素晴らしい開発者に変えるのを見てきました。では、一緒にReactテストを解明しましょう！
テストの重要性
コードを書き始める前に、ちょっとした話をシェアします。ある学生が美しいReactアプリを作成したことがありました。見た目は完璧でしたが、デモ中にクラッシュしました。彼は困難な方法で学びました：見た目は騙されるが、テストは嘘をつきません。テストはバグを捕まえるだけでなく、信頼性もあります。テストがパスしたら、コードが意図した通りに動作することを安心して眠れるでしょう。
Create React App：テストの遊び場
環境の設定
まず、Create React Appを使って新しいReactアプリを作成しましょう。このツールは、テストが既に設定された準備okなReactプロジェクトをセットアップします。ターミナルを開いて以下のコマンドを入力してください：
npx create-react-app my-react-testing-app
cd my-react-testing-appおめでとうございます！あなたは刚刚初めてのReactアプリと一緒にビルトインのテスト機能を作成しました。まるでバッテリー付きの新しいおもちゃをもらったようなものです！
最初のテスト
Create React Appにはサンプルのテストファイルが含まれています。見てみましょう。src/App.test.jsを開いてください：
import { render, screen } from '@testing-library/react';
import App from './App';
test('learn reactリンクをレンダリングする', () => {
render(<App />);
const linkElement = screen.getByText(/learn react/i);
expect(linkElement).toBeInTheDocument();
});これを分解しましょう：
- 必要なテストツールとAppコンポーネントをインポートします。
-
test関数を使ってテストを定義します。 - Appコンポーネントをレンダリングします。
- テキスト「learn react」を持つ要素を探します。
- この要素がドキュメントに存在することを期待します。
このテストを実行するために、以下のコマンドを使用してください：
npm testすべてが正しく設定されている場合、パスしたテストが表示されるはずです。最初のReactテストおめでとうございます！
カスタムアプリでのテスト
基本的なテストを見たので、自分でコンポーネントを作成してテストしてみましょう。
シンプルなコンポーネントの作成
シンプルなカウンターコンポーネントを作成しましょう。新しいファイルsrc/Counter.jsを作成してください：
import React, { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
}
export default Counter;このコンポーネントはカウントとインクリメントボタンを表示します。
カウンターテストの作成
次に、Counterコンポーネントをテストしましょう。新しいファイルsrc/Counter.test.jsを作成してください：
import { render, screen, fireEvent } from '@testing-library/react';
import Counter from './Counter';
test('初期カウントが0であることを確認する', () => {
render(<Counter />);
const countElement = screen.getByText(/count: 0/i);
expect(countElement).toBeInTheDocument();
});
test('ボタンをクリックするとカウントがインクリメントされる', () => {
render(<Counter />);
const button = screen.getByText(/increment/i);
fireEvent.click(button);
const countElement = screen.getByText(/count: 1/i);
expect(countElement).toBeInTheDocument();
});これらのテストを分解しましょう：
- 最初のテストは、初期カウントが0であることを確認します。
- 二番目のテストは、ボタンをクリックするとカウントが1にインクリメントされることを確認します。
再びnpm testを実行すると、これらの新しいテストがパスするはずです！
高度なテスト概念
基本的なテストに慣れてきたら、より高度な概念を探求したいと思うでしょう。以下はReactテストでよく使うメソッドの表です：
| メソッド | 説明 | 例 |
|---|---|---|
| render | Reactコンポーネントをテストのためレンダリング | render(<MyComponent />) |
| screen.getByText | テキストコンテンツを持つ要素を探す | screen.getByText(/hello world/i) |
| screen.getByRole | ARIAロールを持つ要素を探す | screen.getByRole('button') |
| fireEvent | DOMイベントをシミュレート | fireEvent.click(button) |
| waitFor | 期待をパスするまで待機 | await waitFor(() => expect(element).toBeVisible()) |
| act | Reactステートの更新を引き起こすコードをラップ | act(() => { /* アクションを実行 */ }) |
非同期動作のテスト
Reactアプリケーションはしばしば非同期操作を含みます。データを取得するコンポーネントを作成してテストしてみましょう：
// UserData.js
import React, { useState, useEffect } from 'react';
function UserData() {
const [userData, setUserData] = useState(null);
useEffect(() => {
fetch('https://jsonplaceholder.typicode.com/users/1')
.then(response => response.json())
.then(data => setUserData(data));
}, []);
if (!userData) return <div>Loading...</div>;
return <div>User Name: {userData.name}</div>;
}
export default UserData;このコンポーネントをテストしましょう：
// UserData.test.js
import { render, screen, waitFor } from '@testing-library/react';
import UserData from './UserData';
test('データをロードし、ユーザデータを表示する', async () => {
render(<UserData />);
expect(screen.getByText(/loading/i)).toBeInTheDocument();
await waitFor(() => {
expect(screen.getByText(/user name:/i)).toBeInTheDocument();
});
});このテストはローディング状態を確認し、ユーザデータが表示されるのを待ちます。
結論
Reactでのテストは最初は厄介に見えるかもしれませんが、あなたをより優れた開発者にする価値のあるスキルです。忘れないでください、書いたEach test you write is like a safety net for your code. It catches you when you fall and gives you the confidence to climb higher.
Reactの旅を続ける中で、さまざまなテスト技術を探求し続けてください。API呼び出しをモックし、エラーステートをテストし、コンポーネントを書く前にテストを書く（テスト駆動開発）に挑戦してみてください。練習を重ねるほど、自然なもの becomes.
ハッピーテストをし、コンソールがパスしたテストで常に緑色になることを祈っています！
Credits: Image by storyset