Vue3+Typescript+Vitest单元测试环境+基础用例篇

// 引入Vue测试实用工具
import { mount } from '@vue/test-utils';
import { ref } from 'vue';
// 引入待测试的组件
import MyComponent from '@/components/MyComponent.vue';
 
// 使用Vitest编写测试案例
describe('MyComponent 组件测试', () => {
  test('初始化渲染应正确显示默认文本', () => {
    // 挂载组件
    const wrapper = mount(MyComponent);
 
    // 断言渲染结果是否符合预期
    expect(wrapper.text()).toContain('默认文本');
  });
 
  test('点击按钮后应更新文本', async () => {
    // 创建响应式数据
    const message = ref('默认文本');
 
    // 挂载组件，并传入props
    const wrapper = mount(MyComponent, {
      props: { message },
    });
 
    // 触发按钮点击事件
    await wrapper.find('button').trigger('click');
 
    // 等待Vue更新DOM
    await wrapper.vm.$nextTick();
 
    // 断言更新后的渲染结果
    expect(wrapper.text()).toContain('更新后的文本');
  });
});

这个代码实例展示了如何使用Vue3、Typescript和Vitest来编写单元测试案例。它演示了如何挂载组件、传递props、触发事件、等待Vue更新DOM，并使用断言来验证结果是否符合预期。