直接测试组合式函数最高效，无需组件渲染或Vue Test Utils，通过Vitest导入调用、模拟依赖、验证副作用与只读保护即可。
直接测试组合式函数（composables）是最高效、最推荐的方式。它不依赖组件渲染，能精准验证逻辑本身是否正确，也便于模拟外部依赖。
单独导出并调用组合函数
确保你的组合函数是可导出的独立模块（如 useCounter.ts），并在测试文件中直接导入调用：
- 不需要挂载组件，也不需要 Vue Test Utils
- 用 vitest 的 describe 和 it 编写测试用例
- 检查返回的 ref、computed 或方法是否按预期工作
例如：
import { useCounter } from './useCounter'
it('should increment count', () => {
const { count, increment } = useCounter()
increment()
expect(count.value).toBe(1)
})
模拟外部依赖（如 API 请求）
组合函数常依赖异步操作（如 fetch、localStorage）。使用 vi.mock() 拦截并替换这些依赖：
立即学习“前端免费学习笔记（深入）”；
- 在测试文件顶部调用 vi.mock('./api')，然后手动定义 mock 实现
- 对返回 Promise 的函数，用 mockResolvedValue 控制响应数据
- 验证函数是否被正确调用（expect(api.getData).toHaveBeenCalled()）
注意：mock 需在 import 之前声明，否则无效。
验证副作用与清理逻辑
如果组合函数内部使用了 onMounted、watch 或定时器，测试重点不是“钩子是否执行”，而是“结果是否符合预期”：
- 对 watch，修改被监听的 ref，检查回调是否触发且逻辑正确
- 对 onUnmounted 中的清理行为（如 clearInterval），可 mock 全局函数并断言是否被调用
- 避免测试生命周期钩子本身——它们是 Vue 内部机制，不可控；只测它引发的状态变化或副作用
类型安全与只读保护（TypeScript 场景）
若组合函数返回值做了 readonly 处理（如 readonly(count)），测试中尝试修改会报错，这本身就是一种验证：
- 可显式断言类型是否为 ReadonlyRef（需配合 TypeScript 类型断言或 JSDoc 注释）
- 运行时尝试赋值（count.value = 5）应失败，说明封装有效
- 这对防止组件意外篡改内部状态很有价值，建议在测试中覆盖
