I created a react map project and want to write unit tests for that but I don't have any idea how to test my Map.jsx component. I shared my component below. I already appreciate someone who can do it and gives me an idea.
import React, { useEffect } from "react";
import { MapContainer, Marker, Popup, TileLayer, useMap } from "react-leaflet";
import style from "./styles/maps.module.css";
import "leaflet/dist/leaflet.css";
import L from "leaflet";
import icon from "../assets/gps.png";
const positionIcon = L.icon({
iconUrl: icon,
iconSize: [30, 40],
});
export const ResetLocationOnMap = ({ selectedLocation }) => {
const map = useMap();
useEffect(() => {
if (selectedLocation) {
map.setView(
L.latLng(selectedLocation?.lat, selectedLocation?.lon),
map.getZoom(),
{
animate: true,
}
);
}
}, [map, selectedLocation]);
return null;
};
function Maps({ selectedLocation }) {
let selectedLocationCoordinates = [
+selectedLocation?.lat,
+selectedLocation?.lon,
];
const position = [51.505, -0.09];
return (
<MapContainer
className={style.mapContainer}
center={[51.505, -0.09]}
zoom={100}
>
<TileLayer
attribution='© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
url="https://api.maptiler.com/maps/basic-v2/256/{z}/{x}/{y}.png?key=kkQgkyPmxq3ZkwAZICOv"
/>
<Marker
position={selectedLocation.lat ? selectedLocationCoordinates : position}
icon={positionIcon}
>
<Popup>Here is a beautiful place</Popup>
</Marker>
{selectedLocation.lat && (
<ResetLocationOnMap selectedLocation={selectedLocation} />
)}
</MapContainer>
);
}
export default Maps;
Here I want to write tests for this component that has a component to reset the position Icon location on the map and the props selectedLocation is letLng object that is specified from searcInput component.