如何在存根中触发事件?[vue测试实用程序]

Question

我正在尝试测试这样的组件事件：

// template: <form @submit.prevent="save"></form>
const save = jest.fn()
const wrapper = mount(MyComponent, {methods: { save }})
wrapper.find('form').trigger('submit.prevent')
expect(save).toBeCalled() // Called successfully

事件调用组件方法的位置。它工作得很好
但如果我使用自定义组件，组件方法就不叫

// template: <my-custom-form @submit="save"></my-custom-form>
const save = jest.fn()
const wrapper = mount(MyComponent, {methods: { save }, stubs: ['my-custom-form']})
wrapper.find('my-custom-form-stub').trigger('submit')
expect(save).toBeCalled() // Expected mock function to have been called, but it was not called.

如何解决？

Answer 1

@writofmandamus在接受答案的注释中提供了一个更通用的答案，因为更改事件绑定到.native可能是不可能或不希望的。

您可以使用从组件存根发出事件

wrapper.find('my-custom-component-stub').vm.$emit('custom-event');

Answer 2

您可以在my-custom-form组件上使用.native修饰符来侦听本机DOM事件，而不是自定义submit事件。从文档。。

有时您可能希望直接收听本机事件在组件的根元素上。在这些情况下，您可以使用CCD_ 6的CCD_ 5修饰符。

因此以下内容应适用于您的情况。。

<my-custom-form @submit.native.prevent="save"></my-custom-form>

编辑：有关更好的解决方案，请参阅@writofmandamus的评论和@JaredMcAteer的回答。