Vue 组件单元测试指南

测试规范

测试文件与组件同目录，命名为 组件名.spec.ts。

运行测试

pnpm --filter @blueking/chat-x test              # 所有测试
npx vitest run src/components/your-component     # 指定目录

基础模板

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 规则判断是否需要加载