Как вызвать событие в заглушке? [Вю тест-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>

Answer 2

От @writofmandamus в комментариях к принятому ответу предоставлен более общий ответ использования, так как изменение привязки события к .native может быть невозможно или желательно.

Вы можете создать событие из заглушки компонента с помощью:

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