Vue.js+Element Plus：el-dropdown组件测试无法触发菜单问题

问题排查 #

你的测试代码存在几个关键问题：

• 错误绑定了ElTooltip组件实例，但实际组件使用的是ElDropdown，二者逻辑完全不相关
• 触发元素类名错误，ElDropdown的触发容器类名是.el-dropdown__trigger而非.el-tooltip__trigger
• 断言的content.open不属于ElDropdown的状态，无法反映下拉菜单的展开情况

修正后的测试代码 #

import { mount } from "@vue/test-utils";
import { nextTick } from "vue";
import { describe, it, expect, vi } from "vitest";
import EntryCardFooterDropdown from "../EntryCardFooterDropdown.vue";
import { ElDropdown } from "element-plus";

describe('EntryCardFooterDropdown', () => {
  it('should expand dropdown menu on mouseenter', async () => {
    const wrapper = mount(EntryCardFooterDropdown)
    await nextTick()

    // 获取ElDropdown组件实例
    const dropdown = wrapper.findComponent(ElDropdown).vm as InstanceType<typeof ElDropdown>
    // 启用假定时器处理下拉菜单的延迟展开逻辑
    vi.useFakeTimers();

    const triggerElm = wrapper.find('.el-dropdown__trigger');
    // 初始状态断言：菜单未展开
    expect(dropdown.showDropdown).toBe(false);
    
    // 模拟鼠标进入触发元素
    await triggerElm.trigger('mouseenter');
    // 执行所有待处理的定时器任务
    vi.runAllTimers();
    // 等待DOM更新完成
    await nextTick();

    // 断言菜单已展开（两种方式可选）
    expect(dropdown.showDropdown).toBe(true);
    expect(wrapper.find('.el-dropdown-menu').isVisible()).toBe(true);
  })
})

关键修正说明 #

• 切换到ElDropdown组件实例，通过其内置的showDropdown属性判断菜单状态
• 修正触发元素的选择器，匹配ElDropdown的官方DOM结构
• 触发事件后执行定时器并等待nextTick，确保组件状态和DOM同步更新
• 支持两种断言方式：组件状态断言更直接，DOM可见性断言更贴近用户实际感知

内容的提问来源于stack exchange，提问作者Ali Arda Orhan