Vitest で Vue RouterView/RouterLink をモックする (複合 API)

Question

タイトルからすると、これは可能でしょうか？

ヘッダーとユーザーを次のページにリダイレクトするボタンを含む、Vue アプリケーションの単純なコンポーネントをテストしようとしています。ボタンをクリックしたときにイベント/メッセージがルーターに送信されるかどうかをテストし、宛先ルートが正しいかどうかを確認したいと考えています。

アプリケーションは次のように構成されています:

App.Vue - エントリ コンポーネント

リーリー

router/index.ts - Vue ルーター設定ファイル

リーリー

HomeView.Vue - アプリコンポーネントの RouterView の入口ビュー

リーリー

ButtonRouterLink.vue

リーリー

CompositionAPI と TypeScript を使用していることを考慮すると、Vitest テストでルーターをモックする方法はありますか?

これはテスト ファイル構造の例です (HomeView.spec.ts):

リーリー

複数のメソッドを試しました: vi.mock('vue-router')、vi.spyOn(useRoute,'push')、vue-router-mock ライブラリですが、テストを実行できないようです。ルーターが使用できないことを示します。

更新(15/04/23)

@tao の提案に基づいて、HomeView でクリック イベントをテストするのは良いテストではないことに気づきました (アプリではなくライブラリをテストする)。そのため、テスト ButtonRouterLink を追加して、 to パラメータを使用して、RouterLink を正しく Vue します:

リーリー

空の HTML 文字列をレンダリングします""

リーリー

あまり役に立たない Vue 警告が表示されます (予期されるタイプが指定されていません):

ああああ

Answer 1

これは可能です。

あなたの例と公式の例の間には重要な違いがあります。テスト対象のコンポーネントでは、

RouterLink を使用する (または router.push## を使用する) のではなく、中間コンポーネントに配置しています。 ＃ ボタン）。 これにより単体テストはどう変わるでしょうか?

最初の問題は、子コンポーネントを空のコンテナに置き換える

shallowMount を使用していることです。あなたの場合、これは、ButtonRouterLink に RouterLink が含まれなくなり、クリック イベントを処理せず、クリック イベントを受信するだけであることを意味します。 この問題を解決するためのオプションは次のとおりです:

a)

shallowMount
• の代わりに mount を使用し、これを単体テストではなく統合テストに変更します b) この関数のテストを
ButtonRouterLink
• のテストに移動します。 ButtonRouterLink の任意の :to が { name: to } に正しく変換され、RouterLink に渡されることをテストしたら、これらの :to が、それらを使用するコンポーネントの <ButtonRouterLink /> に正しく渡されるかどうかをテストする必要があります。

この機能を独自のコンポーネントに移動することによって生じる 2 番目の問題は、もう少し微妙です。一般に、ButtonRouterLink の次のテストが機能することが期待されます:

---

リーリー

驚いたことに、このテストは失敗し、RouterLinkStub で受信した

:to

属性の値が { name: RouterNames.GAME } ではなく であると主張しています。 'game'、これは ButtonRouterLink に渡す値です。これは、コンポーネントが value を { name: value } に変換しなかったようなものです。 ＃＃＃かなり奇妙。 問題は、

<RouterLink />

がコンポーネントのルート要素であることが判明しました。これは、DOM 内のコンポーネント (
<BottomRouterLink>) が <RouterLinkStub> に置き換えられますが、:to の値は以前のものであることを意味します。そして後者は読まれませんでした。つまり、テンプレートが次のようであればテストは成功します: リーリー この問題を解決するには、実際の RouterLink

コンポーネント (

vue-router から) をインポートし、 it を見つける必要があります。 RouterLinkStub を見つける代わりに。なぜ？ @vue/test-utils は実際のコンポーネントではなくスタブ コンポーネントを見つけるのに十分賢いですが、この方法では .findComponent() は置換された要素のみに一致し、要素には一致しません。 ButtonRouterLink (未処理) の場合はまだ残っています。この時点で、:to の値は、RouterLink が実際に受信した値に解析されています。 完全なテストは次のとおりです: リーリー

少し注意が必要です。