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

[ashu-anhad]

trafficstars

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 :

Please help !

[drjonnicholson]

Same issue here

[jeffrey-m-johnson]

Also having this issue

[toastynerd]

I, as well, have this issue. Anyone find a solution yet?

[dkjaer]

Same problem here. Makes it incompatible with Jest

[gardnerjr]

same for us. Any workaround/etc? tried all kinds of babel/jest things but so far havn't found a solution

[jeffrey-m-johnson]

@gardnerjr I got around it by putting my map in a separate component and lazy-loading it:

const MyMap = React.lazy(() => import('./my-map.component'));

Jest runs via node which can't render the map, so if it tries to resolve a component that uses the map it'll throw. Unfortunately this means I'm not using jest to test the map. Not ideal, but at least I can now run jest tests in my deployment without it exploding.

[zeeshanjan82]

any updates on this?

[Morti]

I have also run into this issue when writing unit tests for mapcomponent, any suggestions to solve or plans on fixing this?

[jewseppi]

I was also able to get around it using lazy loading. More than 2 years and no one has provided an update on this?

[yulinscottkang]

react-azure-maps is an ESM only package, you'll likely have to use the --experimental-vm-modules option if you're dealing with ESM in Jest. (Ref)

Even if that solution works, you'll face an issue since Node.js doesn't offer the WebGL APIs like browsers do. Consequently, you'll have to create your own mocks for the missing APIs. For example: https://github.com/maplibre/maplibre-gl-js/blob/v2.4.0/test/integration/render/mock_browser_for_node.ts

Some people have used Vitest for testing react-azure-maps, which could be another option to consider.