如何对react hooks进行单元测试的方法


Posted in Javascript onAugust 14, 2019

写在前面

使用 react hook 来做公司的新项目有一段时间了,大大小小的坑踩了不少。由于是公司项目,因此必须要编写单元测试来确保业务逻辑的正确性以及重构时代码的可维护性与稳定性,之前的项目使用的是 react@15.x 的版本,使用 enzyme 配合 jest 来做单元测试毫无压力,但新项目使用的是 react@16.8 ,编写单元测试的时候,遇到不少阻碍,因此总结此篇文章算作心得分享出来。

配合 enzyme 来进行测试

首先,enzyme 对于 hook 的支持程度,可以参考这个 issue,对于各个 hook 的支持程度,里面有链接,有说明,这里就不赘述了。我在这里想说的是,使用 enzyme 来测试 hook 在测试以及验证方式上的一些转变。

测试状态

由于 function component 没有实例的概念,我们无法通过类似 instance.xxx 的方式来直接对状态进行验证,比如:
对于这里的 count 是无法通过 enzyme 中 wrapper.state 的 api 来访问的,但是我们可以通过 wrapper.text 来取出 button 的文字节点,间接地测试 count 状态,如:

const Counter = () => {
 const [count, setCount] = useState(0)
 return <button>{count}</button>
}

测试方法

同理,我们也无法通过 instance.methodXXX 的方式来直接获取组件实例的方法,进而进行调用和测试,比如:

const wrapper = mount(<Counter/>)
expect(wrapper.find('button').text()).toBe('0')

如何获取 inc 方法的引用呢?我们可以通过 wrapper.prop 来曲线救国:

const Counter = () => {
 const [count, setCount] = useState(0)
 const inc = useCallback(() => setCount(c => c + 1), [])
 return <button onClick={inc}>{count}</button>
}

另外,有些情况下,我们以返回值的方式来暴露 hook 中的一些状态以及方法,如果是这样的话,就更简单了,可以通过编写 Wrapper 组件或者直接使用下一小节提及的工具库来进行测试。

使用 @testing-library/react-hooks

测试有返回值的 hook

关于这个工具库,在它的代码仓库中的 README.md 对它要解决的问题、实现原理进行了详细的说明,有兴趣的甚至可以直接看它的源码,十分简单。这里给出一个示例来演示如何测试上一小节最后所说的情况,比如我们有一个 hook:

function useCounter() {
 const [count, setCount] = useState(0)
 const inc = useCallback(() => setCount(c => c + 1), [])
 const dec = useCallback(() => setCount(c => c - 1), [])
 
 return {
  count,
  inc,
  dec
 }
}

首先,我们完全可以通过上一小节的方式来对它进行测试,只需要实现一个临时的 Wrapper,比如:

const CounterIncWrapper = () => {
 const {count, inc} = useCounter()
 return <button onClick={inc}>{count}</button>
}

const CounterDecWrapper = () => {
 const {count, dec} = useCounter()
 return <button onClick={dec}>{count}</button>
}

然后单独按照上一节提及的方式来测试 CounterIncWrapper 或者 CounterDecWrapper 就可以了,但我们会发现,这里的 Wrapper 的逻辑是很相似的,我们是否可以将它抽离为一个公用的逻辑呢?答案当然是可以的,这正是 @testing-library/react-hooks 做的,使用它我们可以这样测试 hook ,如下:

test('should increment counter', () => {
 const { result } = renderHook(() => useCounter())

 act(() => {
  result.current.inc()
 })

 expect(result.current.count).toBe(1)
 
 act(() => {
  result.current.dec()
 })

 expect(result.current.count).toBe(0)
})

这里的 act 是内置的工具方法,可以参考官方文档进行了解,任何对于状态的修改,都应该在它的回调函数中进行,不然会出现错误警告。

测试有依赖项的 hook

有些情况下,我们的 hook 会存在依赖的,比较常见的是 useContext 这个 hook ,它依赖一个 Provider 父组件,比如轻量级的状态管理库 unstated-next ,假设我们将上面的 hook 抽象成了一个独立的 Container (这里会涉及 unstated-next 的 api ,但不影响理解):

const Counter = createContainer(useCounter)

要使用这个 Container ,我们需要这样:

可以发现,这里的 CounterDisplay 依赖于 Counter.Provider ,要测试 CounterDisplay ,我们通过 renderHook 的 wrapper 参数来注入父组件,比如:

function CounterDisplay() {
 let counter = Counter.useContainer()
 return (
  <div>
   <button onClick={counter.dec}>-</button>
   <span>{counter.count}</span>
   <button onClick={counter.inc}>+</button>
  </div>
 )
}

function App() {
 return (
  <Counter.Provider>
   <CounterDisplay />
  </Counter.Provider>
 )
}

另外, renderHook 还支持 initialProps 参数,它代表回调函数中的参数,这里接不赘述了。

测试副作用

hook 中比较难搞的应该算是 useEffect ,我花了很长时间来看别人是如何对它进行单元测试的,但是并没有得到一些有用的信息,后来我仔细想了想,其实这个问题应该这样来想, useEffect 是用来封装副作用的,它只用来负责副作用的运行时机,对于副作用干了什么,对于 useEffect 完全是透明的。因此我们没有必要对它进行单元测试,而应该在副作用的实现层确保它的正确性。但我们通常会将副作用的实现与 hook 的实现耦合起来,那怎么对副作用的实现进行测试呢?这里可以分两种情况。

useEffect 会运行 props 中传递的回调函数

这种情况相对简单一些,只需要通过 jest.fn() 来构造一个 spy 函数,之后通过上一节的方式渲染 hook ,通过 jest 对于 spy 函数的 api 来进行验证即可。

useEffect 自成一体

