Reactイベントハンドラー（onClick/onChange）のテスト方法を徹底解説

function MyButton() {
  const handleClick = () => {
    alert('Button clicked!');
  };

  return <button onClick={handleClick}>Click Me</button>;
}

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

module.exports = {
  testEnvironment: 'jsdom',
  setupFilesAfterEnv: ['@testing-library/jest-dom/extend-expect'],
};

"scripts": {
  "test": "jest"
}

// src/Button.test.js
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';

function Button({ onClick }) {
  return <button onClick={onClick}>Click me</button>;
}

test('calls onClick when button is clicked', () => {
  const handleClick = jest.fn();
  render(<Button onClick={handleClick} />);
  const button = screen.getByText('Click me');
  userEvent.click(button);
  expect(handleClick).toHaveBeenCalledTimes(1);
});

npm test

function Button({ onClick }) {
  return <button onClick={onClick}>Click me</button>;
}

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

test('calls onClick when button is clicked', () => {
  const handleClick = jest.fn(); // モック関数
  render(<Button onClick={handleClick} />);

  const button = screen.getByText('Click me');
  userEvent.click(button); // ユーザー操作をシミュレート

  expect(handleClick).toHaveBeenCalledTimes(1); // ハンドラーが1回呼び出されたことを確認
});

import { useState } from 'react';

function ToggleButton() {
  const [isOn, setIsOn] = useState(false);

  const handleClick = () => setIsOn((prev) => !prev);

  return (
    <button onClick={handleClick}>
      {isOn ? 'ON' : 'OFF'}
    </button>
  );
}

test('toggles button text on click', () => {
  render(<ToggleButton />);

  const button = screen.getByText('OFF');
  userEvent.click(button); // クリック操作
  expect(button).toHaveTextContent('ON'); // テキストがONに変わったことを確認

  userEvent.click(button); // 再度クリック
  expect(button).toHaveTextContent('OFF'); // テキストがOFFに戻ったことを確認
});

function FetchButton({ fetchData }) {
  const [data, setData] = useState(null);

  const handleClick = async () => {
    const result = await fetchData();
    setData(result);
  };

  return (
    <div>
      <button onClick={handleClick}>Fetch Data</button>
      {data && <div>{data}</div>}
    </div>
  );
}

test('fetches and displays data on click', async () => {
  const mockFetchData = jest.fn().mockResolvedValue('Fetched Data');
  render(<FetchButton fetchData={mockFetchData} />);

  const button = screen.getByText('Fetch Data');
  userEvent.click(button);

  expect(mockFetchData).toHaveBeenCalledTimes(1); // fetchDataが呼ばれたことを確認
  const data = await screen.findByText('Fetched Data'); // 非同期にテキストが表示されるのを確認
  expect(data).toBeInTheDocument();
});

import { useState } from 'react';

function InputField() {
  const [value, setValue] = useState('');

  const handleChange = (event) => {
    setValue(event.target.value);
  };

  return (
    <div>
      <input type="text" value={value} onChange={handleChange} />
      <p>Current value: {value}</p>
    </div>
  );
}

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

test('updates value on input change', () => {
  render(<InputField />);

  const input = screen.getByRole('textbox');
  userEvent.type(input, 'React Testing'); // ユーザーの入力をシミュレート

  expect(input).toHaveValue('React Testing'); // 入力値が反映されていることを確認
  expect(screen.getByText('Current value: React Testing')).toBeInTheDocument(); // 表示が正しいことを確認
});

function ValidatedInput() {
  const [value, setValue] = useState('');
  const [error, setError] = useState('');

  const handleChange = (event) => {
    const inputValue = event.target.value;
    if (inputValue.length > 10) {
      setError('Input exceeds 10 characters');
    } else {
      setError('');
    }
    setValue(inputValue);
  };

  return (
    <div>
      <input type="text" value={value} onChange={handleChange} />
      {error && <p style={{ color: 'red' }}>{error}</p>}
    </div>
  );
}

test('displays error message for invalid input', () => {
  render(<ValidatedInput />);

  const input = screen.getByRole('textbox');
  userEvent.type(input, 'ReactTestingTool');

  expect(screen.getByText('Input exceeds 10 characters')).toBeInTheDocument(); // エラーメッセージが表示されることを確認

  userEvent.clear(input);
  userEvent.type(input, 'React');

  expect(screen.queryByText('Input exceeds 10 characters')).not.toBeInTheDocument(); // エラーメッセージが消えることを確認
});

function AsyncSearch({ fetchResults }) {
  const [query, setQuery] = useState('');
  const [results, setResults] = useState([]);

  const handleChange = async (event) => {
    const value = event.target.value;
    setQuery(value);
    const data = await fetchResults(value);
    setResults(data);
  };

  return (
    <div>
      <input type="text" value={query} onChange={handleChange} />
      <ul>
        {results.map((result, index) => (
          <li key={index}>{result}</li>
        ))}
      </ul>
    </div>
  );
}

test('fetches and displays search results', async () => {
  const mockFetchResults = jest.fn().mockResolvedValue(['React', 'React Testing', 'React Hooks']);
  render(<AsyncSearch fetchResults={mockFetchResults} />);

  const input = screen.getByRole('textbox');
  userEvent.type(input, 'React');

  expect(mockFetchResults).toHaveBeenCalledWith('React'); // APIが呼び出されることを確認

  const resultItems = await screen.findAllByRole('listitem'); // 非同期のリストアイテムを取得
  expect(resultItems).toHaveLength(3); // 結果が正しくレンダリングされることを確認
});

