开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第6天，点击查看活动详情

前言

关于前端单元测试，说实话，大部分中小公司在实际项目开发中并不会使用到，但是我还是希望大家能有一个意识，就是 你可以不用，但是不能不懂 ，这对于你了解整个测试体系，和如何保障项目项目质量，乃至当你作为一个 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 文件目录和测试文件，这里我们来简单测试一下加法

2022-11-26 23 10 44

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

2022-11-26 23 15 10

这时控制台会报用例不通过，这时我们把用例2的 toEqual 改为 1 + 1 = 2，保存一下

2022-11-26 23 29 05

这时用例就通过啦，到此，我们就完成了一个简单的单元测试编写，相信你对测试驱动开发也有一定的了解了，下一篇，我们在对 Vitest 中各种验证方法做详细讲解，敬请期待 ^-^

如何使用 Vitest 在前端项目中做单元测试 TDD

前言