如何使用反应测试库测试自定义 Hook答案

【问题标题】：How to Test Custom Hook with react testing library如何使用反应测试库测试自定义 Hook
【发布时间】：2019-03-29 17:32:38
【问题描述】：

我尝试使用 react-hooks-testing-library，但似乎无法处理使用 useContext 的钩子。

import React,{useContext} from 'react'
import {AuthContextData} from '../../AuthContext/AuthContext'
const useAuthContext = () => {
    const {authState} = useContext(AuthContextData) 
    const {isAuth,token,userId,userData} = authState
    return {isAuth,token,userId,userData}
  }
  export default useAuthContext

【问题讨论】：

标签： javascript reactjs unit-testing react-hooks react-hooks-testing-library

【解决方案1】：

您必须将您的钩子包装在上下文提供程序中：

let authContext
renderHook(() => (authContext = useAuthContext()), {
  wrapper: ({ children }) => (
    <AuthContextData.Provider value={/* Your value */}>
      {children}
    <AuthContextData.Provider>
  )
})

【讨论】：

【解决方案2】：

假设您有一个组件，您可以在其中调用 useContext(context) 挂钩来获取应该为 false 或 true 的键 isLoading。

如果您想在组件中测试 useContext，您可以按如下方式进行测试：

const context = jest.spyOn(React, 'useContext');

如果同一文件中的每个测试需要具有不同的上下文值，那么在您的测试中，您可以像这样模拟实现：

context.mockImplementationOnce(() => {
    return { isLoading: false };
  });

或在测试之外让所有测试都具有相同的上下文：

context.mockImplementation(() => {
    return { isLoading: false };
  });

希望对你有帮助。

【讨论】：