使用 Jest / VueJS 的按钮单击测试失败

Question

我试图在图像上启动按钮点击，但是当运行测试时，它一直出错 find did not return cal-modal, cannot call trigger() on empty Wrapper

我做错了什么？下面非常非常简化的代码：

CALENDAR.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>

</template>

测试文件

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')
  })

Answer 1

尝试使用 ref 选择器或 id 选择器。像这样..

wrapper.find({ ref: 'cal-modal' })

或者

wrapper.find('#cal-modal')

使用 Jest / VueJS 的按钮单击测试失败

Button Click Test Failing with Jest / VueJS

vue.js

jestjs

vue-test-utils