1// Button.test.tsx
2import { render, screen } from "@testing-library/react"
3import userEvent from "@testing-library/user-event"
4import { Button } from "./Button"
5
6test("送信ボタンのクリック時に、クリックイベントに指定したコールバック関数が呼び出される", async () => {
7  const user = userEvent.setup() // userEventのインスタンスを作成
8  const handleClickMock = vi.fn() // vi.fnでモック関数を作成
9  render(<Button onClick={handleClickMock}>送信</Button>) // 作成したモック関数をイベントハンドラとして仕込む
10
11  await user.click(screen.getByRole("button", { name: "送信" })) // 送信ボタンのクリックを再現
12
13  expect(handleClickMock).toHaveBeenCalled() // 呼び出しを確認
14})

1// fetchUserData.ts
2export async function fetchUserData(userId: string): Promise<Response | Error> {
3  try {
4    const res = await fetch(`/api/users/${userId}`)
5    return await res.json()
6  } catch {
7    throw new Error()
8  }
9}

1// fetchUserData.test.ts
2import { fetchUserData } from "./fetchUserData"
3
4test("ID:1のユーザ情報を取得したら、ID:1のユーザデータが返される", async () => {
5  // vi.spyOnでfetchをモック
6  const spy = vi.spyOn(global, "fetch").mockResolvedValue({
7    json: () => Promise.resolve({ id: "1", name: "太郎" }),
8  } as Response)
9
10  const userData = await fetchUserData("1") // fetchUserDataを実行
11
12  expect(spy).toHaveBeenCalledWith("/api/users/1") // fetchの呼び出しを確認
13  expect(userData).toEqual({ id: "1", name: "太郎" }) // 返り値を確認
14})

1// user.ts
2import axios from "axios"
3
4export async function getUser(userId: string) {
5  try {
6    const res = await axios.get(`/api/users/${userId}`)
7    return res.data
8  } catch {
9    throw new Error("ユーザーデータの取得に失敗しました")
10  }
11}
12
13export async function createUser(userId: string) {
14  try {
15    const res = await axios.post(`/api/users/${userId}`)
16    return res.data
17  } catch {
18    throw new Error("ユーザー登録に失敗しました")
19  }
20}
21
22export async function deleteUser(userId: string) {
23  try {
24    const res = await axios.delete(`/api/users/${userId}`)
25    return res.data
26  } catch {
27    throw new Error("ユーザーデータの削除に失敗しました")
28  }
29}

1// user.test.ts
2import axios from "axios"
3import { getUser, createUser, deleteUser } from "./user"
4
5vi.mock(import("axios"), async (importOriginal) => {
6  const mod = await importOriginal()
7  return {
8    ...mod,
9    default: {
10      get: vi.fn().mockResolvedValue({
11        data: { id: "1", name: "太郎" },
12      }),
13      post: vi.fn().mockResolvedValue({
14        data: { id: "1", name: "太郎", created: true },
15      }),
16      delete: vi.fn().mockResolvedValue({
17        data: { success: true },
18      }),
19    },
20  }
21})
22
23describe("ユーザー処理に関するテスト", () => {
24  test("getUserが成功したら、ユーザーデータを返す", async () => {
25    const result = await getUser("1")
26
27    expect(axios.get).toHaveBeenCalledWith("/api/users/1")
28    expect(result).toEqual({ id: "1", name: "太郎" })
29  })
30
31  test("createUserが成功したら、ユーザーデータを返す", async () => {
32    const result = await createUser("1")
33
34    expect(axios.post).toHaveBeenCalledWith("/api/users/1")
35    expect(result).toEqual({ id: "1", name: "太郎", created: true })
36  })
37
38  test("deleteUserが成功したら、成功レスポンスを返す", async () => {
39    const result = await deleteUser("1")
40
41    expect(axios.delete).toHaveBeenCalledWith("/api/users/1")
42    expect(result).toEqual({ success: true })
43  })
44
45  test("モックの振る舞いを動的に変更できる", async () => {
46    // vi.mockedを使用して、axiosの振る舞いを変更
47    vi.mocked(axios.get).mockResolvedValue({
48      data: { id: "2", name: "花子" },
49    })
50
51    const result = await getUser("2")
52
53    expect(axios.get).toHaveBeenCalledWith("/api/users/2")
54    expect(result).toEqual({ id: "2", name: "花子" })
55  })
56
57  test("エラーケースのテスト", async () => {
58    // vi.mockedを使用して、エラーを投げるように設定
59    vi.mocked(axios.get).mockRejectedValue(new Error())
60
61    await expect(getUser("3")).rejects.toThrow(
62      "ユーザーデータの取得に失敗しました"
63    )
64    expect(axios.get).toHaveBeenCalledWith("/api/users/3")
65  })
66})

1// vi.mock内でvi.fnを用いてaxios.getを置き換えている
2vi.mock(import("axios"), async (importOriginal) => {
3  const mod = await importOriginal()
4  return {
5    ...mod,
6    default: {
7      get: vi.fn().mockResolvedValue({
8        data: { id: "1", name: "太郎" },
9      }),
10    },
11  }
12})
13
14test("モックの振る舞いを動的に変更できる", async () => {
15  // vi.mockedを使用して、axiosの振る舞いを変更
16  const spy = vi.mocked(axios.get).mockResolvedValue({
17    data: { id: "2", name: "花子" },
18  })
19
20  const result = await getUser("2")
21
22  expect(axios.get).toHaveBeenCalledWith("/api/users/2")
23  expect(result).toEqual({ id: "2", name: "花子" })
24
25  spy.mockReset() // モック内容をリセット
26
27  expect(axios.get).not.toHaveBeenCalled() // 呼び出しのリセットを確認
28  expect(axios.get("3")).toEqual(undefined) // axios.getを呼び出してもundefinedが返る
29})

1describe("ユーザー処理に関するテスト", () => {
2  // 各テスト後にresetMockを行う
3  afterEach(() => {
4    vi.resetAllMocks()
5  })
6
7  test("テスト1", () => {})
8  test("テスト2", () => {})
9  test("テスト3", () => {})
10})

1// calc.ts
2export function add(a, b) {
3  return a + b
4}
5
6// calc.test.ts
7import * as calc from "./calc"
8
9test("商品の合計金額が正しく計算される", () => {
10  const spy = vi.spyOn(calc, "add")
11
12  const total = calc.add(1, 2)
13
14  expect(spy).toHaveBeenCalledWith(1, 2)
15})

1import { add } from "./calc"
2
3vi.mock("./calc.ts", { spy: true })
4
5test("add関数の実行を確認", () => {
6  add(1, 2)
7
8  expect(add).toHaveBeenCalledWith(1, 2)
9})