在 vue3 中进行单元测试 ​

如果你已经是 vue2 测试的老手，那么 vue3 的测试你一定可以信手捏来

测试准则 ​

测试文件规范 ​

测试文件的命名规范为：*.test.js，*为需要测试的组件名称或文件名称，文件放在模块的tests目录下，比如短信模块的测试文件目录结构如下：

.
├─ message
│ ├─ **tests**
| └─ New.test.js

测试规范 ​

文件结构 ​

测试文件的命名规范为：*.test.js，*为需要测试的组件名称或文件名称，文件放在模块的__tests__目录下，比如短信模块的测试文件目录结构如下：

.
├─ message
│  ├─ __tests__
|     └─ New.test.js

命名 ​

在需要测试的 dom 或组件上添加data-test属性，不要使用className来测试，因为它们可能会被删除或变动。正确的测试如下：

<Foo data-test="foo" class="foo" />
<button data-test="saveButton" />

相关文档 ​

组件测试文档

vitest 文档

测试功能 ​

测试起步 ​

• mount/shallowMount

渲染测试组件的方法，具体的区别见此处。 mount 和 shallowMount 在注册时可以传入一些选项帮助我们完善测试环境所需要的上下文：首先让我们了解下最常用到的两个配置 stubs 和 mocks。

• global.stubs
  • 在 test/setup.ts 中定义全局通用的 stubs，比如：

const BlankComponent = { template: '<div><slot></slot></div>' }
config.global.stubs = {
    // 保证需要测试的组件不会跑到wrapper外面去
    Teleport: BlankComponent,
    ...
}

-   在 mount 中定义测试依赖的 stubs，比如：

mount(A.vue, {
	global: {
		stubs: {
			'test-com': BlankComponent,
		},
	},
})

• global.mocks 因为都有 compositionApi，好像不需要，有的话再完善

定义好的工具类 ​

• test/util.ts

利用 vi.spyOn 来模拟各类场景 ​

测试第三方组件，比如 A-Table ​

import { Table } from 'ant-design-vue'
mount(A.vue, {
	global: {
		stubs: {
			'a-table': Table,
		},
	},
})

测试第三方库的方法，比如 message ​

// __test__/setup/request.js
import { message } from 'ant-design-vue'
...
const mockSuccess=vi.spyOn(message,'success').mockResolvedValue({})
const wrapper=mount(New)
expect(mockSuccess).toBeCalled()

处理异步请求 ​

• 劫持接口方法

  TIP

  可以在每个测试单独执行，也可以在头文件执行

// __test__/setup/request.js
import * as service from '@/api/task'
...
vi.spyOn(service, 'GetMyTaskInfo').mockResolvedValue({
	...
})

• 等待异步请求执行完成

由于异步请求是一个微任务，所以我们在下一个宏任务中执行断言，这时候需要等待异步请求执行完成，可以在测试中使用flushPromises：

await flushPromises()

运行完整的测试 ​

yarn test:unit

测试覆盖率 ​

• 运行命令

yarn coverage

QAs: ​

如何将文件排除在测试外 ​

skip.的开头 ts 或者 vue 文件不会包含到测试和测试覆盖率中

如何对单个测试文件进行调试 ​

• 手动调用

yarn test:unit {filePath}

• 配置 VSCode 并执行 task