How to write unit test for map component in react leaflet project

Viewed 34

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='&copy; <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.

0 Answers
Related