How to test a custom react hook which uses useNavigation from 'react-navigation-hooks' using Jest?

user_4836428 0
Viewed 1923

I have a custom react hook 'useSample' which uses useNavigation and useNavigationParam

    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

I need to write unit tests for the above hook using jest and I tried the following

    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 })
    })
  })

I got the error

'react-navigation hooks require a navigation context but it couldn't be found. Make sure you didn't forget to create and render the react-navigation app container. If you need to access an optional navigation object, you can useContext(NavigationContext), which may return'

Any help would be appreciated!

versions I am using

"react-navigation-hooks": "^1.1.0"
"@testing-library/react-hooks":"^3.4.1"
"react": "^16.11.0"

react-native react-hooks unit-testing
2 Answers

You have to mock the react-navigation-hooks module.

In your test:

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

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

And it's up to you to add a custom implementation to the mock. If you want to do that you can check how to mock functions on jest documentation.

user_28209000

for me, soved it by usingenter code here useRoute():

For functional component:

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();
      }}
    />
  );
}

For class component:

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} />;
}
user_98377520
Related