Vue 3 组件单元测试指南

"devDependencies": {
  "vitest": "^1.0.0",
  "@vue/test-utils": "^2.4.0",
  "jsdom": "^23.0.0"
}

import { mount } from '@vue/test-utils';
import { describe, it, expect, vi } from 'vitest';
import MyComponent from './MyComponent.vue';

describe('MyComponent.vue', () => {
  it('renders properly', () => {
    const wrapper = mount(MyComponent, {
      props: { title: 'Hello' }
    });
    expect(wrapper.text()).toContain('Hello');
  });

  it('emits event on click', async () => {
    const wrapper = mount(MyComponent);
    await wrapper.find('button').trigger('click');
    expect(wrapper.emitted()).toHaveProperty('submit');
  });
});

// Mock 第三方组件
const wrapper = mount(MyComponent, {
  global: { stubs: { 'bk-table': true } }
});

// Mock API（文件顶部）
vi.mock('@/api/user', () => ({
  getUserInfo: vi.fn(() => Promise.resolve({ id: 1 }))
}));

npm run test:unit