一日一処: NuxtでVitestを使用する時、useFetchなどNuxtの関数をMock化するには一捻り必要

Mock化

Mock化するときには、多くの場合、その関数自体を行ったり、関数の呼び出しの前にそもそも別のものを定義する必要がある。たとえば、Nuxtの開発環境のように、グローバルで呼び出しがすでに行われている場合は、spyOnなどは使えない。

関数の巻き上げ

vi.hoistedを使用する。

const { useState } = vi.hoisted(() =>({
    useState: fn.vi(),
}))

これでuseStateのMock化はできるが、Nuxtのためにこれを登録し置き換える必要がある。

import { mockNuxtImport } from '@nuxt/test-utils/runtime'

mockNuxtImport('useState', useState)

これにより、useStateの検証もできるし、Mock化もできるようになる。