Vue3 Checkbox单元测试失败：点击后checked属性未更新

你的组件实现没有遵循Vue的单向数据流规则，也没正确实现v-model的双向绑定逻辑：

1. 组件内部的checked ref仅在初始化时复制了props的值，之后props和内部状态完全脱节——点击复选框只会修改内部ref，不会通知父组件更新props，所以测试中wrapper.props().checked始终是父组件传入的初始值。
2. Vue中props是只读的，子组件不能直接修改props，必须通过emit事件让父组件更新props，这是实现v-model的核心要求。

要让自定义Checkbox组件支持v-model，需要修改组件代码，实现props与内部状态的双向同步，并正确触发更新事件：

<template>
  <div class="checkbox-container">
    <input
      :id="props.id"
      :checked="checked"
      @change="handleChange"
      type="checkbox"
      :disabled="props.disabled" />
    <label :for="props.id">{{ props.label }}</label>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';

export interface CheckBoxProps {
  id: string;
  checked: boolean;
  disabled?: boolean;
  label: string;
}

const props = withDefaults(defineProps<CheckBoxProps>(), { disabled: false });
// 声明用于通知父组件更新的emit事件
const emit = defineEmits<{
  'update:checked': [value: boolean]
}>()

const checked = ref(props.checked)

// 监听props的checked变化，同步到内部状态
watch(() => props.checked, (newVal) => {
  checked.value = newVal
})

// 处理复选框变化，触发事件通知父组件
const handleChange = (e: Event) => {
  const newValue = (e.target as HTMLInputElement).checked
  checked.value = newValue
  emit('update:checked', newValue)
}
</script>

关键修改点： #

• 不再直接用v-model绑定内部ref，而是手动绑定:checked和@change事件，完全控制状态更新逻辑
• 添加defineEmits声明update:checked事件，遵循Vue自定义组件v-model:propName的约定规则
• 用watch监听props的checked变化，确保父组件更新props时，组件内部状态同步更新
• 在handleChange中，将新的选中状态通过emit通知父组件

修改后的组件会在点击时发出update:checked事件，测试需要验证事件触发逻辑、内部状态和DOM变化：

import { mount } from '@vue/test-utils';
import Checkbox from '@/components/Checkbox.vue';

test('triggers update:checked event and updates state when clicked', async () => {
  const wrapper = mount(Checkbox, {
    props: {
      id: 'my-checkbox',
      checked: false,
      label: 'My Checkbox Label'
    }
  });

  const input = wrapper.find('input[type="checkbox"]');

  // 初始状态验证
  expect(wrapper.props().checked).toBe(false);
  expect(input.element.checked).toBe(false);

  // 第一次点击
  await input.trigger('change');
  // 验证emit事件是否正确触发
  expect(wrapper.emitted('update:checked')).toBeTruthy();
  expect(wrapper.emitted('update:checked')![0]).toEqual([true]);
  // 验证内部状态和DOM
  expect(wrapper.vm.checked).toBe(true);
  expect(input.element.checked).toBe(true);

  // 更新props，验证组件同步状态
  await wrapper.setProps({ checked: false });
  expect(input.element.checked).toBe(false);
  expect(wrapper.vm.checked).toBe(false);

  // 第二次点击
  await input.trigger('change');
  expect(wrapper.emitted('update:checked')![1]).toEqual([true]);
});

测试修改点： #

• 监听组件的update:checked事件，验证点击后是否发出了正确的事件和值
• 验证DOM元素的checked属性变化，而非直接断言props（props需父组件主动更新）
• 添加props更新的测试，验证组件能同步父组件的props变化

如果你想在父组件中使用v-model语法糖（比如<Checkbox v-model:checked="parentChecked" />），上面的组件实现已完全支持，因为我们遵循了Vue的update:propName事件约定。

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