Vue-Test-Utils と Vitest を使用した Vue-Router シミュレーション

Question

<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>

Answer 1

まず、Home.vue の router-link または router-view を確認します。

リーリー

したがって、Home.spec.ts は次のようになります:

リーリー

コメント/提案:

• 説明を使用してテスト コンテキストを定義する
• コンポーネントをマウントするグローバル関数を定義し、複製ではなく再利用します
• 監視とシミュレーションには .spyOn() と .mockImplementation...() を使用します
• AAA [配置、動作、アサート] や GWT [与えられた、いつ、その後] などの構造化された直接的な方法を使用してテストを作成します。私は数年間テストしており、今でも使用していますが、何をテストしているのかを理解するのに役立ちます。
Use
• .toHaveBeenCalled...() モックが期待どおりに動作するかどうかを確認する
• mount() 関数内のスタブは、テンプレートで使用されるコンポーネントに関連している必要があります (したがって、 を使用しない場合はリストに表示されません)スタブとして)
＃＃＃それが役に立てば幸い、 乾杯！