react与react-hook测试

[xiaochengzi6]

react 测试

针对与 react-hook的测试 所使用的是 jest 测试框架， 使用 react-testing-library可以测试 react 关于测试环境和RTL的介绍可以看这篇文章

主要是针对 ui 的测试，ui 相当于已经确定了使用场景 我们只需要从两个方面来测试就行，一个是最终用户站在用户的角度上测试不需要关注代码细节，二是开发人员对于需要参数的组件我们要针对参数进行测试，这样测试应该能满足绝大部分的使用场景确保组件不会出现过多的 bug

在使用 RTL 包对组件进行测试的时候主要关注点就两个

1. 如何获取 dom 节点: 你要挑选什么样的 dom 节点，不同的节点使用的 API 也不相同 可以参考这篇文章
2. 获取后你要触发的事件是什么？

hook 测试

hook 测试没有太多的复杂性，就是针对 hook 的参数和返回值进行测试 详细教程

最经常使用的有 renderHook、act 使用 renderHook 去渲染 hook 通过 act 函数去改变状态或调用 hook 抛出的方法
例如：

import { act, renderHook } from '@testing-library/react-hooks';
import useMap from '../index';

const setUp = (initialMap?: Iterable<[any, any]>) => renderHook(() => useMap(initialMap));

//...
it('test_1', () => {
  const {result} = setUp()
  // ...
})

renderHook 的参数有两个 render && options 在测试 hook 时 render 通常时一个函数返回 hook 可以将其简单的看成一个组件，为了方便在不同测试套件中使用需要封装一个 setUp 的函数，主要用于初始化 比如：const setUp = (initialMap?: Iterable<[any, any]>) => renderHook(() => useMap(initialMap))

renderHook 返回三个值

1. result： 执行后的结果
2. render: 用于组件重新渲染
3. unmount：卸载组件时调用的函数

通常会在 act 函数中去执行这些方法 关于这方面的测试示例推荐看 ahook 中的源码里面写的很详细

对于一些需要传参的 hook 要额外注意，hook 的使用者是开发人员，所以将会假定传入的参数的类型一定是相匹配的，主要针对的就是 hook 参数类型不确定 或者 传入的是函数类型的参数 要注意，关于测试这个实在没有啥通用性介绍想要深入只有不停的写测试和看测试示例才行。

参考文章和仓库

1. 使用 React Testing Library 和 Jest 完成单元测试
2. 比较推荐的react测试示例
3. kent大神写的示例属于必看
4. 相对可以
5. 有点过时的教程
6. 浅显易懂的测试示例