ユーザー操作をテストする方法（`fireEvent`, `userEvent`）

React Testing Library では、フォーム入力・クリックなどのユーザー操作をエミュレートしてテストするために、主に以下の2つのユーティリティが使われます：

• fireEvent：低レベルのイベントシミュレーター
• userEvent：よりリアルなユーザー操作に近いAPI（推奨）

🔥 fireEvent の使い方

import { render, screen, fireEvent } from '@testing-library/react'
import MyForm from './MyForm'

test('フォーム入力と送信ができる（fireEvent）', () => {
  render(<MyForm />)

  const input = screen.getByLabelText(/名前/i)
  const button = screen.getByText(/送信/i)

  fireEvent.change(input, { target: { value: '拓磨' } })
  fireEvent.click(button)

  expect(screen.getByText(/こんにちは、拓磨さん/)).toBeInTheDocument()
})

• fireEvent.change は onChange を発火させる
• 単純なケースや古いコードとの互換に使える

👤 userEvent の使い方（推奨）

import { render, screen } from '@testing-library/react'
import userEvent from '@testing-library/user-event'
import MyForm from './MyForm'

test('フォーム入力と送信ができる（userEvent）', async () => {
  render(<MyForm />)

  const input = screen.getByLabelText(/名前/i)
  const button = screen.getByRole('button', { name: /送信/i })

  await userEvent.type(input, '拓磨')
  await userEvent.click(button)

  expect(await screen.findByText(/こんにちは、拓磨さん/)).toBeInTheDocument()
})

• userEvent.type()：1文字ずつ入力する挙動を再現
• userEvent.click()：マウス操作に近いクリック動作
• 実際のユーザー行動に近いためテストの信頼性が高い

fireEvent vs userEvent

✅ まとめ：いつどちらを使うべきか？

📦 インストール補足

npm install --save-dev @testing-library/user-event

🔗 参考リンク

• Testing Library: user-event ドキュメント
• fireEvent API