Vue 3 の結合 API 単体テストで、onMounted() フックに $route が定義されていないことが判明しました

Question

<p>コンポーネントの <code>setup()</code> 関数に <code>onMounted()</code> フックがあり、<code>$route にアクセスします。params</code> ; 属性ですが、テストで <code>$route</code> オブジェクトをモックすると、<code>onMounted()</code> フック コード> の <code>$route</ は次のようになります。 <code>未定義</code> であるため、エラーがスローされます。コードは次のとおりです: </p> <p><strong>Component.vue:</strong></p> <pre class="brush:php;toolbar:false;"><テンプレート> <div>{{ this.$route.params.id }}</div> </テンプレート> <script lang="ts"> 'vue' から {defineComponent, onMounted} をインポートします 「vue-router」から {useRoute} をインポートします。 デフォルトのエクスポートdefineComponent({ 名前: 'コンポーネント'、 設定（） { const ルート = useRoute() onMounted(() => { console.log(route.params.id) }) 戻る {} } }) </script></pre> <p>component.spec.ts:</strong></p> <pre class="brush:php;toolbar:false;">import {mount} from "@vue/test-utils"; 「@/views/Bundle/Component.vue」からコンポーネントをインポートします。 test('テストの説明', async () => { const モックルート = { パラメータ: { ID:1 } } const モックルーター = { プッシュ: jest.fn() } const ラッパー = mount(コンポーネント, { グローバル： { モック: { $route: モックルート、 $router: モックルーター } } }) awaitwrapper.find('button').trigger('click') })</pre> <p><strong>エラーが発生します: </strong> TypeError: 未定義のプロパティ 'params' を読み取れません</p> <p>vue-test-utils バージョン 2.0.0-rc.12 を使用しています。 </p> <p>ご協力いただければ幸いです</p>

Answer 1

問題は、複合 API を使用する場合、マウント オプション (したがって、$route および $router シミュレーションも) が考慮されないことです。

たとえば、ルートの matched プロパティ (コンポーネント内) を確認すると、一致するルートがなく、使用可能なルーティング コンテキストがないため、配列は空になります。しかし、彼らはドキュメントを更新しており、そこで例を見ることができます。

各テストを強制的ではない方法でシミュレートする方法はあるのだろうか...

コンポジション API を使用したモック ルーティング