Frontend Academy · レッスン

@testing-library/react：render と userEvent

シミュレートされた DOM にコンポーネントをレンダリングし、ロールやラベルテキストで検索し、userEvent でユーザー操作を発生させ、表示結果をアサートします。

「@testing-library/react：render と userEvent」はCoddyKit上の無料Frontend Academyレッスンです。これはレッスン2/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはFrontend Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Frontend Academyコースには全4レッスンが含まれています。

Testing Libraryの方針

@testing-libraryは、ユーザーがUIを操作する方法に近いテストを推奨しています。CSSクラス名やコンポーネントの内部構造などの実装詳細ではなく、ロール、ラベル、テキストで要素を検索します。

Testing Libraryのインストール

React用のTesting Libraryと、ユーザー操作をシミュレートするuserEventパッケージをインストールします。

npm install -D @testing-library/react @testing-library/user-event @testing-library/jest-dom

render() — コンポーネントをマウントする

render(<Component />)は、シミュレートされたDOMにコンポーネントをマウントします。要素を検索するためのクエリ関数を返します。

import { render, screen } from '@testing-library/react';
import { Button } from './Button';

test('renders button with label', () => {
  render(<Button label="Submit" onClick={() => {}} />);
  expect(screen.getByRole('button', { name: 'Submit' })).toBeInTheDocument();
});

要素の検索

クエリは、次の順番で優先して使用します。getByRole（アクセシブル）、getByLabelText、getByPlaceholderText、getByText、getByDisplayValueです。存在しないことをテストする場合はqueryBy*を使用します。非同期で表示される要素にはfindBy*を使用します。

// Prefer (accessible):
screen.getByRole('button', { name: /submit/i });
screen.getByLabelText('Email');

// For text content:
screen.getByText('Welcome!');

// Existence check:
expect(screen.queryByText('Error')).not.toBeInTheDocument();

// Async appearance:
await screen.findByText('Data loaded');

userEvent — ユーザー操作のシミュレーション

userEventは、入力、クリック、キーボード操作など、実際のユーザー操作をシミュレートします。古いfireEventよりも現実に近い動作になります。

import userEvent from '@testing-library/user-event';

test('typing in input', async () => {
  const user = userEvent.setup();
  render(<SearchInput />);

  const input = screen.getByRole('textbox', { name: /search/i });
  await user.type(input, 'react hooks');

  expect(input).toHaveValue('react hooks');
});

フォーム送信のテスト

フォームのフィールドに値を入力して送信します。そして、送信後にユーザーに表示される内容など、結果をアサートします。

test('submitting the login form', async () => {
  const onLogin = jest.fn();
  const user = userEvent.setup();
  render(<LoginForm onLogin={onLogin} />);

  await user.type(screen.getByLabelText('Email'), 'alice@example.com');
  await user.type(screen.getByLabelText('Password'), 'secret123');
  await user.click(screen.getByRole('button', { name: /sign in/i }));

  expect(onLogin).toHaveBeenCalledWith({ email: 'alice@example.com', password: 'secret123' });
});

jest-domのカスタムMatcher

@testing-library/jest-domは、便利なMatcherを追加します。toBeInTheDocument()、toBeVisible()、toBeDisabled()、toHaveValue()、toHaveClass()、toHaveFocus()などです。

非同期なコンポーネント更新のテスト

非同期で表示される要素（fetch後やタイムアウト後に表示される要素）には、waitFor()またはfindBy*を使用します。

test('shows data after loading', async () => {
  render(<UserList />);

  expect(screen.getByRole('status')).toHaveTextContent('Loading');

  const items = await screen.findAllByRole('listitem');
  expect(items).toHaveLength(3);
});

ローディング状態とエラー状態のテスト

fetchのレスポンスをモックして、さまざまな状態をテストします。MSW（Mock Service Worker）は、テストでAPIレスポンスをモックするための最適なツールです。

アクセシビリティのテスト

Testing Libraryは、自然にアクセシビリティを意識した実装を促します。ロールやラベルで要素を検索できない場合、その要素はアクセシブルではない可能性があります。テストで自動的にアクセシビリティ監査を行うには、jest-axeを使用します。

実装詳細をテストしない

次のことは避けてください。CSSクラス名で検索する、コンポーネントの内部状態をインポートする、特定のメソッドが呼び出されたことをテストする、といった方法です。ユーザーの視点から、ユーザーに何が見えるか、操作すると何が起きるかという振る舞いをテストします。

クイックチェック

インタラクティブな要素を見つけるには、Testing Libraryのどのクエリ関数を優先すべきですか？

まとめ：@testing-library/react

render()はシミュレートされたDOMにコンポーネントをマウントします。実装詳細ではなく、ロール、ラベル、テキストで検索します。現実に近いユーザー操作にはuserEvent.setup()を使用します。非同期要素にはfindBy*を使用します。読みやすいアサーションにはjest-domを使用します。ユーザーの視点、つまりユーザーに何が見え、何をするかを基準にテストします。アクセシブルなコンポーネントはテストも簡単です。

よくある質問

「@testing-library/react：render と userEvent」レッスンは無料ですか？

はい。「@testing-library/react：render と userEvent」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Frontend Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Frontend Academyコースには全4レッスンが含まれています。

「@testing-library/react：render と userEvent」で何を学びますか？

シミュレートされた DOM にコンポーネントをレンダリングし、ロールやラベルテキストで検索し、userEvent でユーザー操作を発生させ、表示結果をアサートします。ブラウザで直接実行するハンズオンコードでFrontend Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Frontend Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのFrontend Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン2/4です。

「@testing-library/react：render と userEvent」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このFrontend Academyレッスンでコードを書いて実行できますか？

はい。すべてのFrontend Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

Jest のセットアップと基本テスト
@testing-library/react：render と userEvent
@testing-library/vue：コンポーネントのマウント
モジュールと API 呼び出しのモック

← Frontend Academyに戻る