Vuejs2 在vue测试utils中测试鼠标悬停事件

Vuejs2 在vue测试utils中测试鼠标悬停事件,vuejs2,jestjs,vue-test-utils,Vuejs2,Jestjs,Vue Test Utils,我正在尝试对@mouseover和@mouseleave事件进行单元测试,该事件根据mouseover显示v-card-actions。我正在vuejs2网页包应用程序中使用vue测试UTIL。以下是我在网上找到的:。提前感谢所有提供帮助的人 以下是我的代码实际html模板代码: <v-card class="menuCard pa-1 elevation-2 f-basis-0 my-2" @mouseover="isBlockAct = true" @mouseleave="is

我正在尝试对@mouseover和@mouseleave事件进行单元测试,该事件根据mouseover显示v-card-actions。我正在vuejs2网页包应用程序中使用vue测试UTIL。以下是我在网上找到的:。提前感谢所有提供帮助的人

以下是我的代码实际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>

您需要等待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();
        });
    });
});

不幸的是,我不能评论拉尔斯的回答。 医生说不需要nextTick

Vue测试Utils同步触发事件。因此,不需要Vue.nextTick


-来源:

如果单击某个元素导致数据()发生更改,那么如果您在测试中断言该更改,则需要$nextTick()。
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();
        });
    });
});