前言
关于前端单元测试，说实话，大部分中小公司在实际项目开发中并不会使用到，但是我还是希望大家能有一个意识，就是 你可以不用，但是不能不懂 ，这对于你了解整个测试体系，和如何保障项目项目质量，乃至当你作为一个 leader 时如何去把控项目中潜在的风险极为重要，本篇就带着大家一起，从了解各种测试概念开始，到如何使用 Vitest 写单元测试，来让你对什么是TDD有个最基本的认识
测试的分类
单元测试
单元测试主要测试单元是否符合“设计”
集成测试
集成测试既验证“设计”，又验证“需求”
系统测试
系统测试主要测试系统是否符合“需求规格说明书"
TDD
TDD: Test-driven development （测试驱动开发，先写测试用例在开发）
优点
- 长期减少回归bug
- 代码质量更好
- 测试覆盖率高
- 错误的测试代码不容易出现
缺点
- 代码量大
- 耦合度高
- 过于独立
TDD 的开发流程
- 编写测试用例
- 运行测试用例，用例不通过
- 编写代码，使用例通过测试
- 优化代码，完成开发
- 重复上述流程
简单介绍完 TDD ，我们来一起了解下 Vitest
关于 Vitest
Vitest 是一个相对较新的、以 Vite 为基础的单元测试框架。Vitest 旨在将自己定位为 Vite 项目的首选测试框架，当然，即使对于不使用 Vite 的项目也是一个可靠的替代方案
官网 Vitest | 由 Vite 提供支持的极速单元测试框架
安装与使用
npm install -D vitest 复制代码
package.json添加命令
"scripts": { "dev": "vite", "build": "vite build", "preview": "vite preview", "test": "vitest" } 复制代码
执行
npm run test 复制代码
执行这个命令时，会自动查找我们项目中的 [name].test.js 或者 [name].spec.js 的文件，此时由于我们还没有编写用例，项目会报错，没关系，我们马上来编写测试代码
编写单元测试
- 新建 test 文件目录和测试文件，这里我们来简单测试一下加法
- add1.spec.js
import { expect, test } from 'vitest' function add(a, b) { return a + b } test('加法1', () => { expect(add(1, 1)).toEqual(2) // 测试 1 + 1 = 2 }) 复制代码
- add2.test.js
import { expect, test } from 'vitest' function add(a, b) { return a + b } test('加法2', () => { expect(add(1, 1)).toEqual(1) // 测试 1 + 1 = 1 }) 复制代码
- 这时我们在执行下 npm run test
这时控制台会报用例不通过，这时我们把用例2的 toEqual 改为 1 + 1 = 2，保存一下
这时用例就通过啦，到此，我们就完成了一个简单的单元测试编写，相信你对测试驱动开发也有一定的了解了，下一篇，我们在对 Vitest 中各种验证方法做详细讲解，敬请期待 ^-^
