vue组合式api单元测试核心是分离逻辑、独立验证：优先直接测试可导出的组合函数，其次测试setup内部逻辑，最后用mount进行组件级交互与生命周期验证。
Vue 组合式 API 的单元测试核心在于“分离逻辑、独立验证”——把 setup 中的响应式状态、计算属性、副作用和组合函数抽出来单独测，而不是只测整个组件渲染。
直接测试组合式函数（composables）
这是最推荐的做法。把业务逻辑封装成可导出的函数（如 useCounter、useFetch），在测试中直接调用并断言返回值和副作用。
- 用
vi.mock()模拟依赖（如 API 请求、localStorage） - 调用函数后，检查其返回的 ref、computed 或方法是否按预期工作
- 例如：
const { count, increment } = useCounter(); increment(); expect(count.value).toBe(1);
测试 setup 内部逻辑（不挂载组件）
对于简单逻辑，可跳过组件渲染，直接执行 setup 函数并检查其返回对象。
- 导入组件的
setup函数（需确保它被导出或通过defineComponent显式暴露） - 手动传入
props和context（通常只需空对象），调用 setup - 验证返回的 ref、computed、方法是否初始化正确，能否响应变化
组件级测试：mount + 触发交互
当需要验证 DOM 行为、事件响应或生命周期钩子时，使用 @vue/test-utils 的 mount。
- 用
mount渲染组件，获取 wrapper - 通过
wrapper.find定位按钮/输入框，用trigger或setValue模拟用户操作 - 用
await wrapper.vm.$nextTick()（Vue 3 中推荐await nextTick()）等待响应式更新 - 断言文本、class、emitted 事件或 ref 值的变化
验证生命周期与副作用
onMounted、onUpdated 等钩子本身不返回值，但常触发异步操作或修改状态，测试重点是“结果”而非“是否调用了钩子”。
- mock
onMounted内部的函数（如fetchData），然后检查其是否被调用 - 在 mount 后等待 nextTick，再断言数据是否加载、DOM 是否更新
- 对
watch或watchEffect，改变被监听的 ref/reactive，验证回调是否执行且逻辑正确
大量免费API接口：立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游，为数据API应用能力赋能！
