Vue-Test-Utils と Vitest を使用した Vue-Router シミュレーション
<p>Vitest を使用して Vue-Router をモックするロジックを理解しようとしています。 </p>
<p>これを行うために、非常に単純なプロジェクトでテスト環境をセットアップしてシミュレーションしてみました。 Vue-Test-Utils の公式ドキュメントに従おうとすると、常にエラーが発生します。彼らが Jest を使用しているからかどうかはわかりません。 </p>
<p>本物の vue-router を使用すると問題は解決しましたが、vue-router をモックしたほうが良いと思います。 </p>
<p> 以下では、まずプロジェクトのソース コードを説明し、次に受け取ったエラーを説明します。 </p>
<h3>Home.vue</h3>
<pre class="brush:php;toolbar:false;"><スクリプト セットアップ lang="ts">
「vue」から {onMounted} をインポートします。
「vue-router」から {useRoute} をインポートします。
const ルート = useRoute()
onMounted(() => {
コンソール.ログ(ルート.クエリ)
})
</スクリプト>
<テンプレート>
<div>ホーム</div>
</template></pre>
<h3>Home.spec.ts</h3>
<pre class="brush:php;toolbar:false;">import {expect, it, vi} from "vitest";
「@vue/test-utils」から {mount} をインポートします。
ホームを「../src/components/Home.vue」からインポートします。
it('ホームテスト', async () => {
const ラッパー = mount(Home)
Expect(wrapper.exists()).toBeTruthy()
})</pre>
<h3>vite.config.ts</h3>
<pre class="brush:php;toolbar:false;">/// <reference Types="vitest" />
「vite」から {defineConfig} をインポートします
「@vitejs/plugin-vue」から vue をインポートします
// https://vitejs.dev/config/
デフォルトのdefineConfigをエクスポート({
プラグイン: [vue()]、
テスト： {
環境: 'jsdom',
include: ['./test/**/*.spec.ts']、
除外: ['node_modules', 'dist'],
グローバル: true
}
})</pre>
<h3>私のエラーメッセージは次のとおりです: ..</h3>
<h3>試したこと</h3>
<p>以下のような vue-router をシミュレートしてみました</p>
<pre class="brush:php;toolbar:false;">vi.mock('vue-router', () => ({
useRoute: vi.fn()、
}))
<p>または単に</p>
<pre class="brush:php;toolbar:false;">vi.mock('vue-router')</pre>
<h4>これが私の最後の Home.spec.ts ファイルです</h4>
<pre class="brush:php;toolbar:false;">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()
})</pre></p>
