在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>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} from "@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>
1
782
![ThinkPHP5快速开发企业站点[全程实录]](https://img.php.cn/upload/course/000/000/068/6253d918a3ce7278.png)
收藏
问题在于当使用组合API时，挂载选项（因此也包括$route和$router的模拟）不会被考虑。
例如，当你查看路由的
matched属性（在组件中），数组将为空，因为没有匹配的路由，也没有可用的路由上下文。但他们更新了文档，你可以在那里看到一个例子。不知道有没有一种非命令式的方式来模拟每个测试...
使用组合API的模拟路由