Vuejs2 如何测试需要对子源事件作出反应的Vue组件?

Vuejs2 如何测试需要对子源事件作出反应的Vue组件?,vuejs2,jestjs,Vuejs2,Jestjs,我很难弄清楚如何测试需要对子源事件作出反应的单文件Vue组件 我有一个图库组件,它有任意数量的子卡组件,并且必须跟踪所选的卡。单击卡片时,它会发出一个自定义事件(卡片单击),画廊会通过调用select()函数来侦听和响应该事件。Select()具有一些基于是否按下Shift或Meta键的逻辑。我已经创建了以下这些组件的简化版本: 库组件 <template> <div class="gallery"> <card v-for="(item, index)

我很难弄清楚如何测试需要对子源事件作出反应的单文件Vue组件

我有一个图库组件,它有任意数量的子卡组件,并且必须跟踪所选的卡。单击卡片时,它会发出一个自定义事件(卡片单击),画廊会通过调用select()函数来侦听和响应该事件。Select()具有一些基于是否按下Shift或Meta键的逻辑。我已经创建了以下这些组件的简化版本:

库组件

<template>
  <div class="gallery">
    <card v-for="(item, index) in items"
      :id="item.id"
      :key="item.id"
      class="galleryCard"
      @card-click="select(item.id, $event)">
      <h2>{{ item.title }}</h2>
    </card>
  </div>
</template>

<script>
export default {
  name: "Gallery",
  props: {
    items: {
      required: true,
      type: Array,
    },
  },
  methods: {
    select: function(id, event) {
      if(event.metaKey) {
        console.log('meta + click')
      } else {
        if (event.shiftKey) {
          console.log('shift + click')
        } else {
          console.log('click')
        }
      }
    },
  },
}
</script>
<template>
  <article :id="id" @click="handleSelect($event)" class="card">
    <slot/>
  </article>
</template>

<script>
export default {
  name: "Card",
  props: {
    id: {
      type: String,
      default: "",
    },
  },
  methods: {
    handleSelect: function(event) {
      this.$emit("card-click", event)
    },
  },
}
</script>
import { createLocalVue, mount } from "@vue/test-utils"
import Gallery from "@/Gallery.vue"
import Card from "@/Card.vue"

const localVue = createLocalVue()

let wrapper
let items = [
  { id: "1", title: "First" },
  { id: "2", title: "Second" },
  { id: "3", title: "Third" },
]

describe("Gallery.vue", () => {
  beforeEach(() => {
    wrapper = mount(Gallery, {
      localVue,
      propsData: {
        items: items,
      },
      stubs: ["card"],
    })
  })

  const selectStub = jest.fn();

  it("selects the correct items", () => {
    wrapper.setMethods({ select: selectStub })

    const card1 = wrapper.findAll(".galleryCard").at(0)
    const card2 = wrapper.findAll(".galleryCard").at(1)

    card1.trigger('click')
    card2.trigger('click', {
      shiftKey: true
    })

    console.log(selectStub.mock)
  })
})
selectStub.mock的所有属性(调用、实例和时间戳)均为空。我还尝试过发出
卡点击
事件
wrapper.vm.$emit()
函数,但它不会触发选择

如何测试Gallery
select()
方法以确保它正确响应子源事件