Как вызвать событие в заглушке?[Вю тест-Utils]

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

Вы можете использовать модификатор .native в компоненте my-custom-form для прослушивания собственного события DOM вместо пользовательского события submit.Из документов ..

Могут быть случаи, когда вы хотите напрямую прослушивать собственное событие в корневом элементе компонента.В этих случаях вы можете использовать модификатор .native для v-on.

Так что в вашем случае должно работать следующее:

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