vue-test-utils how to use trigger's options
I want to test el-button if it can change to the correct view by $router,but I am confused weather the trigger supportted cause i find this in its document
The
triggermethod takes anoptionaloptions object. The properties in
the options object are added to the Event.
Note that target cannot be added in the
optionsobject.
const wrapper = mount(MyButton)
wrapper.trigger('click', {
button: 0
})
but failed and i get this info
TypeError: Cannot set property type of [object Event] which has only a
getter
65 | // expect(mockFn).toBeCalled
66 | // expect(mockFn).toBeCalledTimes(1)
67 | wrapper.find(ElementUI.Button).trigger('click', {
| ^
68 | id: 1,
69 | type: 'view'
70 | })
vue file
<el-button
plain
type="primary"
@click="changeView(-1, 'edit')">
newPicture
</el-button>
js
changeView(id, type) {
if (type === 'view') {
this.$router.push({ path: './detail', query: { id, type }})
} else if (type === 'edit') {
this.$router.push({ path: './edit', query: { id, type }})
}
},
And I want to write a test file for this button
...
it('add button click', () => {
const mockFn = jest.fn()
wrapper.setMethods({
changeView: mockFn
})
wrapper.find(ElementUI.Button).trigger('click', {
id: 1,
type: 'view'
})
wrapper.update()
expect(mockFn).toBeCalled
console.log(wrapper.vm.$route.path)
})
...
How can I fix this?
vuejs2 vue-test-utils
asked Nov 23 '18 at 7:44
VeexyyVeexyy
154
add a comment |
I want to test el-button if it can change to the correct view by $router,but I am confused weather the trigger supportted cause i find this in its document
The
triggermethod takes anoptionaloptions object. The properties in
the options object are added to the Event.
Note that target cannot be added in the
optionsobject.
const wrapper = mount(MyButton)
wrapper.trigger('click', {
button: 0
})
but failed and i get this info
TypeError: Cannot set property type of [object Event] which has only a
getter
65 | // expect(mockFn).toBeCalled
66 | // expect(mockFn).toBeCalledTimes(1)
67 | wrapper.find(ElementUI.Button).trigger('click', {
| ^
68 | id: 1,
69 | type: 'view'
70 | })
vue file
<el-button
plain
type="primary"
@click="changeView(-1, 'edit')">
newPicture
</el-button>
js
changeView(id, type) {
if (type === 'view') {
this.$router.push({ path: './detail', query: { id, type }})
} else if (type === 'edit') {
this.$router.push({ path: './edit', query: { id, type }})
}
},
And I want to write a test file for this button
...
it('add button click', () => {
const mockFn = jest.fn()
wrapper.setMethods({
changeView: mockFn
})
wrapper.find(ElementUI.Button).trigger('click', {
id: 1,
type: 'view'
})
wrapper.update()
expect(mockFn).toBeCalled
console.log(wrapper.vm.$route.path)
})
...
How can I fix this?
vuejs2 vue-test-utils
asked Nov 23 '18 at 7:44
VeexyyVeexyy
154
add a comment |
I want to test el-button if it can change to the correct view by $router,but I am confused weather the trigger supportted cause i find this in its document
The
triggermethod takes anoptionaloptions object. The properties in
the options object are added to the Event.
Note that target cannot be added in the
optionsobject.
const wrapper = mount(MyButton)
wrapper.trigger('click', {
button: 0
})
but failed and i get this info
TypeError: Cannot set property type of [object Event] which has only a
getter
65 | // expect(mockFn).toBeCalled
66 | // expect(mockFn).toBeCalledTimes(1)
67 | wrapper.find(ElementUI.Button).trigger('click', {
| ^
68 | id: 1,
69 | type: 'view'
70 | })
vue file
<el-button
plain
type="primary"
@click="changeView(-1, 'edit')">
newPicture
</el-button>
js
changeView(id, type) {
if (type === 'view') {
this.$router.push({ path: './detail', query: { id, type }})
} else if (type === 'edit') {
this.$router.push({ path: './edit', query: { id, type }})
}
},
And I want to write a test file for this button
...
it('add button click', () => {
const mockFn = jest.fn()
wrapper.setMethods({
changeView: mockFn
})
wrapper.find(ElementUI.Button).trigger('click', {
id: 1,
type: 'view'
})
wrapper.update()
expect(mockFn).toBeCalled
console.log(wrapper.vm.$route.path)
})
...
How can I fix this?
vuejs2 vue-test-utils
asked Nov 23 '18 at 7:44
VeexyyVeexyy
154
I want to test el-button if it can change to the correct view by $router,but I am confused weather the trigger supportted cause i find this in its document
The
triggermethod takes anoptionaloptions object. The properties in
the options object are added to the Event.
Note that target cannot be added in the
optionsobject.
const wrapper = mount(MyButton)
wrapper.trigger('click', {
button: 0
})
but failed and i get this info
TypeError: Cannot set property type of [object Event] which has only a
getter
65 | // expect(mockFn).toBeCalled
66 | // expect(mockFn).toBeCalledTimes(1)
67 | wrapper.find(ElementUI.Button).trigger('click', {
| ^
68 | id: 1,
69 | type: 'view'
70 | })
vue file
<el-button
plain
type="primary"
@click="changeView(-1, 'edit')">
newPicture
</el-button>
js
changeView(id, type) {
if (type === 'view') {
this.$router.push({ path: './detail', query: { id, type }})
} else if (type === 'edit') {
this.$router.push({ path: './edit', query: { id, type }})
}
},
And I want to write a test file for this button
...
it('add button click', () => {
const mockFn = jest.fn()
wrapper.setMethods({
changeView: mockFn
})
wrapper.find(ElementUI.Button).trigger('click', {
id: 1,
type: 'view'
})
wrapper.update()
expect(mockFn).toBeCalled
console.log(wrapper.vm.$route.path)
})
...
How can I fix this?
vuejs2 vue-test-utils
vuejs2 vue-test-utils
asked Nov 23 '18 at 7:44
VeexyyVeexyy
154
asked Nov 23 '18 at 7:44
VeexyyVeexyy
154
asked Nov 23 '18 at 7:44
VeexyyVeexyy
154
asked Nov 23 '18 at 7:44
VeexyyVeexyy
154
asked Nov 23 '18 at 7:44
VeexyyVeexyy
154
154
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
the options your passing are js $event properties. here's a list of them: https://www.w3schools.com/jsref/obj_event.asp
when you trigger that click event, the changeView will be called, with the parameters you passed to it(-1 and 'edit'). they are not event properties and you dont pass them as options. so your test whould look like:
it('add button click', () => {
const mockFn = jest.fn()
wrapper.setMethods({
changeView: mockFn
})
wrapper.find(ElementUI.Button).trigger('click');
wrapper.update();
expect(mockFn).toBeCalledWith(-1,'edit');
})
answered Nov 23 '18 at 9:01
EfratEfrat
889312
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%2f53442524%2fvue-test-utils-how-to-use-triggers-options%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 options your passing are js $event properties. here's a list of them: https://www.w3schools.com/jsref/obj_event.asp
when you trigger that click event, the changeView will be called, with the parameters you passed to it(-1 and 'edit'). they are not event properties and you dont pass them as options. so your test whould look like:
it('add button click', () => {
const mockFn = jest.fn()
wrapper.setMethods({
changeView: mockFn
})
wrapper.find(ElementUI.Button).trigger('click');
wrapper.update();
expect(mockFn).toBeCalledWith(-1,'edit');
})
answered Nov 23 '18 at 9:01
EfratEfrat
889312
add a comment |
the options your passing are js $event properties. here's a list of them: https://www.w3schools.com/jsref/obj_event.asp
when you trigger that click event, the changeView will be called, with the parameters you passed to it(-1 and 'edit'). they are not event properties and you dont pass them as options. so your test whould look like:
it('add button click', () => {
const mockFn = jest.fn()
wrapper.setMethods({
changeView: mockFn
})
wrapper.find(ElementUI.Button).trigger('click');
wrapper.update();
expect(mockFn).toBeCalledWith(-1,'edit');
})
answered Nov 23 '18 at 9:01
EfratEfrat
889312
add a comment |
the options your passing are js $event properties. here's a list of them: https://www.w3schools.com/jsref/obj_event.asp
when you trigger that click event, the changeView will be called, with the parameters you passed to it(-1 and 'edit'). they are not event properties and you dont pass them as options. so your test whould look like:
it('add button click', () => {
const mockFn = jest.fn()
wrapper.setMethods({
changeView: mockFn
})
wrapper.find(ElementUI.Button).trigger('click');
wrapper.update();
expect(mockFn).toBeCalledWith(-1,'edit');
})
answered Nov 23 '18 at 9:01
EfratEfrat
889312
the options your passing are js $event properties. here's a list of them: https://www.w3schools.com/jsref/obj_event.asp
when you trigger that click event, the changeView will be called, with the parameters you passed to it(-1 and 'edit'). they are not event properties and you dont pass them as options. so your test whould look like:
it('add button click', () => {
const mockFn = jest.fn()
wrapper.setMethods({
changeView: mockFn
})
wrapper.find(ElementUI.Button).trigger('click');
wrapper.update();
expect(mockFn).toBeCalledWith(-1,'edit');
})
answered Nov 23 '18 at 9:01
EfratEfrat
889312
answered Nov 23 '18 at 9:01
EfratEfrat
889312
answered Nov 23 '18 at 9:01
EfratEfrat
889312
answered Nov 23 '18 at 9:01
EfratEfrat
889312
889312
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%2f53442524%2fvue-test-utils-how-to-use-triggers-options%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