vue-test-utils에서 마우스 오버 이벤트를 테스트하는 중

vue-test-utils에서 마우스 오버 이벤트를 테스트하는 중

마우스 오버에 따라 v-card-actions를 표시하는 @mouseover 및 @mouseleave 이벤트에 대한 단위 테스트를 하려고 합니다.vuejs2 웹 팩애플리케이션에서 vue-test-utils를 사용하고 있습니다.다음은 웹에서 찾은 것입니다.vue-utlis 마우스 클릭 예시입니다.도와주시는 분들께 미리 감사드립니다.

다음은 내 코드 실제 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");
    });

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();
        });
    });
});

그await키워드를 사용하면 트리거가 완료될 때까지 기다릴 수 있습니다.

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

async또한 클로징을 추가해야 합니다.

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

불행히도 나는 Lars의 대답에 대해 언급할 수 없다.의사는 nextTick이 필요하지 않다고 말합니다.

Vue 테스트 유틸리티는 이벤트를 동기적으로 트리거합니다.따라서 Vue.nextTick은 필요하지 않습니다.

- 출처 : https://vue-test-utils.vuejs.org/guides/dom-events.html#important

언급URL : https://stackoverflow.com/questions/50410059/testing-mouseover-event-in-vue-test-utils