how to mock a prop that is a callback that updates state? - react-native

Question

this is my code:
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);
},
}}>
i am having a hard time making test for onRegionChangeComplete prop on MapView, region is a default argument that is calculated when initialRegion is valid, then onRegionChangeComplete is fired, but in jest even when there's initialRegion, its' region is null. i need to make region with proper value like: {"latitude": -0.000011399388312454881, "latitudeDelta": 0.0004928559064869245, "longitude": 0, "longitudeDelta": 0.00026151537895202637}
but how?
this is my react-native-maps on my jest.setup:
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',
};
});
for the MockMapView this is what i tried to mimic a callback for region and i get value for region but it throws warning:
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

I have tried something like this
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',
};
});
And I get this as result on debug() with React Testing Library. It says onRegionChangeComplete={[Function mockConstructor]}