如何模拟一个更新状态的回调道具？

Question

这是我的代码：

const [userRegion, setUserRegion] = useState<Region | null>(null);
<MapView
    {...{
      ...(!!myLocation && {
        initialRegion: {
          latitude: myLocation.coords.latitude,
          longitude: myLocation.coords.longitude,
          latitudeDelta: 0.0043,
          longitudeDelta: 0.0034,
        },
      }),
      onRegionChangeComplete: (region: Region) => {
        console.log('onRegionChangeComplete region: ', region);
        if (userRegion === null) setUserRegion(region);
      },
    }}>

我很难在 MapView 上测试 onRegionChangeComplete prop，region 是一个默认参数，它在 initialRegion 有效时计算，然后 onRegionChangeComplete 被触发，但开个玩笑，即使有 initialRegion，它的区域也是空的.我需要创建具有适当值的区域，例如：{"latitude": -0.000011399388312454881, "latitudeDelta": 0.0004928559064869245, "longitude": 0, "longitudeDelta": 0.00026151537895202637} 但是怎么办？这是我的 jest.setup:

上的 react-native-maps

jest.mock('react-native-maps', () => {
  const mockMapTypes = {
    STANDARD: 0,
    SATELLITE: 1,
    HYBRID: 2,
    TERRAIN: 3,
    NONE: 4,
    MUTEDSTANDARD: 5,
  };

  return {
    __esModule: true,
    default: MockMapView,
    Marker: MockMapMarkerView,
    MAP_TYPES: mockMapTypes,
    PROVIDER_DEFAULT: 'default',
    PROVIDER_GOOGLE: 'google',
  };
});

对于 MockMapView，这是我试图模拟区域回调的方法，我得到了区域的值，但它抛出警告：

Warning: Cannot update a component (Nearby) while rendering a different component (MockMapView). To locate the bad setState() call inside MockMapView, follow the stack trace as described in https://reactjs.org/link/setstate-in-render

export class MockMapView extends React.Component<MockMapProps> {
  render() {
    const { testID, onRegionChangeComplete, children, ...props } = this.props;

    return (
      <View
        {...{
          testID,
          onRegionChangeComplete: jest.fn().mockReturnValue(
            onRegionChangeComplete({
              latitude: 11.559064518910894,
              latitudeDelta: 0.006275210816060195,
              longitude: 114.52057879418135,
              longitudeDelta: 0.003400370478630066,
            })
          ),
          ...props,
        }}>
        {children}
      </View>
    );
  }
}

Answer 1

我试过这样的东西

jest.mock('react-native-maps', () => {
  const React = require('react');
  const {View} = require('react-native');
  const {jest} = require('@jest/globals');
  const mockOnRegionChange = jest.fn().mockImplementation(() => {
    return {latitude: 57.7, longitude: 11.93};
  });

  class MockMapView extends React.Component {
    render() {
      const {testID, children, ...props} = this.props;

      return (
        <View
          {...{
            ...props,    // <======= Moved this to the Top
            testID,
            onRegionChangeComplete: mockOnRegionChange,
          }}>
          {children}
        </View>
      );
    }
  }

  
  const mockMapTypes = {
    STANDARD: 0,
    SATELLITE: 1,
    HYBRID: 2,
    TERRAIN: 3,
    NONE: 4,
    MUTEDSTANDARD: 5,
  };

  return {
    __esModule: true,
    default: MockMapView,
    MAP_TYPES: mockMapTypes,
    PROVIDER_DEFAULT: 'default',
    PROVIDER_GOOGLE: 'google',
  };
});

我在使用 React 测试库进行 debug() 时得到了这个结果。它说 onRegionChangeComplete={[Function mockConstructor]}

如何模拟一个更新状态的回调道具？

how to mock a prop that is a callback that updates state?

react-native

jestjs

babel-jest