如何在jest测试中模拟 react-navigation 5.0中的useNavigation钩子？

Question

我想模拟在我的功能组件中使用的useNavigation钩子。有什么办法可以用jest来模拟它？

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

如何测试params在navigate函数中的传递？

Answer 1

jest.mock("@react-navigation/native", () => {
  const actualNav = jest.requireActual("@react-navigation/native")
  return {
    ...actualNav,
    useFocusEffect: () => jest.fn(),
    useNavigation: () => {
      navigation: () => jest.fn()
    },
  }
})

Answer 2

我知道我迟到了，但我遇到了一个问题，我需要知道导航函数何时被调用。

为了解决这个问题，我用下面的方式对函数进行了模拟，所以 mockedNavigate 将是一个jest函数，如果我需要测试该函数是否真的被调用，我可以在以后使用。

const mockedNavigate = jest.fn();

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

这样我就可以在以后使用这个函数，我就可以知道我是否可以在我的应用程序中正确导航。

expect(mockedNavigate).toHaveBeenCalledTimes(1);

希望这能帮到你