function FetchDataButton({ fetchData }) {
  const [data, setData] = useState(null);

  const handleClick = async () => {
    const result = await fetchData();
    setData(result);
  };

  return (
    <div>
      <button onClick={handleClick}>Fetch Data</button>
      {data && <p>Data: {data}</p>}
    </div>
  );
}

test('fetches and displays data on button click', async () => {
  const mockFetchData = jest.fn().mockResolvedValue('Sample Data');
  render(<FetchDataButton fetchData={mockFetchData} />);

  const button = screen.getByText('Fetch Data');
  userEvent.click(button); // クリック操作

  expect(mockFetchData).toHaveBeenCalledTimes(1); // fetchDataが呼び出されたことを確認

  const displayedData = await screen.findByText('Data: Sample Data'); // 非同期データを確認
  expect(displayedData).toBeInTheDocument(); // 表示されていることを確認
});

function FetchDataButton({ fetchData }) {
  const [data, setData] = useState(null);
  const [error, setError] = useState(null);

  const handleClick = async () => {
    try {
      const result = await fetchData();
      setData(result);
    } catch (err) {
      setError('Failed to fetch data');
    }
  };

  return (
    <div>
      <button onClick={handleClick}>Fetch Data</button>
      {data && <p>Data: {data}</p>}
      {error && <p style={{ color: 'red' }}>{error}</p>}
    </div>
  );
}

test('displays error message when fetch fails', async () => {
  const mockFetchData = jest.fn().mockRejectedValue(new Error('Fetch error'));
  render(<FetchDataButton fetchData={mockFetchData} />);

  const button = screen.getByText('Fetch Data');
  userEvent.click(button);

  const errorMessage = await screen.findByText('Failed to fetch data'); // エラーメッセージを確認
  expect(errorMessage).toBeInTheDocument();
});

function LoadingButton({ fetchData }) {
  const [loading, setLoading] = useState(false);
  const [data, setData] = useState(null);

  const handleClick = async () => {
    setLoading(true);
    const result = await fetchData();
    setData(result);
    setLoading(false);
  };

  return (
    <div>
      <button onClick={handleClick} disabled={loading}>
        {loading ? 'Loading...' : 'Fetch Data'}
      </button>
      {data && <p>Data: {data}</p>}
    </div>
  );
}

test('displays loading state and updates UI after fetch', async () => {
  const mockFetchData = jest.fn().mockResolvedValue('Sample Data');
  render(<LoadingButton fetchData={mockFetchData} />);

  const button = screen.getByText('Fetch Data');
  userEvent.click(button);

  expect(button).toHaveTextContent('Loading...'); // ローディング状態を確認
  expect(button).toBeDisabled(); // ボタンが無効化されていることを確認

  const displayedData = await screen.findByText('Data: Sample Data'); // 非同期データを確認
  expect(displayedData).toBeInTheDocument();

  expect(button).toHaveTextContent('Fetch Data'); // ボタンテキストが戻ることを確認
  expect(button).not.toBeDisabled(); // ボタンが有効になることを確認
});

function SubmitButton({ onSubmit }) {
  return <button onClick={() => onSubmit('test-data')}>Submit</button>;
}

test('calls onSubmit with correct arguments', () => {
  const mockOnSubmit = jest.fn(); // モック関数を作成
  render(<SubmitButton onSubmit={mockOnSubmit} />);

  const button = screen.getByText('Submit');
  userEvent.click(button); // クリック操作

  expect(mockOnSubmit).toHaveBeenCalledTimes(1); // 呼び出し回数を確認
  expect(mockOnSubmit).toHaveBeenCalledWith('test-data'); // 引数を確認
});

function LoggerButton() {
  return (
    <button onClick={() => console.log('Button clicked!')}>
      Log
    </button>
  );
}

test('logs message to console on click', () => {
  const consoleSpy = jest.spyOn(console, 'log'); // console.logをスパイ
  render(<LoggerButton />);

  const button = screen.getByText('Log');
  userEvent.click(button); // クリック操作

  expect(consoleSpy).toHaveBeenCalledWith('Button clicked!'); // メッセージを確認

  consoleSpy.mockRestore(); // スパイを元に戻す
});

function AsyncButton({ fetchData }) {
  const [status, setStatus] = useState('Idle');

  const handleClick = async () => {
    setStatus('Loading');
    const result = await fetchData();
    setStatus(result);
  };

  return <button onClick={handleClick}>{status}</button>;
}

test('updates status based on fetch result', async () => {
  const mockFetchData = jest.fn().mockResolvedValue('Success');
  render(<AsyncButton fetchData={mockFetchData} />);

  const button = screen.getByText('Idle');
  userEvent.click(button);

  expect(button).toHaveTextContent('Loading'); // ローディング状態を確認
  const updatedButton = await screen.findByText('Success'); // 成功状態を確認
  expect(updatedButton).toBeInTheDocument();

  expect(mockFetchData).toHaveBeenCalledTimes(1); // API呼び出しの確認
});