Vue 教程：组合式函数（Composables）的单元测试策略与实现

快速概述

组合式函数（Composables）是 Vue 3 中用于复用有状态逻辑的核心机制，通过将响应式状态与相关操作封装为独立函数，显著提升代码的可维护性与可测试性。单元测试能够验证这些函数的逻辑正确性，确保在组件外部也能独立运行。适用场景包括状态管理、异步请求、定时器等逻辑的复用。前置环境要求：Node.js 版本需满足 ^20.19.0 或 >=22.12.0，并建议使用 Vue 官方脚手架 create-vue 创建项目，同时启用 Vitest 测试支持。

核心概念与原理

组合式函数遵循 Vue 3 的组合式 API 设计，利用 ref、reactive 等响应式 API 管理状态，并通过 watch、computed 实现派生逻辑。单元测试的核心在于隔离外部依赖（如 API 调用、定时器），直接对函数进行断言。测试时需注意响应式数据的更新时机，通常使用 nextTick 或 flushPromises 确保异步操作完成。

实战步骤与代码

1. 创建项目并安装依赖

使用 create-vue 脚手架创建项目，并在提示中选择 Vitest 作为单元测试框架：

npm create vue@latest my-vue-app
根据提示选择 TypeScript、Vitest 等选项
cd my-vue-app npm install

2. 编写一个组合式函数

以计数器为例，创建一个 useCounter.js：

import { ref } from 'vue'
export function useCounter(initialValue = 0) { const count = ref(initialValue) const increment = () => { count.value++ } const decrement = () => { count.value-- } return { count, increment, decrement } }

3. 编写单元测试

在 tests/useCounter.spec.js 中编写测试用例：

import { describe, it, expect } from 'vitest'
import { useCounter } from '../src/composables/useCounter'
describe('useCounter', () => { it('初始值为 0', () => { const { count } = useCounter() expect(count.value).toBe(0) })
it('increment 增加计数', () => { const { count, increment } = useCounter() increment() expect(count.value).toBe(1) }) })

4. 运行测试

在 package.json 中配置脚本：

"scripts": {
  "test": "vitest"
}

执行 npm test 即可查看测试结果。

常见坑点与优化

• 异步更新问题：修改响应式状态后，DOM 或派生值可能未立即更新，需使用 await nextTick() 等待。
• 定时器测试：使用 vi.useFakeTimers() 模拟定时器，避免真实等待。
• 依赖注入：若组合式函数依赖 inject，需在测试中提供对应的 provide 上下文。
• 性能优化：避免在测试中创建不必要的响应式对象，使用 shallowRef 或 markRaw 减少开销。