VitestのspyOnでfetchをモックしてテストする方法

はじめに

VitestのspyOnでfetchをモックする方法を２つご紹介します。ただし実際にfetchをモックする方法は１つのみで、もう１つはfetchを実行している関数をモックする方法です。

前回axiosでモックする方法を紹介しているので気になる方は参考にしてください。

コード

fetchを使用してユーザーを取得をする関数です。このfetch関数をモックします。

src/fetchers.ts

type User = { name: string; age: number }

export const fetchUsers = async (): Promise<User[]> => {
  const response = await fetch('/users').then((res) => res.json())

  return response
}

取得したユーザーから15歳のユーザーを抽出して返す関数です。今回のテストではこのgetFifteenYearsOldUsersが正しい動作をするか検証します。

src/getFifteenYearsOldUsers.ts

import { fetchUsers } from './fetchers'

export const getFifteenYearsOldUsers = async () => {
  const data = await fetchUsers()

  return data.filter((user) => user.age === 15)
}

fetchをモックしてテストする方法

fetchはグローバル関数のため、vi.spyOn(global, 'fetch')のように指定します。返り値はResponseオブジェクトになるため書き方に注意が必要です。

src/spyOn.test.ts

import { test, expect, vi } from 'vitest'

import { getFifteenYearsOldUsers } from './getFifteenYearsOldUsers'

test('fetchをモックして検証', async () => {
  const mockData = [
    { id: 1, name: 'tarosuke', age: 15 },
    { id: 2, name: 'momo', age: 20 },
    { id: 3, name: 'pac', age: 15 },
  ]

  const spy = vi
    .spyOn(global, 'fetch')
    // fetchの返り値は非同期のResponseオブジェクトになる
    .mockResolvedValue(new Response(JSON.stringify(mockData)))

  expect(await getFifteenYearsOldUsers()).toEqual([
    { id: 1, name: 'tarosuke', age: 15 },
    { id: 3, name: 'pac', age: 15 },
  ])

  spy.mockRestore()
})

fetchUsers関数をモック

こちらはfetchers.tsファイルのfetchUsers関数をモックしてテストしています。fetchをモックしている訳ではないですが、fetchUsers関数はユーザーを取得して返すだけの処理しか書いてないため、こちらでもOKです。

src/spyOn2.test.ts

import { test, expect, vi } from 'vitest'

import * as fetchers from './fetchers'
import { getFifteenYearsOldUsers } from './getFifteenYearsOldUsers'

test('fetchers.tsのfetchUsers関数をモックして検証', async () => {
  const mockData = [
    { id: 1, name: 'tarosuke', age: 15 },
    { id: 2, name: 'momo', age: 20 },
    { id: 3, name: 'pac', age: 15 },
  ]

  const spy = vi.spyOn(fetchers, 'fetchUsers')
    // 非同期でそのままのデータを返すだけ
    .mockResolvedValue(mockData)

  expect(await getFifteenYearsOldUsers()).toEqual([
    { id: 1, name: 'tarosuke', age: 15 },
    { id: 3, name: 'pac', age: 15 },
  ])

  spy.mockRestore()
})

まとめ

VitestのspyOnでfetchをモックしてテストする方法をご紹介しました。前者のfetchをモックしてテスト方法の方が実際の動作に近いためおすすめです。

最後に

GoQSystemでは一緒に働いてくれる仲間を募集中です！

ご興味がある方は以下リンクよりご確認ください。