前端单元测试

什么是单元测试

针对程序模块（软件设计的最小单位）来进行正确性检验的测试工作。

单测作用

1. 保证代码质量
2. 增强开发者信心
3. 降低bug出现与复现

单测现状

1. 不重视单元测试
2. 没有时间编写单元测试
3. 不会使用单元测试

测试思想

• TDD：Test-Driven Development（测试驱动开发）
  编写某个功能的代码之前先编写测试代码，仅编写使测试通过的功能代码，通过测试来推动整个开发的进行
• BDD：Behavior-Driven Development（行为驱动开发）
  使用自然语言来描述系统功能和业务逻辑，根据描述步骤进行功能开发,然后编写的测试代码

测试类型

• 单元测试（Unit Test）
  作用: 保证最小单位的代码与预期结果一致性
  应用: 公共函数,单个组件
• 集成测试（Integration Test）
  作用: 测试经过单元测试后的各个模块组合在一起是否能正常工作
  应用: 耦合度较高的函数/组件、二次封装的函数/组件、多个函数/组件组合而成的代码
• 界面测试（UI Test）
  作用: 脱离真实后端环境,程序中数据来源通过Mock模拟
  应用: 开发过程中的自测
• 端到端测试(E2E test)
  作用: 整个应用程序在真实环境中运行,数据来源后端
  应用: 测试工程师手工测试与自动测试

通过测试框架:

react 框架两种测试搭配方案

• airbnb 系(开发者 自行配置)
  enzyme + chai + sinon + jest
  enzyme: 模拟react组件运行及输出, 操作、遍历
  chai: BDD / TDD 断言库，适用于节点和浏览器，可以与任何 js 测试框架搭配
  sinon: 具有可以模拟 spies, stub, mock 功能的库
• testing-library 系
  jest-dom + React Testing Library+ user-event + jest
  CRA 3.3 以后版本默认配置
  react testing library: 简单而完整的 React DOM 测试实用程序
  jest-dom: 自定义 jest 匹配器来测试 DOM 的状态
  user-event: 以与用户相同的方式触发事件(对事件的模拟)

jest 基本使用

每一个测试用例称为一个case,一个case就是一个独立的功能点,用test()函数代表一个case

// 基本用法
test('用例名称', ()=>{
	// 用例逻辑
	expect(2+2).toBe(4)
	expect(2+2).not.toBe(5)
})

boolean类型

// 基本用法
test('用例名称', ()=>{
	// 用例逻辑
	expect(2+2).toBeTruthy(4)
	expect(2+2).not.toBeFalsy(5)
})

number类型

// 基本用法
test('用例名称', ()=>{
	expect(4).toBeGreaterThan(3)
	expect(2).toBeLessThan(4)
})

object类型

// 基本用法
test('用例名称', ()=>{
	expect({name:'heihei'}).toEuql({name:'heihei'})
})