vue.js - 等待按钮单击以查找元素 - VueJS/Jest

Question

我正在编写一个测试以查看单击按钮后是否弹出模式窗口，并且不确定如何告诉测试等待单击的正确方法。

因此，例如，假设我有一个模式窗口，在单击图像时显示如下：

日历.VUE

<template>

   <div class="col-xs-6 text-right">
       <b-img ref='cal-modal' id='cal-modal' class="cal-icon" @click="displayCal" v-b-modal.date-time-modal src="/static/img/ico.png"></b-img>
    </div>

    <b-modal id="date-time-modal" ref="date-time-modal" hide-footer title="Modal Title">
      <div class="d-block text-center">
         <p>This is a modal window</p>    
      </div>
    </b-modal>

</template>

日历.SPEC.JS

import {createLocalVue, mount} from "@vue/test-utils";
import Calendar from '@/components/Calendar.vue'
import BootstrapVue from "bootstrap-vue";
const localVue = createLocalVue()
localVue.use(BootstrapVue)


  it('display cal', () => {
      const wrapper = mount(Calendar, {localVue});
      wrapper
          .find('#cal-modal')
          .trigger('click')
  })

在寻找“点击”事件发生之前，最好的方法是什么？

标签： vue.jsjestjs