一、自动化测试（TDD）的一些概念：
自动化测试（TDD）概念：
自动化测试是指 使用独立于待测软件的其他软件或程序来自动执行测试，比较实际结果与预期 并生成测试报告这一过程。在测试流程已经确定后，测试自动化可以自动执行的一些重复性但必要的测试工作。也可以完成手动测试几乎不可能完成的测试。
自动化测试分类：
自动化测试有什么意义
前端自动化测试（基于图形用户交互界面测试GUI）有哪些：
二、Vitest
1、什么是Vitest
vitest是由vite提供支持的下一代测试框架
该工具一开始就考虑到了vite，利用了在DX中的改进，例如即时热模块重新加载（HMR）
2、vite的目标
定位为vite项目的首选测试运行者，甚至对于不使用vite的项目来说也是一个可靠的替代方案
3、vitest和其他测试框架的比较
3.1 Jest vs Vitest
Jest
- 接管了测试框架领域，jest团队和社区创建了很多测试API,并推动了许多测试模式，这些模式已经成为了web生态系统的标准
Vitest
- 你的项目没有使用vite：提供大多数与jest的api和生态系统的兼容性，可以让你更快地运行单元测试，在大多数项目中，是Jest的直接替代品
- 你的项目使用vite：如果使用Jest，那么需要配置和维护两个不同的管道，这是不合理的，如果使用vitest，那么您可以将开发，构建，测试环境的配置定义为单个管道，共享相同的插件和相同的vite.config.js,避免了重复性的麻烦
3.2、Cypress vs Vitest
cypress 定义
vitest定义
cypress 功能
vitest 功能
4、vitest配置
安装：
package.json配置
运行模式，运行或者监听
可以直接在当前的vite.config.ts文件中配置
也可以单独创建一个vitest.config.ts文件，优先级高于vite.config.ts
import { fileURLToPath } from 'node:url'
import { mergeConfig, defineConfig, configDefaults } from 'vitest/config'
import viteConfig from './vite.config'
export default mergeConfig(
viteConfig,
defineConfig({
define: {
'import.meta.vitest': 'undefined', // 源码内联测试配置
},
test: {
// 启用基准测试模式
mode: 'benchmark',
// globals: true, // 全局引入vitest 位置一
environment: 'jsdom',
exclude: [...configDefaults.exclude, 'e2e/*'],
includeSource: ['src/**/*.{js,ts}'],
root: fileURLToPath(new URL('./', import.meta.url)),
coverage: {
provider: 'istanbul', // or 'v8' 默认使用v8
reporter: ['text', 'html', 'json'],
// reporters: ['verbose'],
reporters: ['html'],
// reportsDirectory: './tests/unit/coverage', // 修改输出报告位置
exclude:['src/**/icons'] //不需要单元测试覆盖的地方
},
// browser: {
// enabled: true,
// name: 'chrome', // browser name is required
// },
}
})
)6、测试可过滤
当只需要运行某个测试文件，或者包含某字符串的测试文件
将只执行包含 basic 的测试文件，例如：
7、 .concurrent、.sequential
如果在测试套件中使用 .concurrent，则其中的每个测试用例都将并发运行。
你还可以将 .skip（跳过）、.only （仅执行这个）和 .todo （待完成）用于并发测试套件和测试用例。
sequential 按顺序测试
fails 明确表示断言失败
运行并发测试时，快照和断言必须使用本地测试上下文中的 expect，以确保检测到正确的测试。
8、快照
当希望确保函数的输出不会意外更改时，可以使用快照测试，兼容 Jest 快照测试。使用快照时，Vitest 将获取给定值的快照，将其比较时将参考存储在测试旁边的快照文件。如果两个快照不匹配，则测试将失败：要么更改是意外的，要么参考快照需要更新到测试结果的新版本。
9、对象模拟(Mocking)
10、测试覆盖率
Vitest 通过 v8（默认） 支持原生代码覆盖率，通过 istanbul 支持检测代码覆盖率。
定义输出报告的格式
这个属性定义了覆盖率报告的输出格式。这里指定了三种格式：文本、JSON 和 HTML。这意味着在运行测试时，Vitest 将生成并输出这三种格式的覆盖率报告。
11、源码内联测试
更新配置文件
12、ts类型测试
import { assertType, expectTypeOf ,test} from 'vitest'
import { mount } from '../../assets/common'
test('my types work properly', () => {
expectTypeOf(mount).toBeFunction()
expectTypeOf(mount).parameter(0).toMatchTypeOf<{ name: string }>() // 验证 mount 函数的第一个参数的类型是否为 { name: string }。
// @ts-expect-error name is a string // 这是一个注释，指示 TypeScript 在编译时应该期望一个错误，因为接下来的代码会尝试将一个非字符串值赋给 name。
assertType(mount({ name: 42 })) // 尝试调用 mount 函数并传递一个对象作为参数，其中 name 的值是 42（一个数字，而不是字符串）。由于前面的注释，TypeScript 应该期望这里有一个类型错误。
})说明
此功能可用于:
- 小范围的功能或 utils 工具的单元测试
- 原型设计
- 内联断言
对于更复杂的测试，比如组件测试或 E2E 测试，建议使用单独的测试文件取而代之。
vitest 退出及时更新模式
1、两种单元测试文件名.spec.ts文件和.test.ts的区别：
- .spec.ts文件和.test.ts文件在软件开发中都用于编写测试代码，但它们之间存在一些关键的区别。
- 首先，规范（spec）文件通常用于描述和验证行为，特别是在软件开发中。在Angular开发中，规范文件是用于编写单元测试和集成测试的脚本文件。这些文件扩展名为“spec.ts”，并且在Angular开发中，每个.ts文件都应对应一个.spec.ts文件。它们通过Karma测试运行程序（使用Jasmine JavaScript测试框架）来运行测试。
- 另一方面，test.ts文件通常用于编写任何类型的测试代码，包括单元测试、集成测试等。这些文件扩展名为.ts，并且它们没有特定的命名约定或用途。它们可以用于任何需要测试的场合，包括但不限于软件开发。
- 总的来说，.spec.ts文件和.test.ts文件之间的主要区别在于它们的用途和上下文。规范文件主要用于描述和验证行为，特别是在软件开发中，而test.ts文件则用于任何需要测试的场合，没有特定的用途或目标。
compose函数
