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