Jestで要素非存在テスト

日本語での説明

• jest: JavaScriptのテストフレームワークで、単体テストや統合テストをサポートします。
• react-testing-library: ReactJSアプリケーションのテストを支援するライブラリで、DOM要素をクエリしてテストを書くことができます。

要素が存在しないことをテストする方法

1. queryByRole() を使う:

   • queryByRole() は、指定した役割（role）を持つ要素を検索します。
   • 要素が見つからない場合、null を返します。
   • この性質を利用して、要素が存在しないことをアサートすることができます。

   import { render, queryByRole } from '@testing-library/react';
   
   test('element is not present', () => {
     const { queryByRole } = render(<MyComponent />);
     expect(queryByRole('button')).toBeNull();
   });
   

2. lackOf() を使う:

   • lackOf() は、特定の要素が存在しないことをアサートするためのカスタムマッチャーです。

   import { render, screen, lackOf } from '@testing-library/react';
   
   test('element is not present', () => {
     render(<MyComponent />);
     expect(screen).toHaveNoElement(screen.getByRole('button'));
   });
   

重要なポイント

• アサーション: expect() を使って、要素が null であることをアサートします。
• カスタムマッチャー: lackOf() を使用することで、読みやすいテストコードを書くことができます。
• テストケース: さまざまな条件下でテストケースを作成し、要素が存在しない場合の挙動を検証します。

例コード 1: queryByRole() を使う

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

test('element is not present', () => {
  const { queryByRole } = render(<MyComponent />);
  expect(queryByRole('button')).toBeNull();
});

• 説明:
  • queryByRole() を使って、役割（role）が "button" の要素を検索します。

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

test('element is not present', () => {
  const { queryByTestId } = render(<MyComponent />);
  expect(queryByTestId('my-button')).toBeNull();
});

例コード 3: lackOf() を使う

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

test('element is not present', () => {
  render(<MyComponent />);
  expect(screen).toHaveNoElement(screen.getByRole('button'));
});

• 説明:
  • lackOf() を使って、特定の要素が存在しないことをアサートします。
  • screen.getByRole('button') で、役割が "button" の要素を取得します。
  • expect(screen).toHaveNoElement() を使って、要素が存在しないことをアサートします。

代替方法 1: toBeEmpty() を使う

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

test('element is empty', () => {
  render(<MyComponent />);
  expect(screen.getByRole('list')).toBeEmpty();
});

• 説明:
  • toBeEmpty() を使って、要素が空であることをアサートします。
  • これは、要素が存在するが、子要素を持たない場合に有効です。

代替方法 2: toHaveNoChildren() を使う

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

test('element has no children', () => {
  render(<MyComponent />);
  expect(screen.getByRole('list')).toHaveNoChildren();
});

代替方法 3: not.toBeInTheDocument() を使う

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

test('element is not in the document', () => {
  render(<MyComponent />);
  expect(screen.getByRole('button')).not.toBeInTheDocument();
});

• 説明:
  • not.toBeInTheDocument() を使って、要素がドキュメント内に存在しないことをアサートします。
  • これは、要素が完全に削除された場合や、条件的に表示/非表示される場合に有効です。

• 適切な方法を選択: 要素が存在しない理由に応じて、適切な方法を選択してください。