React Testing Library: toBeInTheDocument の代わりとなる matcher

2024-04-11

React Testing Library の toBeInTheDocument() はなぜ関数ではないのか

React Testing Library は、React アプリケーションのテストを容易にするためのライブラリです。その中でも toBeInTheDocument() は、特定の要素が DOM に存在するかどうかを確認するための matcher です。しかし、toBeInTheDocument() は関数ではなく、jest.fn() のようなモック関数として使用することはできません。

理由:

toBeInTheDocument() は matcher であり、実際の関数ではありません。matcher は、テスト対象となる要素と期待される状態を比較するために使用されます。toBeInTheDocument() の場合は、要素が DOM に存在するかどうかが比較されます。

一方、jest.fn() はモック関数を作成するための関数です。モック関数は、実際の関数を模倣して、テストコード内でどのように呼び出されたかを監視するために使用されます。

toBeInTheDocument() をモック関数として使用できない理由:

toBeInTheDocument() は matcher であり、実際の関数ではないため、jest.fn() を使用してモック関数を作成することはできません。

toBeInTheDocument() の代わりに、以下の matcher を使用することができます。

toHaveTextContent() - 要素内に特定のテキストが含まれているかどうかを確認する
toBeVisible() - 要素が画面に表示されているかどうかを確認する

これらの matcher は、toBeInTheDocument() と同様に、要素が DOM に存在するかどうかを確認するだけでなく、より具体的な検証を行うことができます。

例:

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

const App = () => {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <button onClick={handleClick}>Click me</button>
      <p>Count: {count}</p>
    </div>
  );
};

test('the count should increase when the button is clicked', () => {
  const { getByText } = render(<App />);

  fireEvent.click(getByText('Click me'));

  expect(getByText('Count: 1')).toBeInTheDocument();
});

上記の例では、toHaveTextContent() matcher を使用して、ボタンをクリックした後、Count: 1 というテキストが表示されていることを確認しています。

toBeInTheDocument() は、React Testing Library で提供されている matcher であり、特定の要素が DOM に存在するかどうかを確認するために使用されます。toBeInTheDocument() は関数ではなく、jest.fn() のようなモック関数として使用することはできません。

代わりに、toHaveTextContent() や toHaveAttribute() などの matcher を使用することができます。これらの matcher は、toBeInTheDocument() と同様に、要素が DOM に存在するかどうかを確認するだけでなく、より具体的な検証を行うことができます。

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

const App = () => {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <button onClick={handleClick}>Click me</button>
      <p>Count: {count}</p>
    </div>
  );
};

test('the count should increase when the button is clicked', () => {
  const { getByText } = render(<App />);

  fireEvent.click(getByText('Click me'));

  // `toBeInTheDocument()` matcher を使用して、
  // ボタンをクリックした後、`Count: 1` というテキストが表示されていることを確認
  expect(getByText('Count: 1')).toBeInTheDocument();
});

// `toHaveTextContent()` matcher を使用して、
// 同様のテストを行う
test('the count should increase when the button is clicked', () => {
  const { getByText } = render(<App />);

  fireEvent.click(getByText('Click me'));

  // `toHaveTextContent()` matcher は、
  // 要素内に特定のテキストが含まれているかどうかを確認する
  expect(getByText('Count: 1')).toHaveTextContent('1');
});