使用反应测试库测试反应谷歌地图 useJsApiLoader

Question

我有这个基本组件，但每当我尝试使用 React 测试库对其进行测试时，屏幕上唯一出现的就是带有“正在加载”文本的div 。 我认为这是因为第一次加载组件时isLoaded可能没有值。

我如何告诉 React 测试库等待isLoaded为true以便它可以在页面上找到其他元素？

import {
  GoogleMap,
  useJsApiLoader,
  Autocomplete,
  Marker,
} from "@react-google-maps/api";

export const Map = () => {
  const { isLoaded } = useJsApiLoader("apikey");
  return isLoaded ? (
    <form>
      <Autocomplete />
      <GoogleMap>
        <Marker />
      </GoogleMap>
    </form>
  ) : (
    <div>loading</div>
  );
};

export default Map;

Answer 1

您需要在useJsApiLoader中存根isLoaded 。

像这种方法（我没有测试过这个，你需要根据你的要求调整断言）......

import { screen, render } from "@testing-library/react";
import Map from "./Map";
import * as ReactGoogleMapsApi from "@react-google-maps/api";

describe("Map", () => {
  it("shows loader", () => {
    jest
      .spyOn(ReactGoogleMapsApi, "useJsApiLoader")
      .mockReturnValue({
        isLoaded: false
      });
    render(<Map />);

    expect(screen.getByText(/loading/i)).toBeInDocument();
  });

  it("shows map", () => {
    jest
      .spyOn(ReactGoogleMapsApi, "useJsApiLoader")
      .mockReturnValue({
        isLoaded: true
      });
    render(<Map />);

    expect(screen.getByText(/some map content/i)).toBeInDocument();
  });
});