【徹底解説】React Testing Library でボタンが無効化されていることをテストする方法

React Testing Library でボタンが無効化されていることを確認する方法

React Testing Library を使用して、ボタンコンポーネントが無効化されているかどうかをテストする方法について説明します。

手順

1. テスト対象のコンポーネントをインポートする

import React from 'react';
import { render, screen } from '@testing-library/react';
import MyButton from './MyButton'; // テスト対象のボタンコンポーネント

1. コンポーネントをレンダリングする

render(<MyButton disabled={true} />); // ボタンが無効化された状態でレンダリング

1. screen.getByRole を使用してボタンを取得する

const button = screen.getByRole('button'); // ボタンを取得

1. button.disabled プロパティが true であることを確認する

expect(button.disabled).toBe(true); // 無効化されていることを確認

例

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

const MyButton = ({ disabled }) => {
  return (
    <button disabled={disabled}>
      クリック
    </button>
  );
};

test('ボタンが無効化されていることを確認', () => {
  render(<MyButton disabled={true} />);

  const button = screen.getByRole('button');
  expect(button.disabled).toBe(true);
});

• screen.getByRole以外にも、screen.getByText や screen.getByTestId などの方法でボタンを取得できます。
• Jest や Mocha などのテストランナーを使用する必要があります。

• ボタンが DOM に存在するかどうかを確認するには、screen.queryByRole を使用できます。
• ボタンがクリック可能かどうかを確認するには、fireEvent.click を使用できます。

import React from 'react';
import { render, screen } from '@testing-library/react';
import MyButton from './MyButton'; // テスト対象のボタンコンポーネント

const MyButton = ({ disabled }) => {
  return (
    <button disabled={disabled}>
      クリック
    </button>
  );
};

test('ボタンが無効化されていることを確認', () => {
  render(<MyButton disabled={true} />);

  const button = screen.getByRole('button');
  expect(button.disabled).toBe(true);
});

このコードの説明:

1. MyButton コンポーネントを定義:
   • disabled props を受け取ります。
   • disabled props が true の場合、ボタンは無効化されます。
2. test 関数:
   • render 関数を使用して MyButton コンポーネントをレンダリングします。
   • disabled props を true に設定します。
   • screen.getByRole('button') を使用して、レンダリングされたボタンを取得します。
   • expect(button.disabled).toBe(true) を使用して、ボタンが無効化されていることを確認します。

• さまざまなタイプのボタン (例: primary、secondary、outlined) をテストできます。
• ボタンがクリックされたときに何が起こるかをテストできます。
• アクセシビリティ要件を満たしているかどうかをテストできます。

screen.queryByRole は、要素が存在するかどうかを確認するために使用できます。ボタンが無効化されている場合、DOM に存在する可能性がありますが、クリックできません。

test('ボタンが無効化されていることを確認', () => {
  render(<MyButton disabled={true} />);

  const button = screen.queryByRole('button');
  expect(button).not.toBeInTheDocument(); // ボタンは DOM に存在しないはず
});

fireEvent.click を使用する

fireEvent.click を使用して、ボタンをクリックできます。ボタンが無効化されている場合、クリックしても何も起こりません。

test('ボタンが無効化されていることを確認', () => {
  const handleClick = jest.fn();

  render(<MyButton disabled={true} onClick={handleClick} />);

  fireEvent.click(screen.getByRole('button'));
  expect(handleClick).not.toHaveBeenCalled(); // handleClick 関数は呼び出されないはず
});

カスタム matcher を使用する

toBeDisabled のようなカスタム matcher を作成して、ボタンが無効化されているかどうかを確認できます。

const toBeDisabled = (element) => {
  return element.disabled === true;
};

expect(screen.getByRole('button')).toBeDisabled();

どの方法を使用するべきですか？

使用する方法は、テストの状況によって異なります。

• ボタンがクリックされたときに何が起こるかをテストする場合は、fireEvent.click を使用します。
• テストをより表現力豊かにしたい場合は、カスタム matcher を使用します。

• テスト対象のコンポーネントがアクセシビリティ要件を満たしていることを確認することが重要です。
• ボタンが無効化されている理由は、ユーザーが操作できないようにするためだけではないことに注意してください。場合によっては、ボタンの状態を示すためにも使用されます。