Vuetify v-checkbox组件单元测试：如何实现两次点击切换选中状态？

我之前在测试Vuetify的v-checkbox组件时也碰到过一模一样的问题！连续调用两次trigger('click')没反应，核心原因其实是Vue的响应式状态更新是异步的——第一次点击后组件还没完成状态切换，第二次点击就已经触发了，自然不会生效。

下面给你两个可行的解决方案：

方案1：等待异步更新（推荐） #

Vue Test Utils的trigger方法返回一个Promise，我们可以用await来等待每次点击后的DOM更新完成，这样两次点击就能正确触发状态切换：

const flag = wrapper.find('.input-group--selection-controls__ripple')
await flag.trigger('click') // 等待第一次点击后的状态更新
await flag.trigger('click') // 现在再点击就能切换为未选中

方案2：直接操作原生checkbox元素 #

有时候Vuetify的外层装饰元素（比如ripple）可能会有延迟，你可以直接找到组件内部的原生<input type="checkbox">元素来触发点击，这样更直接：

const checkboxInput = wrapper.find('input[type="checkbox"]')
await checkboxInput.trigger('click')
await checkboxInput.trigger('click')

如果你不想模拟点击，也可以直接设置选中状态：

await checkboxInput.setChecked(false) // 直接切换为未选中状态

补充说明 #

为什么第一次点击有效？因为初始状态下组件是同步响应的，但第一次点击后需要异步更新DOM和状态，第二次点击如果不等待的话，组件还处于中间状态，所以不会处理第二次的点击事件。加上await就能确保每次点击都在状态更新完成后执行。

内容的提问来源于stack exchange，提问作者user2850652