官网：Jest中文官网
Jest 单元测试
jest 是一个框架测试，保证项目代码的可靠性，需求正确性。
生命周期 beforeAll、afterAll、beforeEach、beforeEach: (fn: ProvidesCallback, timeout?: number) => any
项目中语法的用法
-
describe作用域：(name: number | string | Function | FunctionLike, fn: EmptyFunction): void- 用法： 是一个函数，可以同时创建多个test包裹进行测试, 用于同时测试多个测试用例情况
- onle: 只运行该函数
- skip：跳过测试该函数
-
it或test:(name: string, fn?: Callback, timeout?: number): void- Callback的第一个参数done方法表示当前微任务（个人测试）结束后当前测试任务结束,可以返回Promise 第三个参数是异步函数测试的超时时间.
- it 表示区分不同状态时使用
- onle： 只运行
- skip： 跳过测试该函数
- test 测试模块时使用，函数里面可以填入测试内容
-
expect用于校验测试是否通过的方法，常见有严格相等expect(1).toBe(1)、会判断对象中的值是否相等，进行递归遍历深度比较expect({a: 1}).toEqual({a: 1})、expect(null).toBeDefined()判断数据有无赋值、expect().not.not一般情况下用于数据取反。 -
jest.fn()： 函数缓存，jest.fn()用来模拟函数mockReturnValue:jest.fn().mockReturnValue设置函数返回值。
Jest 模拟函数，模拟 usestate 数据方式
type Mock = () => object
-
使用Jest.mock
(url: string，functions: Mock) => void- 传入一个文件夹绝对路径， 一个函数方法来模拟数据
- 传入方法时应该返回一个对象，对象中的key表示的是当前组件中需要处理返回数据的值，当然对象中接收的也是函数方法。
- 使用到这个的时候需要注意，该mock方法是在初始化前进行调用。如组件中使用到需要更新view的时候，调用mock会出现act报错
-
Jest.spyOn
- spyOn是对于jest.mock的细分，可以更简单的在test里面进行调用该函数方法进行数据模拟。
如何给路由mock数据
示例
jest.mock('react-router', () => {
...jest.requireActual('react-router'),
... ##在这输入你需要mock返回的参数
});
如何高效提高覆盖率
对于每一个文件都应该存在自己的jest文件, 通过不同的jest.mock把子组件文件进行模拟测试, 然后通过jest.fn()定义一个函数，在jest.mock()中返回的props进行调用,通过expct(fn).toBecalledWith(object),判断当前组件使用进行调用该组件，有没有正确进行执行组件数据。
示例
const test = jest.fn();
jest.mock(path, () => (props) =>{
test(props);
return <>{props.children}</>
});
## 在test用例进行判断是否调用使用到
test('test', async () => {
render(Component);
expect(test).toBecalledWith(object) ## 这里的对象是props传入值
});
## 当然如果你遇到不确定的数据或者方法可以使用expect.any(Type)来模拟数据 #Type是数据类型
不同的jest.mock()有不同形式处理，直接在mock使用输入回调函数就会直接返回一个path数据,这个数据是固定的, 如果需要通过不同返回值来render不同组件数据效果可以有以下方式进行操作
示例
import {API} from 'path'
jest.mock(path);
## 可以通过jest.mock().mockRetrunValue 来实现不同返回值效果
test('test', () => {
(API as jest.mock).mockRetrunVlaue(object); #这里返回的object就是你所需要的数据,可以通过不同的test 测试用例来模拟API返回值来render不同场景下组件所需要的值。
})
怎么在测试用例上操作组件上点击事件
-
JEST提供了一个fireEvent给我们进行操作事件触发, 只要在fireEvent.click中传入测试用例中的元素节点就可以操作当前元素进行触发点击事件,当然其他的原生事件都是可以用相同方式进行触发的, 在执行前使用waitFor函数包裹,在里面进行执行,这样子可以保证是组件渲染完进行触发事件,可以保证事件的安全性。
示例 jest.mock(ComponentPath, () => () => { return <div data-testid="test" onClick={() => {console.log('我被点击了')}}></div> }); #上面我模拟了一个组件 返回了一个testid为test的标签 test('click TEST', async() => { const { screen } = render(Component); await waitFor(() => { fireEvent.cilck(screen.getByTestId('test')); }) })
