Question

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

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

希望这会有所帮助。

Answer 2

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

Answer 3

另一个较晚的解决方案，比之前建议的方案更简洁。

const mockedNavigate = jest.fn();

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

这不包括导航对象的任何其他功能，但它允许您通过以下方式进行测试：

expect(mockedNavigate).toHaveBeenCalledTimes(1);

如果更适用于您的特定情况，或者使用 expect.toHaveBeenCalledWith() (here)。

如何在react-navigation 5.0中模拟useNavigation挂钩以进行玩笑测试？

3 个答案: