コンポーネントのテスト実装例

📁 フォルダ構成

src/
├── components/
│   ├── GreetingForm.tsx
│   └── __tests__/
│       └── GreetingForm.test.tsx
├── setupTests.ts
└── index.tsx

• __tests__ ディレクトリにコンポーネントごとのテストを格納（推奨パターン）
• setupTests.ts は Jest 実行前に共通の初期化処理を記述

🧩 テスト対象のコンポーネント

// components/GreetingForm.tsx
import { useState } from 'react'

export const GreetingForm = () => {
  const [name, setName] = useState('')
  const [submittedName, setSubmittedName] = useState('')

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    setSubmittedName(name)
  }

  return (
    <form onSubmit={handleSubmit}>
      <label htmlFor="name">名前:</label>
      <input
        id="name"
        value={name}
        onChange={(e) => setName(e.target.value)}
      />
      <button type="submit">送信</button>
      {submittedName && 
<p>こんにちは、{submittedName}さん！</p>}
    </form>
  )
}

🧪 テストコード例

// components/__tests__/GreetingForm.test.tsx
import { render, screen } from '@testing-library/react'
import userEvent from '@testing-library/user-event'
import { GreetingForm } from '../GreetingForm'

describe('GreetingForm', () => {
  test('入力と送信ができる', async () => {
    render(<GreetingForm />)

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

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

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

🔧 setupTests.ts の設定（必要に応じて）

// setupTests.ts
import '@testing-library/jest-dom'

✅ 補足とベストプラクティス

🔗 関連リンク

• React Testing Library公式ドキュメント
• Jest公式サイト