Vitest を使用して Vue-Router をモックするロジックを理解しようとしています。

これを行うために、非常に単純なプロジェクトでテスト環境をセットアップしてシミュレーションしてみました。 Vue-Test-Utils の公式ドキュメントに従おうとすると、常にエラーが発生します。彼らが Jest を使用しているからかどうかはわかりません。

本物の vue-router を使用すると問題は解決しましたが、vue-router をモックしたほうが良いと思います。

以下では、まずプロジェクトのソース コードを説明し、次に受け取ったエラーを説明します。

Home.vue

<スクリプト セットアップ lang="ts"> 「vue」から {onMounted} をインポートします。 「vue-router」から {useRoute} をインポートします。 const ルート = useRoute() onMounted(() => { コンソール.ログ(ルート.クエリ) }) 
      <テンプレート>
       
ホーム
 

Home.spec.ts

import {expect, it, vi} from "vitest"; 「@vue/test-utils」から {mount} をインポートします。 ホームを「../src/components/Home.vue」からインポートします。 it('ホームテスト', async () => { const ラッパー = mount(Home) Expect(wrapper.exists()).toBeTruthy() })

vite.config.ts

///  「vite」から {defineConfig} をインポートします 「@vitejs/plugin-vue」から vue をインポートします // https://vitejs.dev/config/ デフォルトのdefineConfigをエクスポート({ プラグイン: [vue()]、 テスト： { 環境: 'jsdom', include: ['./test/**/*.spec.ts']、 除外: ['node_modules', 'dist'], グローバル: true } })

私のエラーメッセージは次のとおりです: ..

試したこと

以下のような vue-router をシミュレートしてみました

vi.mock('vue-router', () => ({ useRoute: vi.fn()、 }))
または単に
 
vi.mock('vue-router')
 
これが私の最後の Home.spec.ts ファイルです
 
import {expect, it, vi} from "vitest"; 「@vue/test-utils」から {mount} をインポートします。 ホームを「../src/components/Home.vue」からインポートします。 vi.mock('vue-ルーター') it('ホームテスト', async () => { const ラッパー = mount(ホーム, { グローバル： { スタブ: ["ルーターリンク"、"ルータービュー"] } }) Expect(wrapper.exists()).toBeTruthy() })