Jest DOMの主なカスタムマッチャー

例えばこちらですと、test1 test2 が表示されている（見える）ことを確認しています。

describe('TopPage', () => {
  test('デフォルト（テストケース）', async () => {
    render(<Default />);
    await waitFor(() => {
      expect(screen.getByText('test1')).toBeVisible();
      expect(screen.getByText('test2')).toBeVisible();
    });
  });

1. toBeInTheDocument(): 要素がDOMに存在することを確認します。
2. toBeVisible(): 要素が表示されている（見える）ことを確認します。
3. toBeEmpty(): 要素が空（子要素を持たない）ことを確認します。
4. toBeEmptyDOMElement(): 要素が空（子要素やテキストを持たない）ことを確認します。
5. toBeInvalid() / toBeValid(): 要素が無効または有効な状態であることを確認します。
6. toBeRequired(): 要素が必須（required属性を持つ）であることを確認します。
7. toBeEnabled() / toBeDisabled(): 要素が有効または無効化（disabled）されていることを確認します。
8. toContainElement(element): 要素が特定の他の要素を含むことを確認します。
9. toContainHTML(html): 要素が特定のHTMLを含むことを確認します。
10. toHaveAttribute(attributeName, value?): 要素が特定の属性を持つことを確認します。オプションで属性の値も指定できます。
11. toHaveClass(className): 要素が特定のクラス名を持つことを確認します。
12. toHaveFocus(): 要素がフォーカスされていることを確認します。
13. toHaveFormValues(expectedValues): フォーム要素が特定の値を持つことを確認します。
14. toHaveStyle(style): 要素が特定のスタイルを持つことを確認します。スタイルは文字列またはオブジェクトで指定できます。
15. toHaveTextContent(text): 要素が特定のテキスト内容を持つことを確認します。
16. toHaveValue(value): フォームコントロール要素（<input>や<textarea>など）が特定の値を持つことを確認します。
17. toHaveDisplayValue(value): フォームコントロール要素が特定の表示値を持つことを確認します。
18. toBeChecked() / toBePartiallyChecked(): チェックボックスやラジオボタンがチェックされている、または部分的にチェックされていることを確認します。
19. toHaveDescription(description): 要素が特指定のアクセシビリティの説明（aria-describedbyで参照される要素のテキスト）を持つことを確認します。

コメント

フロントエンドのテストを極めたいので、少しずつ理解を深めていきます。