Vue3集成Bootstrap5时vue-test-utils下拉组件单元测试失败问题

你的问题核心是：单元测试环境没有加载Bootstrap的JS文件，导致其原生DOM交互逻辑（比如点击切换下拉状态）无法触发，从而测试失败。以下是几种可行的解决方法：

方法一：在单个测试文件中直接导入Bootstrap.js #

在测试文件顶部添加Bootstrap JS的导入，确保测试执行前加载其逻辑：

import DropdownTest from '@/components/form/DropdownTest.vue'
import { VueWrapper, flushPromises, mount } from '@vue/test-utils'
import { beforeEach, describe, expect, it } from 'vitest'
// 新增：导入Bootstrap JS
import "bootstrap/dist/js/bootstrap.js";

let wrapper: VueWrapper<any>

beforeEach(async () => {
  wrapper = mount(DropdownTest, {})
  await flushPromises()
})

// 测试用例保持不变
describe('DropdownAction.vue', () => {
  it('opens the dropdown menu', async () => {
    const dropdownButton = wrapper.find('[data-test="selected-action"]')

    expect(dropdownButton.attributes('aria-expanded')).toBe('false');
    await dropdownButton.trigger('click')
    await wrapper.vm.$nextTick()
    await flushPromises()
    expect(dropdownButton.attributes('aria-expanded')).toBe('true');
  })
})

这种方法简单直接，适合只在少数测试中依赖Bootstrap的场景。

方法二：全局配置测试环境，自动加载Bootstrap #

如果多个测试组件都依赖Bootstrap，可以配置Vitest的全局setup文件，避免重复导入：

1. 在项目根目录创建vitest.setup.ts文件：

// vitest.setup.ts
import "bootstrap/dist/js/bootstrap.js";
// 还可以添加其他全局测试依赖，比如Pinia、Router的初始化

2. 在vite.config.ts中配置测试的setup文件：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  test: {
    setupFiles: ['./vitest.setup.ts'],
    // 其他Vitest配置...
  }
})

这样所有测试文件在执行前都会自动加载Bootstrap JS，无需每个文件单独导入。

方法三：手动初始化单个Dropdown实例（更轻量） #

如果你不想全局加载Bootstrap的所有JS逻辑，可以在测试中手动初始化当前组件的Dropdown实例，减少测试环境的副作用：

import DropdownTest from '@/components/form/DropdownTest.vue'
import { VueWrapper, flushPromises, mount } from '@vue/test-utils'
import { beforeEach, describe, expect, it } from 'vitest'
// 导入Bootstrap的Dropdown类
import { Dropdown } from 'bootstrap';

let wrapper: VueWrapper<any>

beforeEach(async () => {
  wrapper = mount(DropdownTest, {})
  // 初始化当前组件的Dropdown
  const dropdownBtn = wrapper.find('[data-test="selected-action"]').element;
  new Dropdown(dropdownBtn);
  await flushPromises()
})

describe('DropdownAction.vue', () => {
  it('opens the dropdown menu', async () => {
    const dropdownButton = wrapper.find('[data-test="selected-action"]')

    expect(dropdownButton.attributes('aria-expanded')).toBe('false');
    await dropdownButton.trigger('click')
    await wrapper.vm.$nextTick()
    expect(dropdownButton.attributes('aria-expanded')).toBe('true');
  })
})

这种方法只初始化需要测试的Dropdown组件，避免全局加载Bootstrap可能带来的其他DOM监听副作用。

关于你提到的vue-test-utils Plugins功能 #

需要说明的是，vue-test-utils的plugins选项是用来注册Vue插件（比如Pinia、Vue Router这类Vue生态的插件）的，而Bootstrap5的JS是原生DOM库，并非Vue插件，所以这个选项并不适用于加载Bootstrap JS。你需要通过上述导入或手动初始化的方式来解决问题。

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