Cannot click on Vue Select Box using vue-test-utils

Question

I can't seem to "click" on these select boxes using vue-test-utils and Vue 2. I am using mocha + webpack.

I am determining this by seeing that the visible-change event is never triggered as it should on click. Here is how my spec file is like:

...
const wrapper = mount(EntityItem, { propsData });
const selectBox = wrapper.find("el-select");

// I tried these:
selectBox.trigger("click");
selectBox.trigger("click.native");

As last resort if this doesn't work, I'd have to manually change the model attribute to simulate the component change.

----UPDATE----

When I set up a callback for the click event I see something, but I am unable to "select" anything in this select input component.

select boxes in the link(element ui) have class el-select-dropdown class in order to select them you would need wrapper.find(".el-select-dropdown").trigger("click") to trigger click event. — whitespace
– whitespace, Commented Aug 3, 2020 at 14:28

whitespace · Accepted Answer · 2020-08-03 14:45:11Z

0

the component you are using does not use select input element. In order to simulate selecting an option, you would do something like this.

wrapper.findAll('.el-select-dropdown__item').at(1).trigger('click'); // simulates clicking of one of the options

if you want to simulate clicking of select element itself(to show the dropdown). you could do the following.

 wrapper.find('.el-select-dropdown').trigger('click');

answered Aug 3, 2020 at 14:45

whitespace

8197 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

tao · Accepted Answer · 2022-07-16 03:51:59Z

0

Whitespace's answer above helped, however also needed to ensure you use

await Vue.nextTick()

before your expect statement. Like so:

wrapper.findAll('.el-select-dropdown__item').at(1).trigger('click');
await Vue.nextTick();
expect(enterResultBtn.is('[disabled]')).toBe(true);

This allows the DOM to update it's cycle, more info here

edited Jul 16, 2022 at 3:51

tao

91k18 gold badges136 silver badges174 bronze badges

answered Nov 12, 2020 at 15:12

jimmytricks

614 bronze badges

Collectives™ on Stack Overflow

Cannot click on Vue Select Box using vue-test-utils

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related