为vue-multiselect编写单元测试

Question

我正在尝试解决如何为vue-multiselect编写测试，但遇到了麻烦。

具体地说，我试图“单击”输入以打开下拉菜单(然后选择一个选项)，但是什么都不起作用

我试过了

vm.$el.querySelector('.multiselect').click()

在浏览器中：

document.querySelector('.multiselect').click()

还有很多其他的组合，但都不起作用。

对于一个强调它的测试覆盖率的库来说，没有给出在单元测试中使用它的文档(我可以找到)，这很奇怪。

Answer 1

最后让它工作，关键是.dispatchEvent(new window.Event('focus'))而不是.focus()。

最终测试的相关比特：

expect(vm.$el.querySelectorAll('input')).to.have.lengthOf(1)

vm.$el.querySelector('.multiselect').dispatchEvent(new window.Event('focus'))
await tick()
const s = vm.$el.querySelectorAll('.multiselect__element')[2].querySelector('span')
expect(s.innerText).to.equal('Science')
s.dispatchEvent(new window.Event('mousedown'))
await tick()
expect(routes_visited).to.deep.equal(['/s/3-science'])

vm.$el.querySelector('.cross').click()
await tick()
expect(routes_visited).to.deep.equal(['/s/3-science', '/'])

(注意，我的组件更改了vue-router路由，因此我在测试中对路由执行watch操作并将其推送到routes_visited中以跟踪更改。)