[英]Testing that a value is passed to a method that emits an event, Vue
I have a Child component that renders buttons based on an array of objects passed as a prop.我有一个子组件,它根据作为道具传递的对象数组呈现按钮。 The value passed to the event handler is an object that looks like this:
{ boxes: 1, cookieQty: 4, id: 'chocChip-4', price: 12 }
.传递给事件处理程序的值是一个 object,如下所示:
{ boxes: 1, cookieQty: 4, id: 'chocChip-4', price: 12 }
。
<ul class="list-items">
<li v-for="(item, index) in items" :key="item.id">
<label :for="item.id" class="label-btn-cookie">{{ title }}</label>
<button
:id="item.cookieid"
v-bind="$attrs"
type="button"
:value="item.cookieQty"
class="cookie-buttons -shadow"
@click="updateSelection(item)"
>
...
...
</button>
methods: {
updateSelection(value) {
this.$emit("click", value);
}
}
In the Parent component, the Child looks like this and 'selectboxSize' takes the $event and then dispatches an action.在 Parent 组件中,Child 看起来像这样,'selectboxSize' 接受 $event 然后调度一个动作。
<CookieSelect
:items="chocChipBoxSizesArray"
:title="chocChip"
data-cookie="chocolateChip"
@click="selectBoxSize($event)"
/>
....
selectBoxSize({ cookieQty }) {
// map the element to an object and use that key to update state
console.log(event);
let element = event.currentTarget.getAttribute("data-cookie");
this.updateBoxSize({ element, cookieQty });
Currently I have a passing test that verifies the button click emits an event.目前我有一个通过测试来验证按钮点击发出一个事件。 What I want to do is to test that 'updateSelection' is in fact called with the value passed.
我想要做的是测试“updateSelection”实际上是用传递的值调用的。
const mockData = {
items: chocChipBoxSizesArray,
title: "ChocolateChip"
};
describe("CookieSelect", () => {
const wrapper = shallowMount(CookieSelect, {
localVue,
propsData: { ...mockData }
});
it("emits click when clicked", () => {
const value = { boxes: 1, cookieQty: 4, id: "chocChip-4", price: 12 };
wrapper.find("button").trigger("click");
expect(wrapper.emitted("click")).toHaveLength(1); // passes
expect(wrapper.emitted("click")).toHaveBeenCalledWith(value); // error
});
...
This is the error I get:这是我得到的错误:
expect(received).toHaveBeenCalledWith(...expected)
Matcher error: received value must be a mock or spy function
Received has type: array
Received has value: [[{"boxes": 1, "cookieQty": 4, "id": "chocChip-4", "price": 12}]]
I've tried spies and mocking a new MouseEvent()
to no avail.我试过间谍和 mocking 一个新的
MouseEvent()
无济于事。
You'd have to setup a spy on updateSelection
in order to verify its calls, and wrapper.emitted()
doesn't do that for you.您必须在
updateSelection
上设置一个间谍以验证其调用,而wrapper.emitted()
不会为您执行此操作。
Use jest.spyOn()
to create a spy on the imported component definition before mounting.在安装之前,使用
jest.spyOn()
在导入的组件定义上创建一个间谍。 Also make sure to await the click
trigger to ensure any side effects from the click have resolved:还要确保等待
click
触发,以确保点击的任何副作用都已解决:
import CookieSelect from '@/components/CookieSelect.vue'
it('emits click when called', async () => {
const updateSelection = jest.spyOn(CookieSelect.methods, 'updateSelection')
const wrapper = shallowMount(CookieSelect)
await wrapper.find('button').trigger('click')
const value = /*...*/
expect(updateSelection).toHaveBeenCalledWith(value)
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.