1

我无法弄清楚React 导航v5 中钩子navigate返回的函数的热点。useNavigation

我有一个简单的Link组件：

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

和相应的测试：

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

当然这不起作用，因为 inconst spy = jest.spyOn(useNavigation, 'navigate'); navigate不是useNavigation. 但是我尝试了无数其他的可能性，我就是不知道该怎么做。

基本上我要做的是验证当链接被按下时，它会调用带有预期参数的预期函数，并且我希望该函数被模拟出来。

4

1 回答 1

1

我知道我迟到了，但我遇到了同样的问题，想知道什么时候调用了导航功能。

为此，我以这种方式模拟了该函数，因此这mockedNavigate将是一个我以后可以使用的笑话函数：

const mockedNavigate = jest.fn();

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

这让我以后可以使用它，在这种情况下，您将不再需要监视，这应该可以解决问题：

expect(mockedNavigate).toHaveBeenCalledTimes(1);
于 2020-06-15T19:57:12.003 回答