vitest でtanstack query のdataに任意の値を

Test.md

なるほど 👍 「Vitest で TanStack Query の data に任意の値を設定する方法」を詳しく解説します。 テストのときに API を呼ばずにデータを流し込みたいケースですね。

方法は主に以下の3つです：

---

① queryClient.setQueryData を使う（テストで一番使いやすい）

テスト内で QueryClient を作ってキャッシュにデータをセットします。 その queryClient を VueQueryPlugin に渡せば、コンポーネントはそのデータを即座に data として利用できます。

// UserList.spec.ts
import { mount, flushPromises } from "@vue/test-utils";
import { describe, it, expect } from "vitest";
import { VueQueryPlugin, QueryClient } from "@tanstack/vue-query";
import UserList from "~/components/UserList.vue";

function mountWithVueQuery(component: any, data?: any) {
  const queryClient = new QueryClient();

  if (data) {
    // 任意の値をキャッシュに設定
    queryClient.setQueryData(["users"], data);
  }

  return mount(component, {
    global: {
      plugins: [[VueQueryPlugin, { queryClient }]],
    },
  });
}

describe("UserList.vue with setQueryData", () => {
  it("キャッシュ済みデータを表示できる", async () => {
    const wrapper = mountWithVueQuery(UserList, [
      { id: 1, name: "Alice" },
      { id: 2, name: "Bob" },
    ]);

    // fetch は呼ばれず、キャッシュから即座に描画される
    await flushPromises();

    expect(wrapper.text()).toContain("Alice");
    expect(wrapper.text()).toContain("Bob");
  });
});

✅ API をモックしなくても、直接キャッシュにデータを注入できる。

---

② initialData を使う

コンポーネント内で useQuery の initialData を渡しておく方法。 ただし、これはテスト用というより本番の初期値用に近いです。

<script setup lang="ts">
import { useQuery } from "@tanstack/vue-query";
import { fetchUsers } from "~/composables/useApi";

const { data } = useQuery({
  queryKey: ["users"],
  queryFn: fetchUsers,
  initialData: [{ id: 999, name: "Initial User" }],
});
</script>

✅ テスト中に初期データが表示される。 ❌ ただし コンポーネント側を変更する必要がある。

---

③ queryClient.prefetchQuery を使う

テスト前に prefetchQuery でデータをキャッシュに登録しておく方法。 queryFn をモックすれば API を叩かずに済みます。

import { QueryClient } from "@tanstack/vue-query";
import { fetchUsers } from "~/composables/useApi";
import { vi } from "vitest";

vi.mock("~/composables/useApi", () => ({
  fetchUsers: vi.fn().mockResolvedValue([
    { id: 100, name: "Prefetched User" }
  ]),
}));

const queryClient = new QueryClient();
await queryClient.prefetchQuery({
  queryKey: ["users"],
  queryFn: fetchUsers,
});

✅ SSR/プリフェッチと同じ流れをテストできる。

---

結論

• テストで任意のデータをすぐ表示させたい → queryClient.setQueryData
• 本番でも初期値を持たせたい → initialData
• SSRや事前取得の流れをテストしたい → prefetchQuery

---

👉 一番便利なのは queryClient.setQueryData で、Vitest ではモックを使わなくても簡単に値を差し込めます。

---

質問です ✨ あなたがやりたいのは

• 「API をモックせずにテストでダミーデータを表示したい」ケースですか？
• それとも「API モックを使って非同期処理込みでテストしたい」ケースですか？