You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Vue3 Composition API组件Vitest单元测试插槽警告问题求助

Vue3组件单元测试(Vitest)中Teleport插槽引发Vue警告问题

我使用Vitest为Vue3 Composition API组件编写单元测试,所有测试均能通过,但运行测试时出现Vue警告:
[Vue warn]: Non-function value encountered for default slot. Prefer function slots for better performance

问题出在一段Teleport标签代码中:当store值为true时,该标签会渲染模态框;若注释这段代码或清空插槽内容,警告就会消失。我尝试过对Teleport进行stub,模板分别设置为<div>Hello World</div>和<div><slot></slot></div>,但未能解决问题。

相关代码如下:

<Teleport to="body">
  <Modal v-if="showModal" :is-open="showModal" @close="closeModal">
    <component
      :is="childBlock.component"
      v-for="childBlock in $store.ui.getActiveModalCardContent"
      :key="childBlock._uid"
      :blok="childBlock"
      class="col-span-2"
    />
  </Modal>
</Teleport>

我查阅了该警告的相关资料,但找到的解决方案均基于渲染函数而非模板;应用运行时控制台无任何问题或警告,仅测试时出现。我还尝试过用函数返回传入的数据,但也无效。

请问我是否缺少某些手动导入?或者是否需要使用vi.mock()处理某些内容?我已尝试过两个相关解决方案但未成功。

内容的提问来源于stack exchange,提问作者KatieAdamsDev

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.18 05:40:30