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