Vue-test-utils中@mouseover与@mouseleave事件单元测试问题

看起来你在测试卡片的鼠标交互事件时遇到了几个常见的小问题，我来帮你一步步梳理和修正：

首先先明确你的组件核心逻辑：

• 鼠标悬停.menuCard时，isBlockAct设为true，对应.isAct类生效
• 鼠标离开时，若复选框未勾选，isBlockAct变为false（显示.isNotAct）；若已勾选，则isBlockAct保持true

问题分析 #

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

1. Vue的响应式更新是异步的，触发事件后直接断言，DOM还没来得及完成更新
2. 你用text().contain("remove_red_eye")做断言，但从你贴出的模板看v-layout是空的（可能没贴全代码），而且更可靠的方式是直接检查目标元素的类是否存在，而非文本内容

修正后的测试代码 #

我们用async/await配合$nextTick()来等待DOM更新，同时分场景覆盖不同的交互情况：

import { mount } from '@vue/test-utils'
import MenuRepasRecetteCard from '@/components/MenuRepasRecetteCard.vue'

describe("MenuRepasRecetteCard - Mouse Interaction Tests", () => {
  // 测试鼠标悬停事件
  it("enables isBlockAct and shows .isAct class on mouseover", async () => {
    const wrapper = mount(MenuRepasRecetteCard, { propsData: {} })
    const menuCard = wrapper.find(".menuCard")

    // 触发鼠标悬停事件
    await menuCard.trigger("mouseover")
    // 等待Vue完成DOM更新
    await wrapper.vm.$nextTick()

    // 断言状态更新
    expect(wrapper.vm.isBlockAct).toBe(true)
    // 断言目标类存在
    expect(wrapper.find(".v-layout").classes()).toContain("isAct")
  })

  // 测试未勾选复选框时的鼠标离开事件
  it("disables isBlockAct and shows .isNotAct class on mouseleave (unchecked)", async () => {
    const wrapper = mount(MenuRepasRecetteCard, { propsData: {} })
    const menuCard = wrapper.find(".menuCard")

    // 先触发悬停让状态变为true
    await menuCard.trigger("mouseover")
    await wrapper.vm.$nextTick()

    // 触发鼠标离开事件
    await menuCard.trigger("mouseleave")
    await wrapper.vm.$nextTick()

    expect(wrapper.vm.isBlockAct).toBe(false)
    expect(wrapper.find(".v-layout").classes()).toContain("isNotAct")
  })

  // 测试已勾选复选框时的鼠标离开事件
  it("keeps isBlockAct true and .isAct class on mouseleave (checked)", async () => {
    const wrapper = mount(MenuRepasRecetteCard, { propsData: {} })
    const menuCard = wrapper.find(".menuCard")
    const checkbox = wrapper.find("#checkbox")

    // 先勾选复选框
    await checkbox.setChecked(true)
    await wrapper.vm.$nextTick()

    // 触发悬停
    await menuCard.trigger("mouseover")
    await wrapper.vm.$nextTick()

    // 触发鼠标离开
    await menuCard.trigger("mouseleave")
    await wrapper.vm.$nextTick()

    expect(wrapper.vm.isBlockAct).toBe(true)
    expect(wrapper.find(".v-layout").classes()).toContain("isAct")
  })
})

额外提示 #

• 如果你的v-layout里确实包含remove_red_eye图标，确保图标渲染完成后再断言，比如用wrapper.find(".remove_red_eye").exists()来检查元素是否存在
• 如果你想做更纯粹的黑盒测试，可以不直接访问组件实例的isBlockAct，仅通过DOM类的变化来断言状态
• 确保组件中isBlockAct和checked是在data()中正确声明的响应式数据

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