タイトルからすると、これは可能でしょうか？
ヘッダーとユーザーを次のページにリダイレクトするボタンを含む、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 ライブラリですが、テストを実行できないようです。ルーターが使用できないことを示します。
@tao の提案に基づいて、HomeView でクリック イベントをテストするのは良いテストではないことに気づきました (アプリではなくライブラリをテストする)。そのため、テスト ButtonRouterLink を追加して、 to パラメータを使用して、RouterLink を正しく Vue します:
リーリー空の HTML 文字列をレンダリングします""
あまり役に立たない Vue 警告が表示されます (予期されるタイプが指定されていません):
ああああ
P粉7594512552024-03-28 00:46:02
これは可能です。
あなたの例と公式の例の間には重要な違いがあります。テスト対象のコンポーネントでは、RouterLink を使用する (または router.push## を使用する) のではなく、中間コンポーネントに配置しています。 ＃ ボタン）。
これにより単体テストはどう変わるでしょうか?
最初の問題は、子コンポーネントを空のコンテナに置き換える
shallowMount を使用していることです。あなたの場合、これは、ButtonRouterLink に RouterLink が含まれなくなり、クリック イベントを処理せず、クリック イベントを受信するだけであることを意味します。
この問題を解決するためのオプションは次のとおりです:
a)
mount を使用し、これを単体テストではなく統合テストに変更します
b) この関数のテストを ButtonRouterLink の任意の :to が { name: to } に正しく変換され、RouterLink に渡されることをテストしたら、これらの :to が、それらを使用するコンポーネントの <ButtonRouterLink /> に正しく渡されるかどうかをテストする必要があります。
驚いたことに、このテストは失敗し、RouterLinkStub で受信した
:to 属性の値が { name: RouterNames.GAME } ではなく であると主張しています。 'game'、これは ButtonRouterLink に渡す値です。これは、コンポーネントが value を { name: value } に変換しなかったようなものです。
＃＃＃かなり奇妙。
問題は、
がコンポーネントのルート要素であることが判明しました。これは、DOM 内のコンポーネント (
<BottomRouterLink>) が <RouterLinkStub> に置き換えられますが、:to の値は以前のものであることを意味します。そして後者は読まれませんでした。つまり、テンプレートが次のようであればテストは成功します:
リーリー
この問題を解決するには、実際の RouterLink
vue-router から) をインポートし、 it を見つける必要があります。 RouterLinkStub を見つける代わりに。なぜ？ @vue/test-utils は実際のコンポーネントではなくスタブ コンポーネントを見つけるのに十分賢いですが、この方法では .findComponent() は置換された要素のみに一致し、要素には一致しません。 ButtonRouterLink (未処理) の場合はまだ残っています。この時点で、:to の値は、RouterLink が実際に受信した値に解析されています。
完全なテストは次のとおりです:
リーリー