I am using azure map in my react application and found this library which is build on the top of azure maps but when I am writing the unit test cases for the component made using this library using jest, the jest is not able to find the module - react-azure-map, though the map is successfully loading on the application. I used create-react-app for this application.
App.tsx
import * as azureMap from "react-azure-maps";
import {
ControlOptions,
AuthenticationType as auth
} from "azure-maps-control";
import "./App.css";
const cameraOptions: azureMap.AzureSetCameraOptions = {
center: [-1.9591947375679695, 52.46891727965905],
maxBounds: [-6.0, 49.959999905, 1.68153079591, 58.6350001085],
};
const controls: azureMap.IAzureMapControls[] = [
{
controlName: "StyleControl",
controlOptions: {
mapStyles: ["road", "grayscale_light", "satellite_road_labels"],
},
options: {
position:"bottom-left",
} as ControlOptions,
},
{
controlName: "ZoomControl",
options: { position: "bottom-right" } as ControlOptions,
},
];
const mapConfigState: azureMap.IAzureMapOptions = {
authOptions: {
authType: auth.subscriptionKey,
subscriptionKey: "********************************",
clientId: ""********************************",
},
};
function App() {
return (
<div className="map-container" data-testid = "map-div">
<azureMap.AzureMapsProvider>
<div style={{ height: "600px" }}>
<azureMap.AzureMap
options={mapConfigState}
controls={controls}
cameraOptions={cameraOptions}
></azureMap.AzureMap>
</div>
</azureMap.AzureMapsProvider>
</div>
);
}
export default App;
App.test.tsx
import { cleanup, render, screen } from '@testing-library/react';
import Map from '.';
describe('UT for Map', () => {
afterEach(() => {
cleanup();[enter image description here][1]
});
test('Should render Map component', () => {
render(<Map />);
const mapDiv = screen.getAllByTestId(/map-div/i);
expect(mapDiv).toBeInTheDocument();
});
});
Error IMAGE