直接测试组合式函数最高效，因其不依赖组件渲染，可快速验证逻辑、mock外部依赖；需单独导出函数，传参调用后解构断言状态与方法；模拟副作用、验证响应式更新及生命周期结果。

直接测试组合式函数是最高效、最推荐的方式。它不依赖组件渲染，能快速验证逻辑本身是否正确，也便于 mock 外部依赖（比如 API 调用或 localStorage）。

单独导出并调用组合函数

确保你的组合函数（如 useCounter、useFetch）是可导出的普通函数，而不是只在 setup 内部定义。测试时直接 import 并调用：

• 传入必要的参数（如初始值、配置对象）
• 解构返回的对象，拿到 ref、computed、方法等
• 对状态值（.value）、计算属性、方法行为做断言

例如：
const { count, increment } = useCounter(10);
increment();
expect(count.value).toBe(11);

模拟副作用依赖

如果组合函数内部调用了 fetch、localStorage 或第三方 SDK，用 vi.mock() 拦截并控制其行为：

vue-composition-api-best-practices

Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。

下载

立即学习“前端免费学习笔记（深入）”；

• mock fetch 返回固定响应，验证数据是否正确赋给 ref
• mock localStorage.getItem 返回预设值，检查初始化逻辑
• 用 mockFn.mockReturnValue() 或 mockResolvedValue() 控制返回时机和内容

验证响应式更新与 watch 行为

当组合函数中使用了 watch 或 watchEffect，需主动触发变化并检查回调是否执行：

• 修改被监听的 ref 或 reactive 对象
• 用 await nextTick() 等待响应式系统更新
• 断言副作用是否发生（如 API 是否被调用、状态是否更新）

注意：不要测“watch 是否被注册”，而要测“监听后是否做了该做的事”。

覆盖生命周期相关逻辑

如果组合函数内调用了 onMounted 等钩子，重点不是验证钩子是否执行，而是验证它引发的结果：

• mock 钩子内部调用的函数（如 loadData）
• mount 组件后等待 nextTick，再检查 ref 值、DOM 文本或 emitted 事件
• 对异步操作，可用 waitFor 等待条件满足