如何对 react hooks 进行单元测试

2019-08-13 admin

写在前面

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

配合 enzyme 来进行测试

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

测试状态

由于 function component 没有实例的概念,我们无法通过类似 instance.xxx 的方式来直接对状态进行验证,比如: 对于这里的 count 是无法通过 enzymewrapper.stateapi 来访问的,但是我们可以通过 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 组件或者直接使用下一小节提及的工具库来进行测试。

测试有返回值的 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-nextapi ,但不影响理解):

const Counter = createContainer(useCounter)

要使用这个 Container ,我们需要这样: 可以发现,这里的 CounterDisplay 依赖于 Counter.Provider ,要测试 CounterDisplay ,我们通过 renderHookwrapper 参数来注入父组件,比如:

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 逻辑上。最后一点的解决方法详见上一小节。

写在最后

本身纯属个人观点,如有错误,还望指正。


关注公众号,全栈_101,只谈技术,不谈人生。

clipboard.png


另:本人最近比较缺钱,业余时间接手各种规模的外包项目:

  • 前端 react/vue/angular 及性能优化
  • 后端 java/python

有意者私聊。

[转载]原文链接:https://segmentfault.com/a/1190000020058166

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-72398.html

文章标题:如何对 react hooks 进行单元测试

相关文章
Facebook发布React Native!
React.js Conf 2015会议上,Facebook发布了React Native。 React.js 是 Facebook 推出的一个用来构建用户界面的 JavaScript 库。 React中,把一切东西都看成组件,而且所有组件...
2015-11-12
React Native 用JavaScript编写原生ios应用
ReactNative 可以基于目前大热的开源JavaScript库React.js来开发iOS和Android原生App。而且React Native已经用于生产环境——Facebook Groups iOS 应用就是基于它开发的。 Re...
2015-11-12
JavaScript对象反射
JAVA反射机制是在运行状态中,对于任意一个类,都能够知道这个类的所有属性和方法;对于任意一个对象,都能够调用它的任意一个方法和属性;这种动态获取的信息以及动态调用对象的方法的功能称为java语言的反射机制。 在JavaScript中没有完...
2015-11-12
如何编写干净高效的CSS代码
其实CSS的学习并不困难,但在一些较为大型的项目中就显得杂乱无章,变得很难管理,尤其是不同的人编写CSS的风格总会略有不同,从团队合作的层面上来说,就更加难以沟通,所以,我们为此总结了一些如何实现高效整洁的CSS代码原则: 使用Reset但...
2015-11-12
[翻译]基于Webpack4使用懒加载分离打包React代码
原文地址:https://engineering.innovid.com/code-splitting-using-lazy-loading-with-react-redux-typescript-and-webpack-4-3ec601...
2018-03-11
2015 Web 2.0和AJAX如何做好优化
2015如何让做好web2.0和ajax的优化?JavaScript中文网总结当下提出以下四大优化意见,旨在帮助W前端开发人员有效利用APM解决上述问题。 随着Web应用程序速度与效率快速增长,网站已经成为企业与其客户进行交互的第一途径——...
2015-11-12
何为闭包?有关JS闭包的一些理解
简单一点的说:闭包就是能够读取其他函数内部变量的函数。那如何实现读取其它函数内部变量呢,大家都知道在JavaScript中内部函数可以访问其父函数中的变量,那如果将内部函数返回是不是代表能够通过它访问其父函数中的变量了呢,闭包的原理事实上就...
2015-11-11
freemarker判断对象是否为空的方法
FreeMarker与Web容器无关,即在Web运行时,它并不知道Servlet或HTTP。它不仅可以用作表现层的实现技术,而且还可以用于生成XML,JSP或Java 等。 freemarker中显示某对象使用${name}. 但如果nam...
2017-03-27
面试官:谈谈你对 CSS 盒模型的认识?(你确定会?)
题目:谈谈你对 CSS 盒模型的认识 涉及知识点(层层递进): 基本概念:标准模型+ IE模型(区别) CSS如何设置这两种模型 JS如何设置获取盒子模型对应的宽和高 实例题(根据盒模型解释边距重叠) BFC(边距重叠解决方案) 1...
2018-06-09
mpvue 小程序如何开启下拉刷新,上拉加载?
https://developers.weixin.qq.com/miniprogram/dev/api/pulldown.html#onpulldownrefresh 小程序API 微信小程序之下拉加载和上拉刷新 微信小程序下拉加载和上拉...
2018-05-25
回到顶部