使用Jest测试Bootstrap Vue组件失败，报ReferenceError错误

这问题我之前调试Vue组件测试时也踩过坑！核心原因其实很直白——你在测试代码里调用了localVue.use(BootstrapVue)，但根本没导入BootstrapVue这个包，所以测试环境找不到它，自然抛出未定义的错误。

第一步：补全BootstrapVue的导入语句 #

在你的.spec.js文件顶部，添加BootstrapVue的导入：

import TableSummary from "@/components/TableSummary";
import { createLocalVue, mount } from "@vue/test-utils";
// 新增这行导入，让测试环境能识别BootstrapVue
import BootstrapVue from 'bootstrap-vue'

const localVue = createLocalVue();
localVue.use(BootstrapVue);
// ... 剩下的测试代码

第二步：确保依赖已正确安装 #

如果你的项目还没安装bootstrap-vue和它依赖的bootstrap，先执行安装命令：

# npm 安装方式
npm install bootstrap bootstrap-vue

# 或者 yarn 安装方式
yarn add bootstrap bootstrap-vue

额外的测试代码小问题提醒 #

除了BootstrapVue的问题，你的测试代码里还有两个小细节可能导致后续报错：

• await wrapper.vm.$nextTick 应该写成 await wrapper.vm.$nextTick()，因为$nextTick是一个需要调用的方法，不是属性
• wrapper.find('input').state.isDisabled 写法有误，Vue Test Utils里没有state这个属性，如果你要判断输入框是否禁用，可以用两种方式：

  // 方法1：检查input的disabled属性是否存在
  expect(wrapper.find('input').attributes('disabled')).toBeUndefined();
  // 方法2：直接断言组件的data属性值
  expect(wrapper.vm.isDisabled).toBe(false);
  

按照上面的步骤修改后，BootstrapVue未定义的错误应该就能解决啦！

内容的提问来源于stack exchange，提问作者user13833929