Jest Loading エラーの解決方法について

はじめに

jestでLoadingが表示されることについてテストを実装した際、下記のようなエラーが表示されました。
こちらの解決方法について共有させていただきます。

App › Loading...が表示されること

    expect(element).toBeInTheDocument()

    element could not be found in the document

      36 |     
      37 |     const Loading = await waitFor(() => screen.getByText("Loading..."));
    > 38 |     expect(Loading).toBeInTheDocument();
         |                     ^
      39 |   });
      40 |
      41 |   test("タイトルがあること", async () => {

      at Object.<anonymous> (src/__tests__/Todo.spec.tsx:38:21)

Loadingの要素を取得できていないようです。

App.tsx

useEffect(() => {
    const fetchTodos = async () => {
      setLoading(true);
      try {
        await new Promise((resolve) => setTimeout(resolve, 500)); // ← こちらを追加
        const data = await GetAllTodos();

上記を追加することで解決できました。
GetAllTodosが実行されるまでの時間が短いため、テストでLoadingの要素を取得できていなかったようです。

参考

JISOUのメンバー募集中！

プログラミングコーチングJISOUでは、新たなメンバーを募集しています。
日本一のアウトプットコミュニティでキャリアアップしませんか？
興味のある方は、ぜひホームページをのぞいてみてくださ！
▼▼▼