Vue3+Typescript+Vitest单元测试环境+组件测试基础篇
上一章我们把环境配置好了，并且进行了最简单的一个单元测试Vue3+Typescript+Vitest单元测试环境+基础用例篇
现在让我们去编写一个最简单的组件
这个代码包含最简单的部分，就是一个按钮，接受一个内容插槽、自身有一个button样式
了解相关API
不同于普通的函数、组件要被测试，应该要挂载，所以第一步应该将组件挂载上去，到底怎么挂载？此时我们就需要借助@vue/test-utils这个库来帮我们实现在node环境挂载组件文档地址，这个是它的快速起步教程，从包里面导出一个mount方法，第一个参数接受一个组件，也可以回调形式传入，第二个参数接受组件的参数。具体参数查看官网，还有第三个参数，是配置项，详情看第二个代码块MountingOptions
import { mount } from '@vue/test-utils'// The component to test
const MessageComponent = {template: '<p>{{ msg }}</p>',props: ['msg']
}test('displays message', () => {const wrapper = mount(MessageComponent, {props: {msg: 'Hello world'}})// Assert the rendered text of the componentexpect(wrapper.text()).toContain('Hello world')
})
这个是mount的第三个配置参数
interface MountingOptions<Props, Data = {}> {attachTo?: HTMLElement | stringattrs?: Record<string, unknown>data?: () => {} extends Data ? any : Data extends object ? Partial<Data> : anyprops?: (RawProps & Props) | ({} extends Props ? null : never)slots?: { [key: string]: Slot } & { default?: Slot }global?: GlobalMountOptionsshallow?: boolean
}function mount(Component, options?: MountingOptions): VueWrapper
开始组件测试
编写测试代码,其中wrapper是被mount返回的一个VueWrapper，上面有非常多的属性和方法，是我们多维度判断组件和测试的关键所在
VueWrapper解释
让我们看看测试效果吧
记得先将第一个基础测试例子中的toBe（2）改成toBe（1），因为那是上一章演示错误的情况，我们测试通过，它被渲染出来了
这个toBeTruthy是一个宽泛的断言，除非显式错误，否则都将断言通过，我们这里只关心是否存在，不关心细节，所以用这个断言最好了，其中expect有非常多的断言方法，都是见名知意的
现在让我们深入测试组件的内部细节
测试插槽内容是否渲染正确
让我们增加一个测试项目，测试一下插槽内容是否正确渲染
测试结果如下，这里我就使用到了wrapper的text方法，得到其文本节点
测试类名
增加一个测试项，测试类是否在其中
测试结果如下
好了以上就是我们的最基本的组件测试，我们测试组件的挂载效果、组件的插槽、组件的类。下一章我们会更深入的测试组件的细节，例如组件的点击事件、v-model、props属性之类的