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

如何解决如何模拟更新状态的回调道具？

这是我的代码：

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 道具进行测试，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，这是我试图模拟区域的回调，我获得区域的值，但它抛出警告：

警告：渲染组件时无法更新组件 (Nearby) 不同的组件 (MockMapView)。定位错误的 setState() 调用在 MockMapView 内，按照中所述的堆栈跟踪 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>
    );
  }
}

解决方法

我试过这样的事情

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