Vue.js响应式单元测试核心是验证“数据变化→依赖更新→视图/副作用重执行”链条，需用effect+reactive构建纯JS环境、覆盖ref/reactive差异、隔离测试组件逻辑，并重点拦截新增属性、数组索引赋值等边界陷阱。
Vue.js 响应式系统的单元测试，核心在于验证“数据变化 → 依赖更新 → 视图或副作用重新执行”这一链条是否可靠。它不是测语法，而是测行为逻辑——比如修改 ref 或 reactive 数据后，计算属性是否重算、watch 是否触发、模板渲染是否同步更新。
用 effect + reactive 搭建最小可测响应式环境
不依赖 Vue 组件，先在纯 JS 层验证响应式基础能力。关键点是手动触发副作用并观察其重执行：
- 用
effect(() => { ... })定义一个副作用函数（如修改 DOM 或改变变量） - 在该函数中读取
reactive对象的属性，建立依赖关系 - 修改该属性，检查副作用是否被自动调用一次（可用
vi.fn()拦截并断言调用次数） - 注意：需在测试前调用
cleanupEffect()或确保每个测试独立运行，避免 effect 泄漏
测试 ref 与 reactive 的差异行为
ref 和 reactive 在使用方式和响应式穿透上不同，测试时要覆盖典型场景：
-
ref被解包：在watch中直接传ref，回调参数是原始值；而watch(() => obj.xxx)需手动取值 -
reactive不能解构：测试const { count } = reactive({ count: 0 })后修改count是否丢失响应性 - 嵌套结构：测试
reactive({ user: ref({ name: 'a' }) })中user.value.name变更是否触发依赖更新
组件内响应式逻辑的隔离测试
在组件中，响应式常体现在 computed、watch、v-model 或条件渲染中。推荐用 shallowMount 隔离测试：
立即学习“前端免费学习笔记（深入）”；
- 测试
computed：不挂载组件，直接调用component.computed.xxx.call(component)或用defineComponent+setup提取逻辑单独测 - 测试
watch：用vi.mock模拟 watch 回调，修改响应式源后断言回调是否被调用及参数是否正确 - 测试
v-model：设置props.modelValue，触发emits('update:modelValue')，检查内部状态是否同步更新
覆盖边界情况与常见陷阱
真实项目中容易出问题的地方，正是测试要重点拦截的：
- 对象新增属性：用
Vue.set或reactive包裹新对象，测试新增 key 是否触发更新 - 数组索引赋值：
arr[0] = 'new'不触发响应，测试是否被正确规避（如改用arr.splice(0,1,'new')） - 异步更新时机：配合
await nextTick()确保 DOM 更新完成后再断言文本或 class - 依赖清理：测试
watch或effect在组件卸载时是否自动停止，避免内存泄漏
