react-azure-maps icon indicating copy to clipboard operation
react-azure-maps copied to clipboard

Regarding writing test cases for react-azure-maps implementation in react app

Open ashu-anhad opened this issue 2 years ago • 10 comments

Hi,

I did a very simple implementation for react-azure-maps as below :

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">
      <azureMap.AzureMapsProvider>
        <div style={{ height: "600px" }}>
          <azureMap.AzureMap
            options={mapConfigState}
            controls={controls}
            cameraOptions={cameraOptions}
          ></azureMap.AzureMap>
        </div>
      </azureMap.AzureMapsProvider>
    </div>
  );
}

export default App;

I tried to write the test case for the implementation using Jest. It gives me this error :

image

Please help !

ashu-anhad avatar Oct 26 '21 15:10 ashu-anhad