在Jest中使用Bootstrap-Vue出现TypeError错误，求解决方法

当前技术栈：Bootstrap-Vue ^2.23.1、Vue.js + vue/compat ^3.2.45，测试工具为Jest ^29.3.1。在测试中添加BootstrapVue插件时，触发以下错误：

TypeError: Cannot read properties of undefined (reading '$bvConfig')

尝试过@vue/test-utils和@testing-library/vue两种测试方案，均无法解决问题。推测原因是Bootstrap-Vue对Vue 3的支持不完善，求可行的错误规避方案。

测试代码示例 #

@vue/test-utils 版本 #

test("component is visible: ", () => {
    const wrapper = mount(
        AccountingTable,
        {
            global: { plugins: [pinia, i18n, BootstrapVue] },
        },
    );
    expect(wrapper.isVisible()).toBeTruthy();
});

@testing-library/vue 版本 #

test("component is visible: ", () => {
    const wrapper = render(
        AccountingTable,
        {
            global: { plugins: [pinia, i18n, BootstrapVue] },
        },
    );
    expect(wrapper.isVisible()).toBeTruthy();
});

Jest 配置 #

/** @type {import('jest).Config} */
module.exports = {
    preset: "ts-jest",
    testEnvironment: "jsdom",
    testEnvironmentOptions: {
       customExportConditions: ["node", "node-addons"],
    },
    testMatch: ["**/**/*.test.ts"],
    verbose: true,
    moduleNameMapper: {
        '\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': '<rootDir>/mocks/file.mock.js',
    },
    transform: {
        "^.+\.vue$": "@vue/vue3-jest",
    },
};

方法1：全局Mock $bvConfig #

由于Bootstrap-Vue在Vue3 compat环境下无法正确初始化$bvConfig，可在测试中手动注入该属性：

适配@vue/test-utils

test("component is visible: ", () => {
    const wrapper = mount(AccountingTable, {
        global: {
            plugins: [pinia, i18n],
            mocks: {
                $bvConfig: {
                    // 按需添加组件依赖的配置项，示例为通用断点配置
                    breakpoints: ['xs', 'sm', 'md', 'lg', 'xl']
                }
            }
        },
    });
    expect(wrapper.isVisible()).toBeTruthy();
});

适配@testing-library/vue

test("component is visible: ", () => {
    const wrapper = render(AccountingTable, {
        global: {
            plugins: [pinia, i18n],
            mocks: {
                $bvConfig: {
                    breakpoints: ['xs', 'sm', 'md', 'lg', 'xl']
                    // 其他依赖配置按需补充
                }
            }
        },
    });
    expect(wrapper.isVisible()).toBeTruthy();
});

方法2：避免全局注册BootstrapVue插件 #

Bootstrap-Vue 2.x原生不支持Vue3，即使通过vue/compat运行，测试环境下仍可能初始化失败。可跳过全局插件注册，针对组件用到的Bootstrap-Vue组件单独Mock：

// 测试文件顶部
import { config } from '@vue/test-utils';

// 示例：Mock BTable组件
config.global.components = {
    BTable: {
        template: '<div></div>'
    }
};

方法3：调整Jest配置适配vue/compat #

在Jest的moduleNameMapper中添加Vue的正确映射，确保vue/compat被正确解析：

module.exports = {
    // 原有配置...
    moduleNameMapper: {
        // 原有文件mock配置...
        '^vue$': 'vue/dist/vue.esm-bundler.js'
    }
};

同时确认@vue/vue3-jest版本与vue/compat兼容，避免因版本不匹配导致的初始化问题。

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