在 vue-test-utils 中测试鼠标悬停事件答案

【问题标题】：Testing mouseover event in vue-test-utils在 vue-test-utils 中测试鼠标悬停事件
【发布时间】：2018-10-28 19:41:49
【问题描述】：

我正在尝试对根据鼠标悬停显示 v-card-actions 的 @mouseover 和 @mouseleave 事件进行单元测试。我在我的 vuejs2 webpack 应用程序中使用 vue-test-utils。这是我在网上找到的：vue-utlis mouse click exemple。提前感谢任何提供帮助的人

这是我的代码实际的 html 模板代码：

  <v-card class="menuCard pa-1 elevation-2 f-basis-0 my-2" 
@mouseover="isBlockAct = true" @mouseleave="isBlockAct = (!checked? 
false:true)">
 <v-checkbox v-model="checked" id="checkbox" class="diCheckbox ma-0" hide- 
details></v-checkbox>
  <v-card-actions class="myUpHere pa-0">
  <v-layout row :class="{'isAct': isBlockAct, 'isNotAct': !isBlockAct}">
 </v-card>

这是我在我的 spec.js 代码中尝试的：

  describe("Over event", () => {
     it("shows the icons if the card is over or not", () => {
      const wrapper = mount(MenuRepasRecetteCard, {
        propsData: {}
      });
      wrapper.find(".menuCard").trigger("mouseover");
      expect(wrapper.find(".isAct").text()).contain("remove_red_eye");
    });

【问题讨论】：

标签： vuejs2 jestjs vue-test-utils

【解决方案1】：

你需要等待事件被vue处理。

describe("Over event", (done) => {
    it("shows the icons if the card is over or not", () => {
        const wrapper = mount(MenuRepasRecetteCard, {
            propsData: {}
        });
        wrapper.find(".menuCard").trigger("mouseover");
        wrapper.vm.$nextTick( () => {
            expect(wrapper.find(".isAct").text()).contain("remove_red_eye");
            done();
        });
    });
});

【讨论】：

【解决方案2】：

很遗憾，我无法评论 Lars 的回答。文档说不需要 nextTick。：

Vue Test Utils 同步触发事件。因此，不需要 Vue.nextTick。

-来源：https://vue-test-utils.vuejs.org/guides/dom-events.html#important

【讨论】：

如果点击一个元素会导致 data() 发生变化，那么如果您在测试中断言该变化，则需要 $nextTick()。

【解决方案3】：

await关键字可用于等待触发器完成：

await wrapper.find(".menuCard").trigger("mouseover");

async 还需要添加到闭包中：

it("shows the icons if the card is over or not", async () => {

【讨论】：