6

Problem: can't trigger Vue-Select3 item dropdown selection programmatically in unit-tests.

I have tried with both vue-test-utils and @testing-library/vue as well as triggering a click event programmatically in a browser to force list item selection. However, none of these worked. The only way I managed to trigger selection is by getting a VueSelect instance and emitting 'input' event. I also tried to trigger different events on dropdown container, etc.

// Failed

// testing-library
const dropdownItem = getAllByTestId('dropdown-item')
fireEvent.click(dropdownItem[0])

// test-utils
wrapper.find('[data-testid=dropdown-item]').trigger('click')

// In browser
document.querySelectorAll('.vs__dropdown-item')[0].click()

// Success
wrapper.find(VueSelect).vm.$emit('input', payload)

Current result: When a click event is triggered nothing happens. Expected result: When a click event is triggered Vue-Select should select the item and emit 'input' event.

Andrew Vasylchuk
  • 4,671
  • 2
  • 12
  • 30
Thomas Findlay
  • 61
  • 2
  • 4

1 Answers1

0

I found a way of selecting an option directly. You can use the select function of the VueSelect component, like that: 

const wrapper = mount(YourComponent)
const vueSelect = wrapper.find(VueSelect)
vueSelect.vm.select(yourOptionToSelect)

That will work if you just want to select a specific option.

But yes, if you want to simulate the click on one of the options, that would not be helpful. And I know that this way of changing the state of a component is not the preferred way of doing this, but it is the only solution I've found.

Benjamin Rupp
  • 1
  • 2