在单元测试中触发 vue-select 下拉项选择

Question

问题：无法在单元测试中以编程方式触发 Vue-Select3 项目下拉选择。

我已经尝试了vue-test-utils和@testing-library/vue，以及在浏览器中以编程方式触发单击事件以强制选择列表项。然而，这些都没有奏效。我设法触发选择的唯一方法是获取一个 VueSelect 实例并发出"input"事件。我还尝试在下拉容器等上触发不同的事件。

// 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)

当前结果：触发点击事件时，没有任何反应。预期结果：当点击事件被触发时，Vue-Select 应该选择项目并发出"input"事件。

Answer 1

我找到了一种直接选择选项的方法。您可以使用VueSelect组件的select函数，如下所示：

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

如果您只想选择一个特定选项，这将起作用。

但是，是的，如果您想模拟对其中一个选项的单击，那将没有帮助。我知道这种更改组件状态的方法不是执行此操作的首选方法，但它是我找到的唯一解决方案。