如何对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 相关文章推荐
JQuery 插件模板 制作jquery插件的朋友可以参考下
Mar 17 Javascript
javascript动态加载三
Aug 22 Javascript
让JavaScript的Alert弹出框失效的方法禁止弹出警告框
Sep 03 Javascript
JS回调函数的应用简单实例
Sep 17 Javascript
JavaScript字符串常用类使用方法汇总
Apr 14 Javascript
jquery实现动静态条形统计图
Aug 17 Javascript
基于javascript实现的快速排序
Dec 02 Javascript
seajs实现强制刷新本地缓存的方法分析
Oct 16 Javascript
JS 中使用Promise 实现红绿灯实例代码(demo)
Oct 20 Javascript
解决vue同一slot在组件中渲染多次的问题
Sep 06 Javascript
JS使用数组实现的队列功能示例
Mar 04 Javascript
js实现QQ邮箱邮件拖拽删除功能
Aug 27 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学习资源和链接.
2006/12/05 PHP
Smarty模板常见的简单应用分析
2016/11/15 PHP
php基于数组函数实现关联表的编辑操作示例
2017/07/04 PHP
Laravel关联模型中过滤结果为空的结果集(has和with区别)
2018/10/18 PHP
jquery 单引号和双引号的区别及使用注意
2013/07/31 Javascript
jquery 按键盘上的enter事件
2014/05/11 Javascript
jQuery选择器源码解读(二):select方法
2015/03/31 Javascript
JavaScript基于ajax编辑信息用法实例
2015/07/15 Javascript
JS实现弹性漂浮效果的广告代码
2015/09/02 Javascript
jquery实现表格中点击相应行变色功能效果【实例代码】
2016/05/09 Javascript
jQuery插件passwordStrength密码强度指标详解
2016/06/24 Javascript
jQuery实现手机版页面翻页效果的简单实例
2016/10/05 Javascript
JavaScript版经典游戏之扫雷游戏完整示例【附demo源码下载】
2016/12/12 Javascript
jquery自定义插件结合baiduTemplate.js实现异步刷新(附源码)
2016/12/22 Javascript
js中常用的Math方法总结
2017/01/12 Javascript
js模拟微博发布消息
2017/02/23 Javascript
AngularJS实现页面定时刷新
2017/03/14 Javascript
详解AngularJS ng-class样式切换
2017/06/27 Javascript
JSON生成Form表单的方法示例
2018/11/21 Javascript
浅谈Vue页面级缓存解决方案feb-alive(上)
2019/04/14 Javascript
详解vue为什么要求组件模板只能有一个根元素
2019/07/22 Javascript
JavaScript定时器使用方法详解
2020/03/26 Javascript
python+mongodb数据抓取详细介绍
2017/10/25 Python
基于Python3.6+splinter实现自动抢火车票
2018/09/25 Python
Python自定义一个类实现字典dict功能的方法
2019/01/19 Python
Python Multiprocessing多进程 使用tqdm显示进度条的实现
2019/08/13 Python
python3 tkinter实现添加图片和文本
2019/11/26 Python
html2canvas把div保存图片高清图的方法示例
2018/03/05 HTML / CSS
阿拉伯时尚购物网站:Nisnass
2021/02/07 全球购物
营业经理岗位职责
2013/11/10 职场文书
摄影专业毕业生求职信
2014/03/13 职场文书
黄金酒广告词
2014/03/21 职场文书
2014党员民主评议个人总结
2014/09/10 职场文书
新年祝酒词大全
2015/08/11 职场文书
市级三好生竞选稿
2015/11/21 职场文书
教师纪律作风整顿心得体会
2016/01/23 职场文书