Vue 组件单元测试指南
测试规范
测试文件与组件同目录,命名为 组件名.spec.ts。
运行测试
bash
pnpm --filter @blueking/chat-x test # 所有测试 npx vitest run src/components/your-component # 指定目录
基础模板
typescript
import { defineComponent, h } from 'vue';
import { type VueWrapper, mount } from '@vue/test-utils';
import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
import YourComponent from './your-component.vue';
vi.mock('vue-tippy', () => ({ /* ... */ }));
describe('YourComponent', () => {
let wrapper: VueWrapper;
beforeEach(() => { vi.clearAllMocks(); });
afterEach(() => { wrapper?.unmount(); });
it('应该正确渲染', () => {
wrapper = mount(YourComponent);
expect(wrapper.find('.your-component').exists()).toBe(true);
});
});
测试分类
- •渲染测试:组件正确渲染
- •Props 测试:属性传递和响应
- •事件测试:emit 事件
- •Slot 测试:插槽内容
同步更新原则
修改组件代码时必须同步更新测试用例。
📦 可用资源
- •
skill://chat-x-unit-test/references/mock-patterns.md - •
skill://chat-x-unit-test/references/test-qa.md - •
skill://chat-x-unit-test/references/test-strategies.md
📦 可用资源
- •
skill://chat-x-unit-test/references/mock-patterns.md - •
skill://chat-x-unit-test/references/test-qa.md - •
skill://chat-x-unit-test/references/test-strategies.md
根据 SKILL.md 中的 IF-THEN 规则判断是否需要加载