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: '
{{ msg }}
',
  props: ['msg']
}

test('displays message', () => {
  const wrapper = mount(MessageComponent, {
    props: {
      msg: 'Hello world'
    }
  })

  // Assert the rendered text of the component
  expect(wrapper.text()).toContain('Hello world')
})

这个是mount的第三个配置参数

interface MountingOptions<Props, Data = {}> {
  attachTo?: HTMLElement | string
  attrs?: Record<string, unknown>
  data?: () => {} extends Data ? any : Data extends object ? Partial<Data> : any
  props?: (RawProps & Props) | ({} extends Props ? null : never)
  slots?: { [key: string]: Slot } & { default?: Slot }
  global?: GlobalMountOptions
  shallow?: boolean
}

function mount(Component, options?: MountingOptions): VueWrapper

开始组件测试

编写测试代码,其中wrapper是被mount返回的一个VueWrapper，上面有非常多的属性和方法，是我们多维度判断组件和测试的关键所在

VueWrapper解释

让我们看看测试效果吧

记得先将第一个基础测试例子中的toBe（2）改成toBe（1），因为那是上一章演示错误的情况，我们测试通过，它被渲染出来了
这个toBeTruthy是一个宽泛的断言，除非显式错误，否则都将断言通过，我们这里只关心是否存在，不关心细节，所以用这个断言最好了，其中expect有非常多的断言方法，都是见名知意的

现在让我们深入测试组件的内部细节

测试插槽内容是否渲染正确

让我们增加一个测试项目，测试一下插槽内容是否正确渲染

测试结果如下，这里我就使用到了wrapper的text方法，得到其文本节点

测试类名

增加一个测试项，测试类是否在其中

测试结果如下

好了以上就是我们的最基本的组件测试，我们测试组件的挂载效果、组件的插槽、组件的类。下一章我们会更深入的测试组件的细节，例如组件的点击事件、v-model、props属性之类的