Skip to content

react中写单测

原因

当你写完一个 React 组件,如何保证它的功能是正常的呢?

在浏览器里渲染出来,手动测试一遍就好了啊。

那如果这个组件交给别人维护了,他并不知道这个组件的功能应该是什么样的,怎么保证他改动代码之后,组件功能依然正常?

这种情况就需要单元测试了。

单元测试可以测试函数、类的方法等细粒度的代码单元,保证功能正常。

有了单元测试之后,后续代码改动只需要跑一遍单元测试就知道功能是否正常。

但很多人觉得单元测试没意义,因为代码改动比较频繁,单元测试也跟着需要频繁改动。

确实,如果代码改动特别频繁,就没必要单测了,手动测试就好。

因为如果手动测试一遍需要 5 分钟,写单元测试可能需要一个小时。

但如果代码比较稳定,那单测还是很有必要的,比如组件库里的组件、hooks 库里的 hooks、一些工具函数等。

手动测试 5 分钟,每次都要手动测试,假设 20 次,那就是 100 分钟的成本,而且还不能保证测试是可靠的。

写单测要一个小时,每次直接跑单测自动化测试,跑 100 次也是一个小时的成本,而且还是测试结果很可靠。

综上,单元测试能保证函数、类的方法等代码单元的功能正常,把手动测试变成自动化测试。

但是写单元测试成本还是挺高的,如果代码改动频繁,那手动测试更合适。一些比较稳定的代码,还是有必要写单测的,写一次,自动测试 n 次,收益很大。

react 组件和 hook 的单测写法

主要是用 @testing-library/react 这个库,它有一些 api:

  • render:渲染组件,返回 container 容器 dom 和其他的查询 api
  • fireEvent:触发某个元素的某个事件
  • createEvent:创建某个事件(一般不用这样创建)
  • waitFor:等待异步操作完成再断言,可以指定 timeout
  • act:包裹的代码会更接近浏览器里运行的方式
  • renderHook:执行 hook,可以通过 result.current 拿到 hook 返回值

jest 的 api 加上 @testing-libary/react 的这些 api,就可以写任何组件、hook 的单元测试了

上次更新于: