【Jest×Testing Library】queryByTextとgetByTextの違いでハマった件

はじめに

Jest、Testing Libraryを使用したテストでハマりました。

問題

画面上に値が存在しないことの確認をするためにテストを実行時、以下のソースの箇所でエラーが発生。

App.test.tsx（中略）

    // 事前検証
    await waitFor(() => {
      // 登録する記録が画面上に表示されていないこと
+      expect(screen.getByText("追加の勉強")).not.toBeInTheDocument();
+      expect(screen.getByText("4時間")).not.toBeInTheDocument();
+      expect(screen.getByText("2024/01/04 00:00")).not.toBeInTheDocument();
      // 合計時間
      expect(screen.getByTestId("sum-time").innerHTML).toEqual("6時間");
    });

エラーメッセージ

Unable to find an element with the text: 追加の勉強. This could be because the text is broken up by multiple elements.
In this case, you can provide a function for your text matcher to make your matcher more flexible.

エラーメッセージでは、「追加の勉強」という要素が画面上に存在しません的なエラーが表示されています。
存在しないも何もそれが正しいんだよと思いながらハマりました。

解決方法

要素の取り方がおかしかった。
getByTextではなくqueryByTextを使うとのこと↓。

App.test.tsx（中略）

    // 事前検証
    await waitFor(() => {
      // 登録する記録が画面上に表示されていないこと
+      expect(screen.queryByText("追加の勉強")).not.toBeInTheDocument();
+      expect(screen.queryByText("4時間")).not.toBeInTheDocument();
+      expect(screen.queryByText("2024/01/04 00:00")).not.toBeInTheDocument();
      // 合計時間
      expect(screen.getByTestId("sum-time").innerHTML).toEqual("6時間");
    });

おわりに

copilotにgetByTextとqueryByTeｘｔの違いを聞いたら以下の通りとのこと。
これは知らないと分かりませんね…

2つのメソッドの違い

• queryByText:
  要素が見つからない場合、nullを返します。
  要素が存在しないことを確認するために使用されます。
  エラーをスローしないため、要素が存在しないことをテストするのに適しています。
• getByText:
  要素が見つからない場合、エラーをスローします。
  要素が存在することを確認するために使用されます。
  要素が確実に存在することを前提としたテストに適しています。

JISOUのメンバー募集中🔥

プログラミングコーチングJISOUではメンバーを募集しています。
日本一のアウトプットコミュニティでキャリアアップしませんか？
気になる方はぜひHPからライン登録お願いします！👇