Trigger Form submit on Button click in Vue Unit Test
Is there a way to actually trigger the submit of a form by clicking on a submit button in a Vue Unit Test?
Lets take this simple component:
<template>
<form @submit.prevent="$emit('submitEventTriggered')">
<button type="submit">Submit Form</button>
</form>
</template>
<script>
export default {}
</script>
You can find a similiar component as an example here.
I want to test that submit.prevent gets triggerd when the button is clicked and therefore the submitEventTriggered is emitted. When I run this in a browser everything works as expected. But the following test fails:
import {shallowMount} from '@vue/test-utils'
import {assert} from 'chai'
import Form from '@/components/Form.vue'
describe.only('Form', () => {
it('button click triggers submit event', () => {
const wrapper = shallowMount(Form)
wrapper.find('[type='submit']').trigger('click')
assert.exists(wrapper.emitted('submitEventTriggered'), 'Form submit not triggered')
})
})
With this output:
AssertionError: Form submit not triggered: expected undefined to exist
If I change the action to trigger submit.prevent on the form directly everything works fine. But then there is actually no test coverage for the submitting via button.
wrapper.find('form').trigger('submit.prevent')
It seems like the trigger function doesnt actually click the button.
Why is this and is there a way to fix it?
vue.js vue-test-utils
asked Nov 19 '18 at 20:34
Marvin RabeMarvin Rabe
2,83921428
add a comment |
Is there a way to actually trigger the submit of a form by clicking on a submit button in a Vue Unit Test?
Lets take this simple component:
<template>
<form @submit.prevent="$emit('submitEventTriggered')">
<button type="submit">Submit Form</button>
</form>
</template>
<script>
export default {}
</script>
You can find a similiar component as an example here.
I want to test that submit.prevent gets triggerd when the button is clicked and therefore the submitEventTriggered is emitted. When I run this in a browser everything works as expected. But the following test fails:
import {shallowMount} from '@vue/test-utils'
import {assert} from 'chai'
import Form from '@/components/Form.vue'
describe.only('Form', () => {
it('button click triggers submit event', () => {
const wrapper = shallowMount(Form)
wrapper.find('[type='submit']').trigger('click')
assert.exists(wrapper.emitted('submitEventTriggered'), 'Form submit not triggered')
})
})
With this output:
AssertionError: Form submit not triggered: expected undefined to exist
If I change the action to trigger submit.prevent on the form directly everything works fine. But then there is actually no test coverage for the submitting via button.
wrapper.find('form').trigger('submit.prevent')
It seems like the trigger function doesnt actually click the button.
Why is this and is there a way to fix it?
vue.js vue-test-utils
asked Nov 19 '18 at 20:34
Marvin RabeMarvin Rabe
2,83921428
1
This seems to me like a bug. I reported it here: github.com/vuejs/vue-test-utils/issues/1030
– Marvin Rabe
Nov 19 '18 at 21:30
2
Would like to know why/who downvoted you
– Derek Pollard
Nov 19 '18 at 22:00
1
Having the same issue - commented on the github issue - hopefully it can be resolved.
– Scott Flack
Nov 21 '18 at 4:50
add a comment |
Is there a way to actually trigger the submit of a form by clicking on a submit button in a Vue Unit Test?
Lets take this simple component:
<template>
<form @submit.prevent="$emit('submitEventTriggered')">
<button type="submit">Submit Form</button>
</form>
</template>
<script>
export default {}
</script>
You can find a similiar component as an example here.
I want to test that submit.prevent gets triggerd when the button is clicked and therefore the submitEventTriggered is emitted. When I run this in a browser everything works as expected. But the following test fails:
import {shallowMount} from '@vue/test-utils'
import {assert} from 'chai'
import Form from '@/components/Form.vue'
describe.only('Form', () => {
it('button click triggers submit event', () => {
const wrapper = shallowMount(Form)
wrapper.find('[type='submit']').trigger('click')
assert.exists(wrapper.emitted('submitEventTriggered'), 'Form submit not triggered')
})
})
With this output:
AssertionError: Form submit not triggered: expected undefined to exist
If I change the action to trigger submit.prevent on the form directly everything works fine. But then there is actually no test coverage for the submitting via button.
wrapper.find('form').trigger('submit.prevent')
It seems like the trigger function doesnt actually click the button.
Why is this and is there a way to fix it?
vue.js vue-test-utils
asked Nov 19 '18 at 20:34
Marvin RabeMarvin Rabe
2,83921428
Is there a way to actually trigger the submit of a form by clicking on a submit button in a Vue Unit Test?
Lets take this simple component:
<template>
<form @submit.prevent="$emit('submitEventTriggered')">
<button type="submit">Submit Form</button>
</form>
</template>
<script>
export default {}
</script>
You can find a similiar component as an example here.
I want to test that submit.prevent gets triggerd when the button is clicked and therefore the submitEventTriggered is emitted. When I run this in a browser everything works as expected. But the following test fails:
import {shallowMount} from '@vue/test-utils'
import {assert} from 'chai'
import Form from '@/components/Form.vue'
describe.only('Form', () => {
it('button click triggers submit event', () => {
const wrapper = shallowMount(Form)
wrapper.find('[type='submit']').trigger('click')
assert.exists(wrapper.emitted('submitEventTriggered'), 'Form submit not triggered')
})
})
With this output:
AssertionError: Form submit not triggered: expected undefined to exist
If I change the action to trigger submit.prevent on the form directly everything works fine. But then there is actually no test coverage for the submitting via button.
wrapper.find('form').trigger('submit.prevent')
It seems like the trigger function doesnt actually click the button.
Why is this and is there a way to fix it?
vue.js vue-test-utils
vue.js vue-test-utils
asked Nov 19 '18 at 20:34
Marvin RabeMarvin Rabe
2,83921428
asked Nov 19 '18 at 20:34
Marvin RabeMarvin Rabe
2,83921428
edited Nov 19 '18 at 21:30
Marvin Rabe
asked Nov 19 '18 at 20:34
Marvin RabeMarvin Rabe
2,83921428
asked Nov 19 '18 at 20:34
Marvin RabeMarvin Rabe
2,83921428
asked Nov 19 '18 at 20:34
Marvin RabeMarvin Rabe
2,83921428
2,83921428
1
This seems to me like a bug. I reported it here: github.com/vuejs/vue-test-utils/issues/1030
– Marvin Rabe
Nov 19 '18 at 21:30
2
Would like to know why/who downvoted you
– Derek Pollard
Nov 19 '18 at 22:00
1
Having the same issue - commented on the github issue - hopefully it can be resolved.
– Scott Flack
Nov 21 '18 at 4:50
add a comment |
1
This seems to me like a bug. I reported it here: github.com/vuejs/vue-test-utils/issues/1030
– Marvin Rabe
Nov 19 '18 at 21:30
2
Would like to know why/who downvoted you
– Derek Pollard
Nov 19 '18 at 22:00
1
Having the same issue - commented on the github issue - hopefully it can be resolved.
– Scott Flack
Nov 21 '18 at 4:50
1
1
This seems to me like a bug. I reported it here: github.com/vuejs/vue-test-utils/issues/1030
– Marvin Rabe
Nov 19 '18 at 21:30
This seems to me like a bug. I reported it here: github.com/vuejs/vue-test-utils/issues/1030
– Marvin Rabe
Nov 19 '18 at 21:30
2
2
Would like to know why/who downvoted you
– Derek Pollard
Nov 19 '18 at 22:00
Would like to know why/who downvoted you
– Derek Pollard
Nov 19 '18 at 22:00
1
1
Having the same issue - commented on the github issue - hopefully it can be resolved.
– Scott Flack
Nov 21 '18 at 4:50
Having the same issue - commented on the github issue - hopefully it can be resolved.
– Scott Flack
Nov 21 '18 at 4:50
add a comment |
1 Answer
1
active
oldest
votes
The issue is that Vue Test Utils does not attach DOM nodes to the document by default. This is to avoid enforcing cleanup. You can solve this by setting attachToDocument to true when you mount the component:
it('button click triggers submit event', () => {
const wrapper = shallowMount(Form, {
attachToDocument: true
})
wrapper.find("[type='submit']").trigger('click')
assert.exists(
wrapper.emitted('submitEventTriggered'),
'Form submit not triggered'
)
})
You should remove the DOM node from the document to avoid a memory leak. You can do this by calling destroy on the wrapper:
wrapper.destroy()
answered Nov 23 '18 at 17:17
EddEdd
2,26911526
add a 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
});
}
});
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%2f53382235%2ftrigger-form-submit-on-button-click-in-vue-unit-test%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
The issue is that Vue Test Utils does not attach DOM nodes to the document by default. This is to avoid enforcing cleanup. You can solve this by setting attachToDocument to true when you mount the component:
it('button click triggers submit event', () => {
const wrapper = shallowMount(Form, {
attachToDocument: true
})
wrapper.find("[type='submit']").trigger('click')
assert.exists(
wrapper.emitted('submitEventTriggered'),
'Form submit not triggered'
)
})
You should remove the DOM node from the document to avoid a memory leak. You can do this by calling destroy on the wrapper:
wrapper.destroy()
answered Nov 23 '18 at 17:17
EddEdd
2,26911526
add a comment |
The issue is that Vue Test Utils does not attach DOM nodes to the document by default. This is to avoid enforcing cleanup. You can solve this by setting attachToDocument to true when you mount the component:
it('button click triggers submit event', () => {
const wrapper = shallowMount(Form, {
attachToDocument: true
})
wrapper.find("[type='submit']").trigger('click')
assert.exists(
wrapper.emitted('submitEventTriggered'),
'Form submit not triggered'
)
})
You should remove the DOM node from the document to avoid a memory leak. You can do this by calling destroy on the wrapper:
wrapper.destroy()
answered Nov 23 '18 at 17:17
EddEdd
2,26911526
add a comment |
The issue is that Vue Test Utils does not attach DOM nodes to the document by default. This is to avoid enforcing cleanup. You can solve this by setting attachToDocument to true when you mount the component:
it('button click triggers submit event', () => {
const wrapper = shallowMount(Form, {
attachToDocument: true
})
wrapper.find("[type='submit']").trigger('click')
assert.exists(
wrapper.emitted('submitEventTriggered'),
'Form submit not triggered'
)
})
You should remove the DOM node from the document to avoid a memory leak. You can do this by calling destroy on the wrapper:
wrapper.destroy()
answered Nov 23 '18 at 17:17
EddEdd
2,26911526
The issue is that Vue Test Utils does not attach DOM nodes to the document by default. This is to avoid enforcing cleanup. You can solve this by setting attachToDocument to true when you mount the component:
it('button click triggers submit event', () => {
const wrapper = shallowMount(Form, {
attachToDocument: true
})
wrapper.find("[type='submit']").trigger('click')
assert.exists(
wrapper.emitted('submitEventTriggered'),
'Form submit not triggered'
)
})
You should remove the DOM node from the document to avoid a memory leak. You can do this by calling destroy on the wrapper:
wrapper.destroy()
answered Nov 23 '18 at 17:17
EddEdd
2,26911526
edited Nov 25 '18 at 16:42
answered Nov 23 '18 at 17:17
EddEdd
2,26911526
answered Nov 23 '18 at 17:17
EddEdd
2,26911526
answered Nov 23 '18 at 17:17
EddEdd
2,26911526
2,26911526
add a comment |
add a comment |
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.
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%2f53382235%2ftrigger-form-submit-on-button-click-in-vue-unit-test%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
1
This seems to me like a bug. I reported it here: github.com/vuejs/vue-test-utils/issues/1030
– Marvin Rabe
Nov 19 '18 at 21:30
2
Would like to know why/who downvoted you
– Derek Pollard
Nov 19 '18 at 22:00
1
Having the same issue - commented on the github issue - hopefully it can be resolved.
– Scott Flack
Nov 21 '18 at 4:50