`toBeInTheDocument()` エラー解決ガイド

React Testing Library: toBeInTheDocument() が関数でない理由

問題
React Testing Libraryのテストで、toBeInTheDocument()が関数として認識されないというエラーが発生することがあります。

原因
このエラーは通常、以下のような理由で発生します。

1. インポートエラー
   

   • @testing-library/reactを正しくインポートしていない場合。
   • インポート時にエイリアスを使用している場合、エイリアスが間違っている可能性があります。

2. レンダリングエラー
   

   • テスト対象のコンポーネントが正しくレンダリングされていない場合。
   • 必要なプロップやコンテキストが提供されていない場合。

3. テストファイルの構成
   

解決方法

1. インポートの確認
   

   • 以下のようにインポートします:

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

2. • render()関数を使用してコンポーネントをレンダリングします。

   render(<MyComponent />);
   

3. • テストファイルの構成が正しいことを確認してください。

例

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

test('renders MyComponent', () => {
     render(<MyComponent />);

  // `toBeInTheDocument()`が関数として認識されることを確認
  expect(screen.getByText('Hello, world!')).toBeInTheDocument();
});

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

test('renders MyComponent', () => {
     render(<MyComponent />);

  // `toBeInTheDocument()`が関数として認識されることを確認
  expect(screen.getByText('Hello, world!')).toBeInTheDocument();
});

1. getByRole()を使用
   

   • getByRole()を使用して、要素の役割に基づいて検索します。

   expect(screen.getByRole('heading')).toBeInTheDocument();
   

2. getByTestId()を使用
   

   • getByTestId()を使用して、要素に割り当てたデータ属性に基づいて検索します。

   expect(screen.getByTestId('my-component')).toBeInTheDocument();
   

3. queryBy*()を使用
   

   • queryBy*()メソッドを使用して、要素が存在しない場合にエラーを発生させずに検索します。

   const element = screen.queryByRole('heading');
   if (element) {
     expect(element).toBeInTheDocument();
   } else {
     // 要素が存在しない場合の処理
   }
   

注意

• queryBy*()メソッドは、要素が見つからない場合にnullを返します。
• getBy*()メソッドは、要素が見つからない場合にエラーを発生させます。