监视从 3rd 方库钩子返回的函数

Question

I am not able to figure out hot to spy on navigate function returned by useNavigation hook from React navigation v5.

I have a simple Link component:

const Link = props => {
  const { to, children, ...restProps } = props;
  const navigation = useNavigation();

  const handlePress = useCallback(() => navigation.navigate(to), [navigation, to]);

  return (
    <TouchableOpacity testID="link" onPress={handlePress}>
      <Text
        {...restProps}
      >
        {children}
      </Text>
    </TouchableOpacity>
  );
};

and coresponding test:

jest.mock('@react-navigation/native', () => ({
  ...jest.requireActual('@react-navigation/native'),
  useNavigation: () => ({
    navigate: jest.fn(() => 'mocked navigate'),
  }),
}));

import { useNavigation } from '@react-navigation/native';

const spy = jest.spyOn(useNavigation, 'navigate');

describe('<Link />', () => {
  it('navigates', () => {
    const link = render(<Link to="TestScreen">Test link</Link>);
    fireEvent.press(link.getByTestId('link'));

    expect(spy).toBeCalledTimes(1);
  })
});

Of course this won't work, because in const spy = jest.spyOn(useNavigation, 'navigate'); navigate isn't function of useNavigation . But I tried countless other possibilities and I just cannot figure out how to do it.

Basically what I am trying to do is to verify that when the link is pressed, it calls expected function with expected parameter and I want the function to be mocked out.

Answer 1

I know I'm late, but I had the same issue and wanted to know when did the navigate function was called.

For it, I mocked the function this way, so the mockedNavigate would be a jest function that I could use later:

const mockedNavigate = jest.fn();

jest.mock('@react-navigation/native', () => {
  return {
    ...jest.requireActual('@react-navigation/native'),
    useNavigation: () => ({
      navigate: mockedNavigate,
    }),
  };
});

This allowed me to use this later, and in this case you will not need to spy anymore, this should do the trick:

expect(mockedNavigate).toHaveBeenCalledTimes(1);