unit-test-vue-pinia 是做什么的？
为 Vue 3 + TypeScript + Vitest + Pinia 代码库编写和审查单元测试。适用于创建或更新组件、组合式函数和 Store 的测试；使用 createTestingPinia 模拟 Pinia；应用 Vue Test Utils 模式；并强制执行黑盒断言而非实现细节。
主要功能
- 组件测试：使用 Vue Test Utils 挂载组件，模拟依赖（如 Pinia Store），并通过用户交互断言预期行为。
- 组合式函数测试：在受控环境下测试组合式函数的逻辑，通常借助
@vue/test-utils中的mount或shallowMount。 - Pinia Store 测试：直接操作 Store 实例，测试状态、getter 和 action 的正确性，无需渲染组件。
- 黑盒断言：鼓励通过外部可观察行为（如 HTML 输出、事件触发、函数调用）进行断言，而非检查内部状态或私有方法。
使用场景
- 为新功能添加单元测试时，自动生成符合 Vue 3 + TypeScript + Vitest + Pinia 规范的测试模板。
- 审查现有测试代码，指出常见问题如过度模拟、测试内部状态、缺少边界情况等。
- 重构过程中，确保单元测试保持有效，并提示需要更新的部分。
最佳实践
- 始终使用
createTestingPinia创建独立的测试环境，避免全局状态污染。 - 优先通过组件的渲染输出和用户操作来验证行为，而非直接访问组件实例的内部状态。
- 使用
vi.fn()或vi.spyOn()模拟外部依赖，确保测试的隔离性。 - 为每个测试用例提供清晰的命名，描述其验证的场景和预期结果。
支持的平台
- Claude Code
- Cursor
- Codex
- 其他兼容 AI 代理的 IDE 扩展
示例
以下是一个 Vue 组件测试的简单示例，使用 Vitest 和 Vue Test Utils：
<!-- MyComponent.vue -->
<template>
<div>
<p>{{ count }}</p>
<button @click="increment">加一</button>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const count = ref(0)
const increment = () => count.value++
</script>
// MyComponent.spec.ts
import { mount } from '@vue/test-utils'
import { describe, it, expect } from 'vitest'
import { createTestingPinia } from '@pinia/testing'
import { useCounterStore } from '@/stores/counter'
import MyComponent from './MyComponent.vue'
describe('MyComponent', () => {
it('点击按钮后计数增加', async () => {
const wrapper = mount(MyComponent, {
global: {
plugins: [createTestingPinia()],
},
})
const button = wrapper.find('button')
await button.trigger('click')
expect(wrapper.find('p').text()).toBe('1')
})
})
配置要求
- Vue 3
- TypeScript
- Vitest
- Pinia
@vue/test-utils@pinia/testing（可选，推荐）
通过遵循本技能的指导，您可以构建出更可靠、更易于维护的 Vue 3 应用程序测试套件。