How to trigger an event in stub? [vue-test-utils]

Question

I'm trying to test a component event like this:

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

Where the event calls a component method. It works very well
But if i use a custom component, the component method isn't called

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

How to solve it?

JaredMcAteer · Answer 1 · 2019-10-17T16:57:14.710

31

From @writofmandamus, in the comments of the accepted answer, provided a more general use answer, since changing the event binding to .native may not be possible or desired.

You can emit an event from a component stub with:

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

edited Oct 17 '19 at 16:57

answered Oct 17 '19 at 16:51

JaredMcAteer

21,688
5
49
65

2

Yes, this should be the correct answer, since you don't want to change the component itself. – xbilek18 Nov 28 '19 at 08:17

score 3 · Accepted Answer · edited Jul 15 '22 at 22:19

3

You can use the .native modifier on the my-custom-form component to listen for the native DOM event instead of a custom submit event. From the docs ..

There may be times when you want to listen directly to a native event on the root element of a component. In these cases, you can use the .native modifier for v-on.

So the following should work in your case ..

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

EDIT: See @writofmandamus's comment and @JaredMcAteer's answer below for a better solution.

edited Jul 15 '22 at 22:19

tony19

125,647
18
229
307

answered Nov 23 '18 at 13:37

Husam Ibrahim

6,999
3
16
28

Actually i'm doing `
...
` but it doesn't work. Now i tested `` and it worked for me. Edit your answer please – Daniel Nov 23 '18 at 13:54
@Daniel Okay I'll edit my answer. It's strange though as I expected both methods to work :\ – Husam Ibrahim Nov 23 '18 at 13:56
1

The first method works in the application, only in the unit tests doesn't works – Daniel Nov 23 '18 at 13:58
2

So we can't test using non-native events? I rather not have to change my code to get a test to work. – writofmandamus Jan 23 '19 at 00:13
5

Looks like you're supposed to use it like `wrapper.find('my-custom-form-stub').vm.$emit('submit')` – writofmandamus Jan 23 '19 at 00:16
@writofmandamus That's indeed a better solution. Thanks for sharing. – Husam Ibrahim Jan 24 '19 at 21:17

How to trigger an event in stub? [vue-test-utils]

2 Answers2