// __tests__/MapComponent.test.js
import React from "react";
import { render } from "@testing-library/react";
import { RecoilRoot } from "recoil";
import MapComponent from "../components/MapComponent";

// Mock Leaflet and its plugins
jest.mock("leaflet", () => {
  const leaflet = jest.requireActual("leaflet");
  return {
    ...leaflet,
    map: () => ({
      setView: jest.fn(),
      addLayer: jest.fn(),
    }),
    tileLayer: () => ({
      addTo: jest.fn(),
    }),
    marker: () => ({
      addTo: jest.fn(),
    }),
  };
});

jest.mock("leaflet-contextmenu", () => ({}));

// Mock the fetch API
global.fetch = jest.fn(() =>
  Promise.resolve({
    json: () => Promise.resolve([]), // Adjust the mock data as needed
  })
);

test("renders map component", () => {
  render(
    <RecoilRoot>
      <MapComponent />
    </RecoilRoot>
  );
});