Vue Test Utils与Vitest测试复选框触发失效问题求助

问题场景 #

使用Vue Test Utils和Vitest测试复选框选中逻辑时，测试始终失败，wrapper.vm.selected始终保持初始值false，无法被更新为true。

组件代码（Component.vue） #

<template>
    <input type="checkbox" @change="check($event.target.checked)">
</template>

<script>
export default {
    data() {
        return {
            selected: false
        }
    },
    methods: {
        check(checked) {
            console.log(checked)
            this.selected = checked
        }
    }
}
</script>

测试代码（component.spec.js） #

import { mount } from '@vue/test-utils'
import Component from '.././src/components/Component.vue'
import { expect, test } from 'vitest'
import { nextTick } from 'vue'

test('checkbox', async () => {
    const wrapper = mount(Component)
    await wrapper.find("input[type='checkbox']").trigger("change")
    await nextTick()
    expect(wrapper.vm.selected).toBe(true)
})

测试失败输出 #

FAIL  test/component.spec.js > checkbox
AssertionError: expected false to be true // Object.is equality

- Expected
+ Received

- true
+ false

 ❯ test/component.spec.js:10:33
      8|     await wrapper.find("input[type='checkbox']").trigger("change")
      9|     await nextTick()
     10|     expect(wrapper.vm.selected).toBe(true)
       |                                 ^
     11| })

问题原因 #

调用trigger("change")时，Vue Test Utils默认不会修改DOM元素的checked状态，因此$event.target.checked传递给check方法的是复选框的初始值false，导致selected属性始终未被更新为预期的true。

解决方法 #

提供两种可行的修复方案：

方案一：手动设置复选框状态后触发事件 #

先修改DOM元素的checked属性为true，再触发change事件，确保事件回调能获取到正确的选中状态：

test('checkbox', async () => {
    const wrapper = mount(Component)
    const checkbox = wrapper.find("input[type='checkbox']")
    // 手动设置复选框为选中状态
    checkbox.element.checked = true
    await checkbox.trigger("change")
    expect(wrapper.vm.selected).toBe(true)
})

方案二：触发事件时传递自定义事件参数 #

通过trigger方法的第二个参数，传递模拟的事件对象，直接指定target.checked为true：

test('checkbox', async () => {
    const wrapper = mount(Component)
    await wrapper.find("input[type='checkbox']").trigger("change", {
        target: { checked: true }
    })
    expect(wrapper.vm.selected).toBe(true)
})

说明：两种方案均无需额外调用nextTick，因为trigger方法会返回Promise，自动等待组件更新完成后再执行断言。

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