单元测试

了解单元测试

在日常中，我们常会听到自动化测试相关的词汇，那么我们先来了解一下自动化测试有哪些。

1、自动化测试分类

自动化测试类型常分为以下三种，各有优缺点：

单元测试（Unit Test)
- 对项目中低耦合的工具类库和公共子组件进行测试，较为简单，能在一定程度上保障代码质量
集成测试（Integration Test）
- 对于耦合度较高的函数/组件对外暴露的接口进行测试，能较大程度保障产品质量，但开发成本高
UI测试（UI Test）
- 前端中UI变动大，适合人工检查

这篇文章就是学习单元测试的记录。

了解测试术语

1、TDD（测试驱动开发）
2、BDD（行为驱动开发）
3、测试覆盖率
4、快照测试
5、模拟函数
6、断言

2、单元测试框架

Jest：是一个广受欢迎的单元测试框架，简单易用，功能强大。
Vitest：它由 Vue / Vite 团队成员开发和维护，在 Vite 的项目集成它会非常简单，而且速度非常快。
Mocha：一个灵活的测试框架，需要各种插件来配合使用。
Karma：能在真实的浏览器中测试，可配置其他单元测试框架
Jasmine：功能全面的测试框架，相对复杂、不够灵活

3、单元测试适用的测试对象有哪些？

1、常见工具类函数
2、公共子组件
3、接口请求数据

Jest 单元测试基础入门

1、实战测试

首先简单看一个代码示例：

//一个简单的纯函数 math.js
const sum = (a,b) => a + b
export default sum

//单元测试 math.test.js
import sum from './math'
describe('Math module',()=>{
    test('测试加法',()=>{
        const number = 1
        const anotherNumber = 2
        const result = sum(number,anotherNumber)
        //expect期待  表示期望我们的结果是3  会返回true或false
        expect(result).toBe(3)
    })
})

想要执行它，我们得在package.json中添加我们的测试指令：

"script":{
    "test": "jest"
}

这样我们在命令行中执行yarn test就可以执行测试了。正常来说是没有问题的，假设我们不小心改到了sum函数，变成const sum = (a,b) => a + 1，那么 Jest测试就会为我们显示错误:

Expected: 3

Received: 2

2、Given/When/Then 的套路

Given/When/Then 的套路也可以用 3个A 来表示：Arrange、Act、Assert

Arrange：准备测试数据--有时可以抽取到beforeEach
Act：采取行动--调用相应的模块，执行对应的函数或组件渲染方法
Assert：断言--借助于 Matchers断言器 的能力来判断结果是否符合预期，Jest还支持扩展自定义Matcher

3、断言语句 Matcher

toBe(value) 例：expect(1+1).toBe(2) 也可以不等于 expect(1+1).not.toBe(3)
toEqual(value) 与toBe类似，但区别是：toBe类似于===，而同Equal类似于==
toBeFalsy() 判断布尔值
toHaveLength(number) 判断数组长度
toHaveBeenCalled() 判断当前方法是否被调用
toHaveBeenCalledTimes(number) 判断当前方法被调用的次数
toThrow(error?) 查看异常
expect.extend(matchers) 可扩展自定义断言器

前端-单元测试-基础入门