如何对react hooks进行单元测试的方法
146 浏览量
2020-10-16
13:49:36
上传
评论
收藏 81KB PDF 举报
如何对如何对react hooks进行单元测试的方法进行单元测试的方法
主要介绍了如何对react hooks进行单元测试的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工
作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
写在前面写在前面
使用 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>
评论0
最新资源