使用 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 参数，它代表回调函数中的参数，这里接不赘述了。
测试副作用