Jest + React Testing Library の基本構成

3日 ago

user

1 minute

Reactコンポーネントをテストするための基本

✅ 使用ライブラリ

ライブラリ名	目的
`jest`	テスティングフレームワーク
`@testing-library/react`	ユーザー視点のテスト支援
`@testing-library/jest-dom`	DOMの状態を検証する拡張

npm install --save-dev jest @testing-library/react @testing-library/jest-dom

※ Create React App（CRA）を使用している場合は、すでにJest環境が含まれています。

🛠 セットアップ（例）

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

このファイルは、テストの前処理として Jest によって自動的に読み込まれます（CRA環境の場合）。

🧩 テスト対象のReactコンポーネント（例）

// Greet.tsx
type Props = {
  name: string
}

const Greet = ({ name }: Props) => {
  return 
<h1>Hello, {name}!</h1>
}

export default Greet

🧪 テストコードの基本構成

// Greet.test.tsx
import { render, screen } from '@testing-library/react'
import Greet from './Greet'

describe('Greet', () => {
  test('renders greeting message', () => {
    render(<Greet name="Takuma" />)
    const textElement = screen.getByText(/hello, takuma/i)
    expect(textElement).toBeInTheDocument()
  })
})

🔍 解説

render()：コンポーネントを仮想DOMにレンダリング
screen.getByText()：ユーザー視点でDOM要素を取得
expect(...).toBeInTheDocument()：Jest DOMの拡張マッチャー

💡 よく使う関数・マッチャー

API	用途
`render()`	テスト対象を仮想DOMに描画
`screen.getByRole()`	アクセシビリティロールで要素取得
`screen.queryByText()`	存在しない要素の検証に使用（null返す）
`fireEvent.click()`	ユーザーイベントの発火
`userEvent.click()`	実際のユーザー操作に近い動作を再現

✅ まとめ：最低限の構成でReactをテストする

jest：テストランナー
@testing-library/react：ユーザー視点のDOM操作
@testing-library/jest-dom：読みやすいマッチャー追加

シンプルな構成で、ユニットテスト・スモークテスト・アクセシビリティチェックまでカバーできます。

🔗 参考リンク