admin管理员组文章数量:1325332
I have a set of parent & child vue ponents. The child emits an event that the parent handles. I'd like to test that it handles the custom event correctly, but I am stuck.
Parent.vue
<template>
<div id="app" class="container">
<!-- phonebook -->
<ChildComponent
class="row mt-4"
@customEvent="val => customEventHandler(val)"
></ChildComponent>
</div>
</template>
<script>
import ChildComponent from './ponents/ChildComponent.vue'
export default {
name: 'App',
ponents: {
ChildComponent,
},
data() {
return {
test: [1, 2, 3, 4]
};
},
methods: {
customEventHandler(id) {
// removes item `id` from the `test` array
this.test = this.test.filter((item) => item !== id);
},
}
};
</script>
This is one thing I've tried:
Parent.spec.js
import { mount, shallowMount } from "@vue/test-utils";
import Parent from '../../src/Parent.vue';
import ChildComponent from '../../src/ponents/ChildComponent.vue';
describe('customEvent event', () => {
beforeEach(() => {
parent = mount(Parent, {
data() {
return {
test: [1, 2, 3, 4]
};
},
});
});
it('should trigger the customEventHandler method', async() => {
const spy = jest.spyOn(parent.vm, 'customEventHandler');
await parent.findComponent(ChildComponent).trigger('customEvent', 2);
expect(spy).toHaveBeenCalled();
})
})
The test above fails and I'm not sure why.
I've also tried the following tests:
// check what the spy has been called with
expect(spy).toHaveBeenCalledWith(2);
// test the side-effects of the `customEventHandler` method
expect(parent.vm.test.length).toEqual(3)
These also fail - it's as though the event isn't being triggered at all (is that it?), or I'm trying to test something that isn't possible.
Is there an accepted way to test a parent ponent's handling of an event emitted by a child ponent?
I have a set of parent & child vue ponents. The child emits an event that the parent handles. I'd like to test that it handles the custom event correctly, but I am stuck.
Parent.vue
<template>
<div id="app" class="container">
<!-- phonebook -->
<ChildComponent
class="row mt-4"
@customEvent="val => customEventHandler(val)"
></ChildComponent>
</div>
</template>
<script>
import ChildComponent from './ponents/ChildComponent.vue'
export default {
name: 'App',
ponents: {
ChildComponent,
},
data() {
return {
test: [1, 2, 3, 4]
};
},
methods: {
customEventHandler(id) {
// removes item `id` from the `test` array
this.test = this.test.filter((item) => item !== id);
},
}
};
</script>
This is one thing I've tried:
Parent.spec.js
import { mount, shallowMount } from "@vue/test-utils";
import Parent from '../../src/Parent.vue';
import ChildComponent from '../../src/ponents/ChildComponent.vue';
describe('customEvent event', () => {
beforeEach(() => {
parent = mount(Parent, {
data() {
return {
test: [1, 2, 3, 4]
};
},
});
});
it('should trigger the customEventHandler method', async() => {
const spy = jest.spyOn(parent.vm, 'customEventHandler');
await parent.findComponent(ChildComponent).trigger('customEvent', 2);
expect(spy).toHaveBeenCalled();
})
})
The test above fails and I'm not sure why.
I've also tried the following tests:
// check what the spy has been called with
expect(spy).toHaveBeenCalledWith(2);
// test the side-effects of the `customEventHandler` method
expect(parent.vm.test.length).toEqual(3)
These also fail - it's as though the event isn't being triggered at all (is that it?), or I'm trying to test something that isn't possible.
Is there an accepted way to test a parent ponent's handling of an event emitted by a child ponent?
Share Improve this question edited Feb 1, 2021 at 19:09 tony19 139k23 gold badges277 silver badges347 bronze badges asked Feb 1, 2021 at 17:12 ebbishopebbishop 1,9832 gold badges23 silver badges54 bronze badges1 Answer
Reset to default 8Triggering events
trigger()
only works for native DOM events. For custom events, use wrapper.vm.$emit()
(and no need to await
it):
// await parent.findComponent(ChildComponent).trigger('customEvent', 2);
// ^^^^^^^ ❌
parent.findComponent(ChildComponent).vm.$emit('customEvent', 2);
Spying on methods
Vue 2 does not support spying on methods from the wrapper.vm
instance, so the spying needs to be done on the ponent definition (Parent.methods
) before mounting:
// const spy = jest.spyOn(parent.vm, 'customEventHandler');
// ^^^^^^^^^ ❌ not supported in Vue 2
const spy = jest.spyOn(Parent.methods, 'customEventHandler')
const parent = mount(Parent)
demo
Note that Vue 3 does support spying via wrapper.vm
.
本文标签:
版权声明:本文标题:javascript - Testing Vue with Jest: custom event handled by parent, emitted by child component - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742196139a2431115.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论