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

为什么@vue/test-utils单元测试中Bootstrap-Vue的b-table被挂载为b-table-stub?

原因说明
  • shallowMount的默认行为是自动将所有识别到的子组件替换为桩组件(stub),标签名会自动加上-stub后缀,目的是隔离当前组件与子组件的逻辑,仅测试当前组件本身。
  • 当你传入注册了BootstrapVue的localVue实例时,测试上下文能识别到b-table、b-pagination等是已注册的子组件,因此会自动打桩。
  • 当你移除localVue配置时,测试上下文没有注册BootstrapVue组件,b-*标签会被识别为普通自定义标签,不会触发自动打桩,因此直接匹配b-table可以命中。
可用解决方案

不需要全部按照b-x-stub格式匹配,推荐以下更简便的处理方案:

  1. 使用组件构造器断言(最推荐)
    直接导入对应BootstrapVue组件,通过findComponent方法匹配,无需关心组件是否被打桩:
import { BTable } from 'bootstrap-vue'
// 测试用例内
expect(wrapper.findComponent(BTable).exists()).toBe(true)
  1. 全局/局部配置取消指定组件打桩
    可以在测试配置文件(如Jest的setup文件)中统一配置所有b-*组件不打桩,无需每个单测单独处理:
// 测试全局配置文件中
import { config } from '@vue/test-utils'
// 逐个配置需要取消打桩的组件
config.stubs['b-table'] = false
config.stubs['b-pagination'] = false

也可以在单个测试用例的shallowMount参数中局部配置:

const wrapper = shallowMount(Foo, {
  localVue,
  stubs: { 'b-table': false }
})
// 之后可直接用 expect(wrapper.contains('b-table')).toBe(true) 断言
  1. 关闭所有自动打桩(不推荐)
    在shallowMount配置中设置stubs: false,会关闭所有子组件的自动打桩,所有子组件都会正常挂载。该方案会增加测试耗时,且会引入子组件的逻辑影响当前组件测试结果,仅在需要测试组件完整渲染树时使用。
const wrapper = shallowMount(Foo, {
  localVue,
  stubs: false
})

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

相关产品推荐
方舟 Agent Plan

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

最近更新时间:2026.10.07 04:15:00