我在我的react应用程序中使用azure map，发现this库是构建在azure maps之上的，但是当我使用jest为使用此库的组件编写单元测试用例时，jest无法找到模块- react-azure-map，尽管Map成功加载到应用程序中。

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();
  });
});

型

错误IMAGE