在Vue 3的组合式API单元测试中,发现在onMounted()钩子中未定义$route
P粉668146636
P粉668146636 2023-08-26 08:54:29
[Vue.js讨论组]
<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;">&lt;template&gt; &lt;div&gt;{{ this.$route.params.id }}&lt;/div&gt; &lt;/template&gt; &lt;script lang="ts"&gt; import {defineComponent, onMounted} from 'vue' import {useRoute} from "vue-router"; export default defineComponent({ name: 'Component', setup() { const route = useRoute() onMounted(() =&gt; { console.log(route.params.id) }) return {} } }) &lt;/script&gt;</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 () =&gt; { 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>
P粉668146636
P粉668146636

全部回复(1)
P粉739079318

问题在于当使用组合API时,挂载选项(因此也包括$route和$router的模拟)不会被考虑。

例如,当你查看路由的matched属性(在组件中),数组将为空,因为没有匹配的路由,也没有可用的路由上下文。但他们更新了文档,你可以在那里看到一个例子。

不知道有没有一种非命令式的方式来模拟每个测试...

使用组合API的模拟路由

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号