第154章：`getBy...` `findBy...` `queryBy...` の違い

今日のゴール 🎯

テストで要素を探すときに、「今あるはず？」「あとで出てくる？」「無いことを確かめたい？」を見分けて、3つを迷わず選べるようになるよ😊

まず結論：3つの性格を一言で 🧠💡

getBy...：「あるはず！」 → 無いと即エラー😤
queryBy...：「無いかも」 → 無いとnull（平和）🕊️
findBy...：「そのうち出るはず！」 → 待って探す（Promise）⏳

（Testing Library公式でも、この3タイプの違いは「エラーを投げるか」「Promiseでリトライするか」と説明されてるよ）(testing-library.com)

ちゃんと整理：戻り値・エラー・待つかどうか 📌

種類	見つかった	見つからない	複数見つかった	待つ？
`getBy...`	要素を返す	エラー	エラー	❌
`queryBy...`	要素を返す	`null`	エラー	❌
`findBy...`	Promiseが解決して要素	タイムアウトでreject	reject	✅

デフォルトのタイムアウトは 1000ms だよ（公式）(testing-library.com)

使い分けフローチャート（これだけ見ればOK）🗺️✨

クエリタイプのイメージ

まず覚える「型」：全部 “By何々” の前に付くだけ 🧩

getByRole / queryByText / findByLabelText みたいに、前半（get/query/find）だけが性格の違いで、後半（Role/Text/LabelText…）は「探し方」だよ😊 （公式でも getBy... / queryBy... / findBy... という型で説明されてる）(testing-library.com)

例で体に入れよう 💪💕（`screen` を使うのが基本）

screen を使うのがおすすめだよ（公式でも推奨）(testing-library.com)

サンプル部品：最初は「Loading...」→あとで「Done!」になる 🐣

// LoadingSample.tsx
import { useEffect, useState } from "react";

export function LoadingSample() {
  const [done, setDone] = useState(false);

  useEffect(() => {
    const id = setTimeout(() => setDone(true), 50);
    return () => clearTimeout(id);
  }, []);

  return (
    <div>
      {!done ? <p>Loading...</p> : <p>Done!</p>}
    </div>
  );
}

1) `getBy...`：今あるはずを取る ✅😤

「最初に Loading は見えるはず！」みたいなとき。

import { render, screen } from "@testing-library/react";
import { LoadingSample } from "./LoadingSample";

test("最初は Loading... が見える", () => {
  render(<LoadingSample />);

  const el = screen.getByText("Loading...");
  expect(el).toBeInTheDocument();
});

ポイント💡：getBy... は「無いと即エラー」だから、そこが失敗したらテストも即落ちるよ(testing-library.com)

2) `findBy...`：あとで出てくるはずを待つ ✅⏳✨

「Done! はちょっと待てば出る！」みたいなとき。

import { render, screen } from "@testing-library/react";
import { LoadingSample } from "./LoadingSample";

test("しばらくすると Done! が見える", async () => {
  render(<LoadingSample />);

  const el = await screen.findByText("Done!");
  expect(el).toBeInTheDocument();
});

findBy... は 待ってリトライして探す（getBy... + waitFor の合体）って公式に書いてあるよ🪄(testing-library.com)

3) `queryBy...`：無いことを確認する ✅🕵️‍♀️

「Done! が最初から出てたらおかしい！」とか、「エラー表示が出てないはず！」みたいなとき。

import { render, screen } from "@testing-library/react";
import { LoadingSample } from "./LoadingSample";

test("最初は Done! はまだ無い", () => {
  render(<LoadingSample />);

  expect(screen.queryByText("Done!")).not.toBeInTheDocument();
});

queryBy... は **無いとnull**を返すから、「無いのが正解」なテストで超便利だよ🙆‍♀️(testing-library.com)

よくあるハマりどころ集 🧯😵‍💫

❌ 1) “待つべき場面” で `getBy...` を使う

通信後に出るUIを getBy... で探すと、まだ無いので即エラーになりがち😇 → findBy... にしよっ✅(testing-library.com)

❌ 2) “無いことを確認したい” のに `getBy...`

無いのが正解なのに、getBy... は無いと怒る💥 → queryBy... にしよっ✅(testing-library.com)

❌ 3) “複数ある” のに `getBy...` / `queryBy...`

1個用は 複数マッチでもエラーだよ⚠️ → 複数なら getAllBy... / queryAllBy... / findAllBy... を使う（公式）(testing-library.com)

ちょい発展：待ち方のイメージ図 🧠⏳

（デフォルトタイムアウト 1000ms などは公式の説明どおりだよ）(testing-library.com)

ミニ練習（5分）✍️🌸

次の「どれ使う？」を答えてみてね😊

画面に「保存」ボタンが最初からある → ✅（　　　　）
API取得後に「ユーザー名」があとで出る → ✅（　　　　）
初期表示では「エラー表示」が出てないはず → ✅（　　　　）
「タグ」が3つ並ぶのを取りたい（複数） → ✅（　　　　）

答え👇 1: getBy... / 2: findBy... / 3: queryBy... / 4: getAllBy...（待つなら findAllBy...）(testing-library.com)

まとめ 🎀

あるはず → getBy... 😤
無いのが正解 → queryBy... 🕊️
あとで出る → findBy... ⏳✨

次の第155章は、これを使って カウンターアプリのテストを書いていく流れだよ〜！🧪💖

今日のゴール 🎯​

まず結論：3つの性格を一言で 🧠💡​

ちゃんと整理：戻り値・エラー・待つかどうか 📌​

使い分けフローチャート（これだけ見ればOK）🗺️✨​

まず覚える「型」：全部 “By何々” の前に付くだけ 🧩​

例で体に入れよう 💪💕（screen を使うのが基本）​

サンプル部品：最初は「Loading...」→あとで「Done!」になる 🐣​

1) getBy...：今あるはずを取る ✅😤​

2) findBy...：あとで出てくるはずを待つ ✅⏳✨​

3) queryBy...：無いことを確認する ✅🕵️‍♀️​

よくあるハマりどころ集 🧯😵‍💫​

❌ 1) “待つべき場面” で getBy... を使う​

❌ 2) “無いことを確認したい” のに getBy...​

❌ 3) “複数ある” のに getBy... / queryBy...​

ちょい発展：待ち方のイメージ図 🧠⏳​

ミニ練習（5分）✍️🌸​

まとめ 🎀​