前端自动化测试

• 主要解决的问题： 在一些稳定性高的项目中，每次调整代码一点代码，就需要重新测试一遍。

测试就两步，执行代码，断言结果

1. 测试分类

• 单元测试【自动化测试主要场景】
  • 针对程序模块（软件设计的最小单位）来进行正确性检验的测试工作。
  • 例如： (添加) 、 （修改） 、 （删除）
• 集成测试
  • 在单元测试的基础上，单元拼接为子系统或子应用。
  • 例如： (添加 -> 修改 -> 删除)
• 端到端测试
  • 把集成好的应用，放到不同应用终端中进行实际运行测试。
  • 例如：测试不同浏览器的兼容、 安卓ios设备上的表现、 不同分辨率下的表现。
• 性能测试
  • 锦上添花，是对系统的响应速度、 吞吐量、 稳定性等性能指标进行测试。
  • 例如：测试首页加载速度、 测试接口响应速度、 测试接口吞吐量、 测试接口稳定性。
• 安全测试
  • 测试系统的安全性，防止系统被攻击。
  • 例如：测试接口的安全性、 测试接口的参数的安全性、 测试接口的返回值的安全性、 测试接口的权限的安全性。

2. 主流自动化测试框架

• Jest 【最热门】
  • 是 Facebook 开源的一个测试框架， 是针对模块进行测试，单元测试对单个模块进行测试，集成测试对多个模块进行测试。
  • 特点： 速度快（单模块测试时，执行过的模块不会重复执行），API 简单，易配置，隔离性好（执行环境相对隔离，每个文件单独隔离互不干扰），监控模式（更灵活的运行各种测试用例），适配编辑器多
  • 官网
• Mocha
  • 是一个功能丰富的 JavaScript 测试框架， 可以用来测试 JavaScript 代码。
  • 特点： 可以在浏览器和 Node.js 环境中运行，可以与其他库和框架集成，可以生成易于阅读的测试报告，可以使用各种插件和扩展来增强其功能。
  • 官网
• Vitest 【下一代】
  • 是一个现代的、快速的 JavaScript 测试框架，专为 Vite 开发环境而设计。
  • 特点：定位为 Vite 项目的首选测试框架
  • 文档

拥抱Vite， 下面将介绍Vitest的使用。

3. Vitest 安装

需要 Vite >= 5.0

初始化项目create vite 可以直接选择vitest

Vitest 的主要优势之一是它与 Vite 的统一配置。如果存在， vitest 将读取你的根目录 vite.config.ts以匹配插件并设置为你的 Vite 应用。

后安装vitest步骤如下：

• 安装

npm install -D vitest @vue/test-utils

• 添加命令

// package.json
{
  "scripts": {
    "test": "vitest"
  }
}

4. Vitest 配置

• 配置文件
  • 可以在项目根目录下创建一个 vitest.config.ts 文件，它将具有更高的优先级，并且会覆盖 vite.config.ts 中的配置
  • 配置文件支持 TypeScript， JavaScript。
  • 执行测试命令： npm run test 默认会搜索全局 test 目录下的测试文件，也可以通过 --dir 指定目录。
• vitest.config.ts 配置

// vitest.config.ts
import { defineConfig } from 'vitest/config';

export default defineConfig({
  test: {
    
  },
});

测试规范

• 测试文件 用.test.js 或者 .test.ts 结尾,

• 写在 src/test/ 目录下， 或者 src/components/下, 开发与测试一起更方便维护。

• 因为 vitest 内置 Chai 进行断言和与 Jest expect 兼容的 APIs,所以断言风格会比较多样，所以建议统一使用 describe 和 it

TODO 进行中