実践RTL：Reactコンポーネントのテストコード例と解説

}

送信

test(‘名前とメールアドレスが空の場合、エラーメッセージが表示されること’, async () => {
render();
const submitButton = screen.getByText(‘送信’);
fireEvent.click(submitButton);
const errorMessage = await screen.findByTestId(‘error-message’);
expect(errorMessage).toHaveTextContent(‘名前とメールアドレスを入力してください。’);
});

test(‘無効なメールアドレスの場合、エラーメッセージが表示されること’, async () => {
render();
const nameInput = screen.getByLabelText(‘名前:’);
const emailInput = screen.getByLabelText(‘メールアドレス:’);
const submitButton = screen.getByText(‘送信’);

fireEvent.change(nameInput, { target: { value: ‘Test User’ } });
fireEvent.change(emailInput, { target: { value: ‘invalid-email’ } });
fireEvent.click(submitButton);

const errorMessage = await screen.findByTestId(‘error-message’);
expect(errorMessage).toHaveTextContent(‘正しいメールアドレスを入力してください。’);
});

test(‘名前とメールアドレスが有効な場合、エラーメッセージが表示されず、アラートが表示されること’, async () => {
const alertMock = jest.spyOn(window, ‘alert’);
render();
const nameInput = screen.getByLabelText(‘名前:’);
const emailInput = screen.getByLabelText(‘メールアドレス:’);
const submitButton = screen.getByText(‘送信’);

fireEvent.change(nameInput, { target: { value: ‘Test User’ } });
fireEvent.change(emailInput, { target: { value: ‘[email protected]’ } });
fireEvent.click(submitButton);

await waitFor(() => expect(alertMock).toHaveBeenCalledTimes(1));
expect(alertMock).toHaveBeenCalledWith(‘名前: Test User, メールアドレス: [email protected]’);

const errorMessage = screen.queryByTestId(‘error-message’);
expect(errorMessage).toBeNull();

alertMock.mockRestore(); // モックを元の状態に戻す
});
“`

テストコードの解説:

• screen.queryByTestId('error-message'): queryByTestId関数は、指定されたdata-testid属性を持つ要素を検索します。要素が見つからない場合はnullを返します。初期状態ではエラーメッセージが表示されないことを確認するために使用されます。
• screen.findByTestId('error-message'): findByTestId関数は、指定されたdata-testid属性を持つ要素がDOMに追加されるまで待機します。タイムアウトが発生した場合、または要素が見つからない場合はエラーをスローします。エラーメッセージが表示されることを確認するために使用されます。
• screen.getByLabelText('名前:'): getByLabelText関数は、ラベルに関連付けられたテキスト入力要素を検索します。
• fireEvent.change(nameInput, { target: { value: 'Test User' } });: fireEvent.change関数を使って、入力フィールドの値を変更します。
• jest.spyOn(window, 'alert'): jest.spyOn関数を使って、window.alert関数を監視します。
• await waitFor(() => expect(alertMock).toHaveBeenCalledTimes(1));: waitFor関数を使って、alertMock関数が1回呼び出されるまで待機します。これは、alert関数が非同期的に呼び出される可能性があるため必要です。
• alertMock.mockRestore();: mockRestore関数を使って、監視対象の関数を元の状態に戻します。

このテストコードは、フォームのバリデーション機能が正しく動作すること、およびフォームが正しく送信された場合にアラートが表示されることを検証しています。

5. 非同期処理のテスト

Reactコンポーネントは、APIからのデータ取得などの非同期処理を伴う場合があります。RTLを使って非同期処理をテストする方法を見ていきましょう。

src/components/UserList.js

“`jsx
import React, { useState, useEffect } from ‘react’;

