react项目测试

前言

如果你学会了，可以忽略本文章，或去项目经验地图寻找更多答案

---

测试的得与失

得：

1. 提供描述组件行为的文档
2. 节省手动测试的时间
3. 减少研发新特性时产生的bug
4. 改进设计
5. 促进重构

​
失：

1. 写测试很耗费时间，用时间换取代码质量，或者项目质量，但后期节省时间，成熟项目必备
2. 测试代码的量，要高于代码量，如：Vue代码7000行，测试代码20000行

---

测试分类

单元测试unit testing：针对一些内部机制的核心逻辑，使用代码进行编写
集成测试integration testing： 集合多个测试过的单元一起测试
端对端测试E2E testing：真实测试

---

单元测试 - jest： 通用测试工具（一套搞定）

1. 支持多种框架
2. 零配置
3. 安全和运行速度快
4. 支持生成表格
5. 简单明了
6. create-react-app 内置框架

jest用法

关键字
describe：定义一个测试套件
it/test：定义一个测试用例
expect：预期

一般语法：
expect(测试内容).表达式

简单例子：
test('test name', () => {
   
	let n = true, x = false
    expect( 2 + 2).toBe(4)          //期待2 + 2 = 4
    expect( 2 ).toBeGreaterThan(1)  //期待2 < 1
    
    expect(n).toBeTruthy()          //期待n是true
    expect(x).not.toBeTruthy()      //期待x不是true
})


//jest库方法：
beforeAll：在执行所有方法之前执行该函数
afterEach：每一个测试跑完以后，都重置mock路由
afterAll：所有测试跑完后，关闭mock路由

---

React 测试

react组件，函数式开发，单向数据流的特性适合单元测试

常用类库

@testing-library/react             react测试
@testing-library/react-hooks       hook测试
msw                                请求测试

例子

测试hook

import {
    useAsync } from 'utils/use-async'
import {
    act, renderHook } from '@testing-library/react-hooks'

const defaulState = ReturnType<typeof useAsync> = {
   
    stat: 'idle',
    data: null,
    error: null,
    isIdle: true,
    isLoading: false,
    isError: false,
    isSuccess: false,
    
    run: expect.any(Function), //随便返回一个函数
    setData:expect.any(Function),
    setError: expect.any(Function),
    retry: expect.any(Function),
}

const loadingState:  ReturnType<typeof useAsync> = {
   
    ...defaulState,
    stat: 'loading',
    isIdle: false,
    isLoading: true
}

const successState:  ReturnType<