在Vue 3的組合式API單元測試中，發現在onMounted()鉤子中未定義$route
P粉668146636
2023-08-26 08:54:29
<p>我在我的組件的<code>setup()</code> 函數中有一個<code>onMounted()</code> 鉤子，它訪問了<code>$route. params</code> 屬性，但是當我在測試中模擬<code>$route</code> 物件時，<code>onMounted()<code> 鉤子中的<code>$route</ code> 是<code>undefined</code>，因此拋出了錯誤。以下是代碼：</p>
<p><strong>Component.vue：</strong></p>
<pre class="brush:php;toolbar:false;"><template>
<div>{{ this.$route.params.id }}</div>
</template>
<script lang="ts">
import {defineComponent, onMounted} from 'vue'
import {useRoute} from "vue-router";
export default defineComponent({
name: 'Component',
setup() {
const route = useRoute()
onMounted(() => {
console.log(route.params.id)
})
return {}
}
})
</script></pre>
<p><strong>組件.spec.ts：</strong></p>
<pre class="brush:php;toolbar:false;">import {mount} 從 "@vue/test-utils";
import Component from "@/views/Bundle/Component.vue";
test('test description', async () => {
const mockRoute = {
params: {
id: 1
}
}
const mockRouter = {
push: jest.fn()
}
const wrapper = mount(Component, {
global: {
mocks: {
$route: mockRoute,
$router: mockRouter
}
}
})
await wrapper.find('button').trigger('click')
})</pre>
<p><strong>拋出錯誤：</strong> 類型錯誤：無法讀取未定義的屬性「params」</p>
<p>我使用的是 vue-test-utils 2.0.0-rc.12 版本。 </p>
<p>任何幫助將不勝感激</p>
問題在於使用組合API時，掛載選項（因此也包含$route和$router的模擬）不會被考慮。
例如，當你查看路由的
matched屬性（在元件中），陣列將為空，因為沒有匹配的路由，也沒有可用的路由上下文。但他們更新了文檔，你可以在那裡看到一個例子。不知道有沒有非命令式的方式來模擬每個測試...
使用組合API的模擬路由