function UserList() {
const [users, setUsers] = useState([]);
const [loading, setLoading] = useState(true);

useEffect(() => {
const fetchData = async () => {
try {
const response = await fetch(‘https://jsonplaceholder.typicode.com/users’);
const data = await response.json();
setUsers(data);
} catch (error) {
console.error(‘Error fetching data:’, error);
} finally {
setLoading(false);
}
};

fetchData();

}, []);

if (loading) {
return

;
}

return (

{users.map(user => (
• {user.name}

))}

);
}

export default UserList;
“`

src/components/UserList.test.js

“`jsx
import React from ‘react’;
import { render, screen, waitFor } from ‘@testing-library/react’;
import UserList from ‘./UserList’;

// グローバルなfetch関数をモックする
global.fetch = jest.fn(() =>
Promise.resolve({
json: () => Promise.resolve([
{ id: 1, name: ‘John Doe’ },
{ id: 2, name: ‘Jane Doe’ },
]),
})
);

test(‘ユーザーリストが正しく表示されること’, async () => {
render();

// ローディングメッセージが表示されることを確認
expect(screen.getByText(‘Loading…’)).toBeInTheDocument();

// ユーザーリストが表示されるまで待機
await waitFor(() => {
expect(screen.getByText(‘John Doe’)).toBeInTheDocument();
expect(screen.getByText(‘Jane Doe’)).toBeInTheDocument();
});
});

test(‘フェッチがエラーになった場合のエラーハンドリング’, async () => {
// グローバルなfetch関数をモックしてエラーを返す
global.fetch = jest.fn(() => Promise.reject(‘API Error’));

// コンソールエラーを監視する
const consoleErrorSpy = jest.spyOn(console, ‘error’);

render();

// エラーが発生するまで待機
await waitFor(() => {
expect(consoleErrorSpy).toHaveBeenCalledWith(‘Error fetching data:’, ‘API Error’);
});

// コンソールエラーの監視をクリアする
consoleErrorSpy.mockRestore();
});
“`

テストコードの解説:

• global.fetch = jest.fn(...): global.fetch関数をJestのモック関数で置き換えます。これにより、APIリクエストを実際に送信せずに、テストでAPIの応答を制御できます。
• Promise.resolve(...): Promise.resolve関数を使って、成功したAPI応答をシミュレートします。
• waitFor(...): waitFor関数を使って、特定の条件が満たされるまで待機します。ここでは、ユーザーリストが表示されるまで待機します。
• jest.spyOn(console, 'error'): jest.spyOn関数を使って、console.error関数を監視します。
• Promise.reject('API Error'): Promise.reject関数を使って、失敗したAPI応答をシミュレートします。
• consoleErrorSpy.mockRestore(): モック関数を元の状態に戻します。

このテストコードは、APIからのデータ取得が成功した場合にユーザーリストが正しく表示されること、およびAPIリクエストが失敗した場合にエラーが正しく処理されることを検証しています。

6. カスタムフックのテスト

Reactのカスタムフックは、ロジックを再利用するための強力な手段です。RTLを使ってカスタムフックをテストする方法を見ていきましょう。

src/hooks/useCounter.js

“`jsx
import { useState } from ‘react’;

function useCounter(initialCount = 0) {
const [count, setCount] = useState(initialCount);

const increment = () => {
setCount(prevCount => prevCount + 1);
};

const decrement = () => {
setCount(prevCount => prevCount – 1);
};

return { count, increment, decrement };
}

export default useCounter;
“`

src/hooks/useCounter.test.js

“`jsx
import { renderHook, act } from ‘@testing-library/react-hooks’;
import useCounter from ‘./useCounter’;

test(‘初期値が0であること’, () => {
const { result } = renderHook(() => useCounter());
expect(result.current.count).toBe(0);
});

test(‘初期値を指定できること’, () => {
const { result } = renderHook(() => useCounter(5));
expect(result.current.count).toBe(5);
});

test(‘increment関数でカウントが増加すること’, () => {
const { result } = renderHook(() => useCounter());
act(() => {
result.current.increment();
});
expect(result.current.count).toBe(1);
});

test(‘decrement関数でカウントが減少すること’, () => {
const { result } = renderHook(() => useCounter());
act(() => {
result.current.decrement();
});
expect(result.current.count).toBe(-1);
});
“`

テストコードの解説:

• @testing-library/react-hooks: カスタムフックをテストするためのライブラリです。
• renderHook(...): カスタムフックをレンダリングし、フックから返される値をテストできるようにします。
• act(...): Reactの状態を更新するアクションをラップします。これにより、Reactが状態の更新を正しく処理できるようになります。
• result.current.count: フックから返されるcountの現在の値にアクセスします。
• result.current.increment(): フックから返されるincrement関数を呼び出します。

このテストコードは、useCounterフックが正しく初期化され、increment関数とdecrement関数が正しく動作することを検証しています。

7. テスト戦略

RTLを使った効果的なテストを行うためには、明確なテスト戦略を立てることが重要です。以下は、一般的なテスト戦略の例です。

• テストピラミッド: テストピラミッドは、テストの種類と量を適切に配分するための概念です。一般的に、単体テストの比率を高くし、統合テスト、E2Eテストの比率を低くします。
  • 単体テスト: 個々のコンポーネントや関数が期待どおりに動作することを検証します。RTLは、単体テストに適しています。
  • 統合テスト: 複数のコンポーネントが連携して動作することを検証します。
  • E2Eテスト: アプリケーション全体がエンドユーザーの視点から正しく動作することを検証します。
• カバレッジ: テストカバレッジは、コードがテストによってどれだけ網羅されているかを測定する指標です。カバレッジ率を高く保つことで、テストされていない領域を特定し、テストの品質を向上させることができます。
• テスト駆動開発 (TDD): TDDは、テストを先に記述してからコードを実装する開発手法です。TDDに従うことで、常にテスト可能なコードを作成し、設計段階で問題を早期に発見することができます。
• 継続的インテグレーション (CI): CIは、コードの変更を自動的にテストし、統合するプロセスです。CIシステムを導入することで、コードの品質を継続的に監視し、バグを早期に発見することができます。

8. まとめ

本記事では、React Testing Library (RTL) を使用してReactコンポーネントをテストする方法について詳しく解説しました。RTLは、ユーザー視点でのテストを推奨し、実装の詳細に依存しない安定したテストコードを作成するのに役立ちます。本記事で紹介した例やテクニックを参考に、RTLを使って効果的なテストコードを記述し、より高品質で信頼性の高いReactアプリケーションを開発してください。

RTLを使いこなすためのヒント:

• ユーザー視点でのテストを心がける: getByRole, getByText, getByLabelTextなどのクエリ関数を積極的に使用し、ユーザーがコンポーネントをどのように操作するかを意識してテストコードを記述します。
• テストコードの可読性を重視する: 明確で簡潔なテストコードは、理解しやすく、メンテナンスも容易です。テストコードのコメントを適切に追加し、テストの意図を明確に伝えるように心がけます。
• テストカバレッジを意識する: テストカバレッジツールを使用して、テストされていないコード領域を特定し、テストケースを追加することで、テストの品質を向上させます。
• テスト戦略を確立する: テストピラミッドの概念を理解し、単体テスト、統合テスト、E2Eテストのバランスを適切に保つようにします。
• 継続的に学習する: RTLは常に進化しています。最新のドキュメントやコミュニティの情報をチェックし、新しい機能やベストプラクティスを学習し続けることが重要です。

RTLは、Reactコンポーネントのテストをより効率的かつ効果的に行うための強力なツールです。RTLを使いこなすことで、より高品質で信頼性の高いReactアプリケーションを開発し、開発プロセス全体の効率を向上させることができます。