这种情况下,我当前是通过将副作用代码,直接声明在 hook 外部的方式来进行测试的,比如:

export function updateDocumentTitle(title) {
 document.title = title
 
 return () => {
   document.title = 'default title'
 }
}

export function useDocumentTitle(title) {
 useEffect(() => updateDocumentTitle(title), [title])
}

这样,只需要单独测试 updateDocumentTitle 就好,而不需要在 useEffect 上花费功夫了。

这里可能有的人会问,你这里无法覆盖 title 改变时, effect 是否重新运行的场景,确实,当前我也没有办法解决这种问题,如果要解决,办法还是有的,就是通过 useDocumentTitle 的参数,来传递 updateDocumentTitle ,但这对于代码有很强的侵入性,我不建议这样做,如果 hook 本身的实现方式就是这样,那完全可以针对它编写相关的测试用例,如果不是,也没有必要为了写测试用例而改写原来的实现。

hook 无法被测试的原因

在对公司项目各个 hook 编写单元测试时,发现一些 hook 非常难以测试,大体的特征如下:

  • hook 的实现非常复杂,状态繁多,依赖繁多
  • hook 的实现不复杂,但外部依赖难以 mock
  • hook 的实现自成一体,没有入口

关于第一点,解决的方法当然是,化繁为简,将复杂的 hook,划分为多个简单的 hook,使其职责更单一。对于第二点,如果外部依赖难以 mock ,我建议将它的测试用例放到集成测试阶段进行实现,而不要花费过多精力在编写单元测试的 mock 逻辑上。最后一点的解决方法详见上一小节。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
菜单效果
Oct 14 Javascript
jquery 面包屑导航 具体实现
Jun 05 Javascript
JS中判断JSON数据是否存在某字段的方法
Mar 07 Javascript
jquery.hotkeys监听键盘按下事件keydown插件
May 11 Javascript
js精美的幻灯片画集特效代码分享
Aug 29 Javascript
详解JavaScript编程中的数组结构
Oct 24 Javascript
详解AngularJS Filter(过滤器)用法
Dec 28 Javascript
Bootstrap Table的使用总结
Oct 08 Javascript
Easyui在treegrid添加控件的实现方法
Jun 23 Javascript
Vue中正确使用jQuery的方法
Oct 30 jQuery
vue使用Google地图的实现示例代码
Dec 19 Javascript
详解微信小程序工程化探索之webpack实战
Apr 20 Javascript
vue 中 命名视图的用法实例详解
Aug 14 #Javascript
详解vue 命名视图
Aug 14 #Javascript
浅谈JS中this在各个场景下的指向
Aug 14 #Javascript
Vue路由模块化配置的完整步骤
Aug 14 #Javascript
微信公众号平台接口开发 获取access_token过程解析
Aug 14 #Javascript
解决vue中使用proxy配置不同端口和ip接口问题
Aug 14 #Javascript
websocket4.0+typescript 实现热更新的方法
Aug 14 #Javascript
You might like
解析在PHP中使用全局变量的几种方法
2013/06/24 PHP
PHP getallheaders无法获取自定义头(headers)的问题
2016/03/23 PHP
laravel框架 laravel-admin上传图片到oss的方法
2019/10/13 PHP
js获得当前时区夏令时发生和终止的时间代码
2014/02/23 Javascript
javascript实现页面内关键词高亮显示代码
2014/04/03 Javascript
AngularJS学习笔记之依赖注入详解
2016/05/16 Javascript
JQuery在循环中绑定事件的问题详解
2016/06/02 Javascript
js自调用匿名函数的三种写法(推荐)
2016/08/19 Javascript
jQuery的ready方法实现原理分析
2016/10/26 Javascript
JS多物体实现缓冲运动效果示例
2016/12/20 Javascript
Javascript中的async awai的用法
2017/05/17 Javascript
Javascript实现运算符重载详解
2018/04/07 Javascript
vue绑定事件后获取绑定事件中的this方法
2018/09/15 Javascript
JS使用正则表达式提交页面验证的代码
2019/10/16 Javascript
[55:11]完美世界DOTA2联赛PWL S2 SZ vs LBZS 第一场 11.26
2020/11/30 DOTA
简单介绍Python下自己编写web框架的一些要点
2015/04/29 Python
python实现单线程多任务非阻塞TCP服务端
2017/06/13 Python
Windows平台Python连接sqlite3数据库的方法分析
2017/07/12 Python
Flask框架Jinjia模板常用语法总结
2018/07/19 Python
Python操作Excel插入删除行的方法
2018/12/10 Python
python算法与数据结构之冒泡排序实例详解
2019/06/22 Python
python绘制已知点的坐标的直线实例
2019/07/04 Python
Kears+Opencv实现简单人脸识别
2019/08/28 Python
使用numpngw和matplotlib生成png动画的示例代码
2021/01/24 Python
CSS3的calc()做响应模式布局的实现方法
2017/09/06 HTML / CSS
HTML5 创建canvas元素示例代码
2014/06/04 HTML / CSS
HTML5 新表单类型示例代码
2018/03/20 HTML / CSS
Omio意大利:全欧洲低价大巴、火车和航班搜索和比价
2017/12/02 全球购物
北京一家公司的.net开发工程师笔试题
2012/04/17 面试题
最新奶茶店创业计划书范文
2014/02/08 职场文书
各营销点岗位职责范本
2014/03/05 职场文书
工厂门卫岗位职责范本
2014/04/04 职场文书
小学清明节活动总结
2014/07/04 职场文书
2014公司党员自我评价范文
2014/09/11 职场文书
python+pytest接口自动化之token关联登录的实现
2022/04/06 Python
Go gorilla securecookie库的安装使用详解
2022/08/14 Golang