Vitestで外部モジュールをモックで使用する

概要

Vitestにてモックをしたい場合、その動作内容を外部モジュールから参照したい場合少し工夫が必要だったので記載
特に同じモックを書くときに省略ができるという恩恵が強いです

Vitestのモック

Jestとほぼ同じでモックができます
使い方はネット上にたくさんあるので今回は割愛します
参考記事

モック処理の順番

Vitestではテストをする際に、モックされた処理(mock()等)は記載位置に関係なく最初に巻き上げられ実行されます
かなり優先順位が高く、一例として import文よりも前にmockの中身が処理されます
そのため、mockの中から外部ファイル参照をするには巻き上げ前にインポートする必要があります
参考記事 - Vitest の vi.mock は巻き上げられる

巻き上げ前に処理する関数vi.hoisted

vitestには処理巻き上げ前に特定処理を実行できるvi.hoisted()という関数があり、ここに記述することで事前にインポートできます

// Promiseでインポート処理を記述
const useFakeInfo = await vi.hoisted(async () => {
    const { useFakeInfo } = await import("@/useFakeInfo")
    return useFakeInfo
})

vi.mock("@/useInfo", () => ({
    useFakeInfo,
}))

重要なのはインポートは非同期なのでvi.hoistedも非同期で書く必要があることです
これによってファイル分割できたりと再利用性があがるのでおすすめです

おまけ: Firestoreエミュのテストの例

Firebaseエミュにてテストができますが、Firestoreなどのテスト用インスタンスを事前に取得する必要がありvi.hoistedを使うことでインスタンスを使い回すことができます
以下は例

const { db, testEnv } = await vi.hoisted(async () => {
    // テスト用のFirestoreインスタンスを生成する外部モジュールをインポート
    const { useTestFirestore } = await import("../__test__/useTestFirestore")  
    return useTestFirestore()
})