如何使用 Jest 测试使用“react-navigation-hooks”中的 useNavigation 的自定义反应钩子？答案

【问题标题】：How to test a custom react hook which uses useNavigation from 'react-navigation-hooks' using Jest?如何使用 Jest 测试使用“react-navigation-hooks”中的 useNavigation 的自定义反应钩子？
【发布时间】：2020-08-25 22:43:31
【问题描述】：

我有一个使用 useNavigation 和 useNavigationParam 的自定义反应钩子“useSample”

    import { useContext } from 'react'
    import { useNavigation, useNavigationParam } from 'react-navigation-hooks'
    import sampleContext from '../sampleContext'
    import LoadingStateContext from '../LoadingState/Context'

    const useSample = () => {
      const sample = useContext(sampleContext)
      const loading = useContext(LoadingStateContext)
      const navigation = useNavigation()
      const Mode = !!useNavigationParam('Mode')

      const getSample = () => {
        if (Mode) {
         return sample.selectors.getSample(SAMPLE_ID)
        }
        const id = useNavigationParam('sample')
        sample.selectors.getSample(id)
        navigation.navigate(SAMPLE_MODE_ROUTE, { ...navigation.state.params}) // using navigation hook here
       }
      return { getSample }
     
     }
      export default useSample

我需要使用 jest 为上面的钩子编写单元测试，我尝试了以下

    import { renderHook } from '@testing-library/react-hooks'
    import sampleContext from '../../sampleContext'
    import useSample from '../useSample'
     
    describe('useSample', () => {
     it('return sample data', () => {
       const getSample = jest.fn()
       const sampleContextValue = ({
          selectors: {
            getSample
          }
       })
       const wrapper = ({ children }) => (
       <sampleContext.Provider value={sampleContextValue}>
       {children}
       </sampleContext.Provider>
       )
       renderHook(() => useSample(), { wrapper })
    })
  })

我收到了错误

'react-navigation 挂钩需要导航上下文，但找不到。确保您没有忘记创建和渲染 react-navigation 应用程序容器。如果需要访问可选的导航对象，可以使用Context(NavigationContext)，可能会返回'

任何帮助将不胜感激！

我正在使用的版本

“反应导航钩子”：“^1.1.0”
"@testing-library/react-hooks":"^3.4.1"
“反应”：“^16.11.0”

【问题讨论】：

标签： react-native unit-testing react-hooks

【解决方案1】：

你必须模拟 react-navigation-hooks 模块。

在你的测试中：

import { useNavigation, useNavigationParam } from 'react-navigation-hooks';

jest.mock('react-navigation-hooks');

您可以为模拟添加自定义实现。如果你想这样做，你可以检查如何在 jest 文档中模拟函数。

【讨论】：

【解决方案2】：

对我来说，使用enter code hereuseRoute() 解决了它：

对于功能组件：

import * as React from 'react';
import { Button } from 'react-native';
import { useNavigation } from '@react-navigation/native';

function MyBackButton() {
  const navigation = useNavigation();

  return (
    <Button
      title="Back"
      onPress={() => {
        navigation.goBack();
      }}
    />
  );
}

对于类组件：

class MyText extends React.Component {
  render() {
    // Get it from props
    const { route } = this.props;
  }
}

// Wrap and export
export default function(props) {
  const route = useRoute();

  return <MyText {...props} route={route} />;
}

【讨论】：