jestjs - 如何在react-navigation 5.0中模拟useNavigation Hook 以进行 Jest 测试？

Question

我想模拟在我的功能组件中使用的useNavigation Hook 。任何解决方法如何使用玩笑模拟它？

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

const MyComponent = () => {
  const { navigate } = useNavigation();

  const navigateToScreen = () => {
    navigate('myScreen', { param1: 'data1', param2: 'data2' })
  }

  return (<TouchableOpacity onPress={navigateToScreen}>
       Go To Screen
     </TouchableOpacity>)
}

如何测试在导航功能中传递的参数？

Answer 1

我知道我来晚了，但是我遇到了一个问题，我需要知道何时调用导航功能。

为此，我以以下方式模拟了该函数，因此mockedNavigate将是一个玩笑的函数，如果我需要测试该函数是否真正被调用，可以稍后使用:

const mockedNavigate = jest.fn();

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

这使我以后可以使用它，并且我知道是否可以在应用程序中正确导航:

expect(mockedNavigate).toHaveBeenCalledTimes(1);

希望这可以帮助。