Nuxt3+VitestでnavigateTo()をモック化する

結論

vi.stubGlobal()を使います。
vi.spyOn()やvi.mock()も試したがうまくいきませんでした。
ベストプラクティスではないかもしれないが参考になれば幸いです。

前提

unplugin-auto-importは導入済み
（詳しくは参考ページをご覧ください。）

コード例

ホームボタンをクリックしたらトップページに遷移するような挙動のテストを行う場合

test.spec.ts

import { vi } from 'vitest'

const mock = vi.fn();
vi.stubGlobal('navigateTo', mock);

describe('Unit Test', () => {

    // wrapperの設定は省略

    it('Home Button Clicked', () => {
        wrapper.find('#home-btn').trigger('clicked');
        expect(mock).toHaveBeenCalledWith('/')
    });
});

navigateTo()とは

Nuxt3でルーティングに使われる関数です。
router.push()の代わりに使うことが推奨されています。
↓公式ドキュメント
https://nuxt.com/docs/api/composables/use-router

Nuxt3では自動インポートされるためimport文を書くことなく使用できます。
一方、Vitestでは自動インポートされないためモック化しなければなりません。
（モック化せずにテストを走らせるとReferenceErrorとなります。）

stubGlobal()とは

公式ドキュメントによると、JSDOMやNodeと関係のないグローバル変数をモック化することでできるらしいです。
↓公式ドキュメント
https://vitest.dev/guide/mocking.html#globals

参考ページ

• Nuxt 3 × Vitest で単体テストの実行環境を作る
  https://zenn.dev/ytr0903/articles/8f4e3c0e529c6f