How can I mock <Map /> and test event handlers in jest?

[akexinad]

I have this component where when the user selects a position on the map an h3 tag appears informing the user they have selected said position:

import mapboxgl from 'mapbox-gl';
import maplibregl from 'maplibre-gl';
import 'maplibre-gl/dist/maplibre-gl.css';
import React, { useState } from 'react';
import { Map } from 'react-map-gl';

export type TReactMapGL = typeof Map;
export type TMapLibreGL = typeof maplibregl;

const MainMap = () => {
	const [clicked, setClicked] = useState(false);

	const handleClick = (e: mapboxgl.MapLayerMouseEvent) => {
		console.log('e :>> ', e);
		setClicked((prevState) => !prevState);
	};

	return (
		<div data-testid="main">
			<Map
				data-testid="main-map"
				id="mockMap"
				mapLib={maplibregl}
				initialViewState={{
					longitude: 16.62662018,
					latitude: 49.2125578,
					zoom: 14,
				}}
				style={{
					width: '100%',
					height: 'calc(100vh - 300px)',
				}}
				mapStyle="https://demotiles.maplibre.org/style.json"
				onClick={handleClick}
			/>
			{clicked && <h3 data-testid="pop-up">position selected</h3>}
		</div>
	);
};

export default MainMap;

I'm just wandering how do you correctly mock the Map component provided by react-map-gl?

This is my unit test so far:

import { fireEvent, render, screen } from '@testing-library/react';
import React from 'react';
import MainMap from './MainMap';

jest.mock('react-map-gl');

const mockOnClick = jest.fn();

describe('MainMap component', () => {
	it('Should show an h3 tag when the user clicks on the map.', () => {
		render(<MainMap />);

		screen.debug();

		const map = screen.getByTestId('main-map');

		fireEvent.click(map);

		expect(mockOnClick).toHaveBeenCalled();
	});
});

I think I'm not mocking react-map-gl but I've tried so many things I honestly don't know what I'm doing wrong.

Does anyone know how to mock it correctly?

[Pessimistress]

mapbox/maplibre do not load under node. You may be able to get them to load with JSDOM mocking all the browser global objects, or you can look into something like https://github.com/mapbox/mapbox-gl-js-mock