問題一覧に戻る
上級テストとベストプラクティス
問題100: ユーザーインタラクションテスト

fireEventとwaitForを使った複雑なユーザーインタラクションのテスト方法を学びます。フォーム入力、ボタンクリック、非同期操作を含む実際のユーザーワークフローをシミュレートします。状態更新後に現れる要素を扱うためにwaitForを使用します。アプリケーションを通した完全なユーザージャーニーを検証する統合テストに必須です。

import React, { useState } from 'react';
import { render, screen, fireEvent, waitFor } from '@testing-library/react';

function Form() {
  const [value, setValue] = useState('');
  const [submitted, setSubmitted] = useState(false);
  
  const handleSubmit = (e) => {
    e.preventDefault();
    if (value) setSubmitted(true);
  };
  
  return (
    <form onSubmit={handleSubmit}>
      <input
        value={value}
        onChange={(e) => setValue(e.target.value)}
        placeholder="Enter text"
      />
      <button type="submit">Submit</button>
      {submitted && <p>Submitted: {value}</p>}
    </form>
  );
}

test('form submission flow', async () => {
  render(<Form />);
  
  {/* プレースホルダーで入力を取得 */}
  const input = screen.('Enter text');
  const button = screen.getByText('Submit');
  
  {/* 入力フィールドに入力 */}
  fireEvent.(input, { target: { value: 'Test' } });
  
  {/* フォームを送信 */}
  fireEvent.(button);
  
  {/* 非同期結果を待機 */}
  await (() => {
    expect(screen.getByText('Submitted: Test')).toBeInTheDocument();
  });
});