How to trigger an event in stub? [vue-test-utils]
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
6
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?
vue.js jestjs vue-test-utils
edited Nov 23 '18 at 15:21
skyboyer
4,28811333
asked Nov 23 '18 at 13:28
DanielDaniel
254216
add a comment |
6
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?
vue.js jestjs vue-test-utils
edited Nov 23 '18 at 15:21
skyboyer
4,28811333
asked Nov 23 '18 at 13:28
DanielDaniel
254216
add a comment |
6
6
6
2
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?
vue.js jestjs vue-test-utils
edited Nov 23 '18 at 15:21
skyboyer
4,28811333
asked Nov 23 '18 at 13:28
DanielDaniel
254216
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?
vue.js jestjs vue-test-utils
vue.js jestjs vue-test-utils
edited Nov 23 '18 at 15:21
skyboyer
4,28811333
asked Nov 23 '18 at 13:28
DanielDaniel
254216
edited Nov 23 '18 at 15:21
skyboyer
4,28811333
asked Nov 23 '18 at 13:28
DanielDaniel
254216
edited Nov 23 '18 at 15:21
skyboyer
4,28811333
edited Nov 23 '18 at 15:21
skyboyer
4,28811333
edited Nov 23 '18 at 15:21
skyboyer
4,28811333
4,28811333
asked Nov 23 '18 at 13:28
DanielDaniel
254216
asked Nov 23 '18 at 13:28
DanielDaniel
254216
asked Nov 23 '18 at 13:28
DanielDaniel
254216
254216
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
4
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
.nativemodifier forv-on.
So the following should work in your case ..
<my-custom-form @submit.native.prevent="save"></my-custom-form>
answered Nov 23 '18 at 13:37
Husam IbrahimHusam Ibrahim
3,363518
Actually i'm doing<form @submit.prevent="$emit('submit')"> ... </form>but it doesn't work. Now i tested<my-custom-form @submit.native.prevent="save"></my-custom-form>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
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 at 0:13
1
Looks like you're supposed to use it likewrapper.find('my-custom-form-stub').vm.$emit('submit')
– writofmandamus
Jan 23 at 0:16
|
show 1 more comment
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53447616%2fhow-to-trigger-an-event-in-stub-vue-test-utils%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
4
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
.nativemodifier forv-on.
So the following should work in your case ..
<my-custom-form @submit.native.prevent="save"></my-custom-form>
answered Nov 23 '18 at 13:37
Husam IbrahimHusam Ibrahim
3,363518
Actually i'm doing<form @submit.prevent="$emit('submit')"> ... </form>but it doesn't work. Now i tested<my-custom-form @submit.native.prevent="save"></my-custom-form>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
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 at 0:13
1
Looks like you're supposed to use it likewrapper.find('my-custom-form-stub').vm.$emit('submit')
– writofmandamus
Jan 23 at 0:16
|
show 1 more comment
4
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
.nativemodifier forv-on.
So the following should work in your case ..
<my-custom-form @submit.native.prevent="save"></my-custom-form>
answered Nov 23 '18 at 13:37
Husam IbrahimHusam Ibrahim
3,363518
Actually i'm doing<form @submit.prevent="$emit('submit')"> ... </form>but it doesn't work. Now i tested<my-custom-form @submit.native.prevent="save"></my-custom-form>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
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 at 0:13
1
Looks like you're supposed to use it likewrapper.find('my-custom-form-stub').vm.$emit('submit')
– writofmandamus
Jan 23 at 0:16
|
show 1 more comment
4
4
4
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
.nativemodifier forv-on.
So the following should work in your case ..
<my-custom-form @submit.native.prevent="save"></my-custom-form>
answered Nov 23 '18 at 13:37
Husam IbrahimHusam Ibrahim
3,363518
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
.nativemodifier forv-on.
So the following should work in your case ..
<my-custom-form @submit.native.prevent="save"></my-custom-form>
answered Nov 23 '18 at 13:37
Husam IbrahimHusam Ibrahim
3,363518
edited Nov 23 '18 at 15:19
answered Nov 23 '18 at 13:37
Husam IbrahimHusam Ibrahim
3,363518
answered Nov 23 '18 at 13:37
Husam IbrahimHusam Ibrahim
3,363518
answered Nov 23 '18 at 13:37
Husam IbrahimHusam Ibrahim
3,363518
3,363518
Actually i'm doing<form @submit.prevent="$emit('submit')"> ... </form>but it doesn't work. Now i tested<my-custom-form @submit.native.prevent="save"></my-custom-form>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
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 at 0:13
1
Looks like you're supposed to use it likewrapper.find('my-custom-form-stub').vm.$emit('submit')
– writofmandamus
Jan 23 at 0:16
|
show 1 more comment
Actually i'm doing<form @submit.prevent="$emit('submit')"> ... </form>but it doesn't work. Now i tested<my-custom-form @submit.native.prevent="save"></my-custom-form>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
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 at 0:13
1
Looks like you're supposed to use it likewrapper.find('my-custom-form-stub').vm.$emit('submit')
– writofmandamus
Jan 23 at 0:16
Actually i'm doing
<form @submit.prevent="$emit('submit')"> ... </form> but it doesn't work. Now i tested <my-custom-form @submit.native.prevent="save"></my-custom-form> and it worked for me. Edit your answer please– Daniel
Nov 23 '18 at 13:54
Actually i'm doing
<form @submit.prevent="$emit('submit')"> ... </form> but it doesn't work. Now i tested <my-custom-form @submit.native.prevent="save"></my-custom-form> 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
@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
1
The first method works in the application, only in the unit tests doesn't works
– Daniel
Nov 23 '18 at 13:58
The first method works in the application, only in the unit tests doesn't works
– Daniel
Nov 23 '18 at 13:58
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 at 0:13
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 at 0:13
1
1
Looks like you're supposed to use it like
wrapper.find('my-custom-form-stub').vm.$emit('submit')– writofmandamus
Jan 23 at 0:16
Looks like you're supposed to use it like
wrapper.find('my-custom-form-stub').vm.$emit('submit')– writofmandamus
Jan 23 at 0:16
|
show 1 more comment
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53447616%2fhow-to-trigger-an-event-in-stub-vue-test-utils%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
