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

Posted

技术标签:

【中文标题】在单元测试中触发 vue-select 下拉项选择【英文标题】:Triggering vue-select dropdown item selection in a unit test 【发布时间】:2019-12-24 19:22:54 【问题描述】:

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

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

// 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 应该选择项目并发出“输入”事件。

【问题讨论】:

【参考方案1】:

我找到了一种直接选择选项的方法。你可以使用VueSelect组件的select函数,像这样:

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

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

但是,是的,如果您想模拟单击其中一个选项,那将无济于事。而且我知道这种改变组件状态的方式不是首选方式,但它是我找到的唯一解决方案。

【讨论】:

以上是关于在单元测试中触发 vue-select 下拉项选择的主要内容,如果未能解决你的问题,请参考以下文章

选择下拉列表项而不触发 onchange 事件?

excel之添加下拉框

如何在EXCEL中设置下拉箭头筛选内容?

怎么弄EXCEL表的下拉框,选择里面的项会自带颜色

excel中添加下拉候选

TouchesBegan 没有在 UIView 中作为 UITableViewCell 的子视图触发