Vue3+Typescript+Vitest单元测试环境+组件测试基础篇

// 引入Vue测试实用工具以及Vitest的API
import { mount } from '@vue/test-utils';
import { test, expect } from 'vitest';
// 引入需要测试的组件
import MyComponent from '../MyComponent.vue';
 
// 定义测试块
test('MyComponent should display message correctly', async () => {
  // 挂载组件，并传入props
  const wrapper = mount(MyComponent, {
    props: {
      message: 'Hello, Vitest!'
    }
  });
 
  // 等待Vue更新DOM
  await wrapper.find('.message').exists();
 
  // 断言组件的文本内容是否符合预期
  expect(wrapper.text()).toContain('Hello, Vitest!');
});

这段代码展示了如何使用Vitest来对一个Vue 3组件进行单元测试。它首先引入了必要的库，然后定义了一个测试块，在这个块中它挂载了一个带有props的组件，并通过find和exists方法等待DOM更新。最后，它使用expect方法进行了一个断言，以验证组件的文本内容是否符合预期。这是Vue组件测试的基础，对于开发者熟悉如何编写单元测试是有帮助的。