如何在存根中触发事件？ [vue-test-utils]

Question

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

bind()

事件在哪里调用组件方法。效果很好
但是，如果我使用自定义组件，则不会调用component方法。

// 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

如何解决？

Answer 1

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

  

有时您可能想直接收听本地事件   在组件的根元素上。在这种情况下，您可以使用   .native的{​​{1}}修饰符。

因此以下情况适用于您的情况..

v-on

Answer 2

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

您可以使用以下方法从组件存根发出事件：

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