为什么@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格式匹配,推荐以下更简便的处理方案:
- 使用组件构造器断言(最推荐)
直接导入对应BootstrapVue组件,通过findComponent方法匹配,无需关心组件是否被打桩:
import { BTable } from 'bootstrap-vue' // 测试用例内 expect(wrapper.findComponent(BTable).exists()).toBe(true)
- 全局/局部配置取消指定组件打桩
可以在测试配置文件(如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) 断言
- 关闭所有自动打桩(不推荐)
在shallowMount配置中设置stubs: false,会关闭所有子组件的自动打桩,所有子组件都会正常挂载。该方案会增加测试耗时,且会引入子组件的逻辑影响当前组件测试结果,仅在需要测试组件完整渲染树时使用。
const wrapper = shallowMount(Foo, { localVue, stubs: false })
内容的提问来源于stack exchange,提问作者yasinkuyuk
相关产品推荐
相关产品推荐

