Reactjs 如何使用 UseState 正确测试组件

我不熟悉Reaction中的测试，也不知道如何适当地模拟useState值来适当地覆盖使用布尔值作为参数来返回组件的行

react 代码

import React from "react";
import { InputGroup, Input, Button, Spinner, Center } from "@chakra-ui/react";
import movieAPI from "../../services/movieAPI";
import { useNavigate } from "react-router-dom";
import styles from "./index.module.css";
export const Search = () => {
  const navigate = useNavigate();
  const [movie, setMovie] = React.useState("");
  const [isLoading, setLoading] = React.useState(false);
  const handleClick = async () => {
    setLoading(true);
    const data = await movieAPI.fetchMovieByTitle(movie);
    setLoading(false);
    navigate(`/movie/${data.Title}`, { state: data });
  };
  return isLoading ? (
    <Center>
      <Spinner
        data-testid="spinner"
        className={styles.verticalCenter}
        thickness="6px"
        speed="1.0s"
        emptyColor="gray.200"
        color="green.500"
        size="xl"
      />
    </Center>
  ) : (
    <InputGroup m={2} p={2}>
      <Input onChange={(e) => setMovie(e.target.value)} placeholder="Search" />
      <Button onClick={handleClick}>Search</Button>
    </InputGroup>
  );
};

为了覆盖微调组件的特定行，我如何模拟属性加载？ 下面是我测试微调控件代码的try

import { render, fireEvent, RenderResult } from "@testing-library/react";
import { Search } from "../../components/search/search";
import { BrowserRouter as Router, useNavigate } from "react-router-dom";
import React from "react";
describe("search.tsx", () => {
  let isLoading = false;
  let setLoading = jest.fn();
  let container: RenderResult<
    typeof import("@testing-library/dom/types/queries"),
    HTMLElement,
    HTMLElement
  >;
  jest.mock("react", () => {
    return {
      ...jest.requireActual("react"),
      useState: () => ({
        isLoading: isLoading,
        setLoading: setLoading,
      }),
    };
  });
  beforeEach(() => {
    container = render(
      <Router>
        <Search />
      </Router>
    );
  });
  it("should render spinner", async () => {
    setLoading.mockImplementation((data) => {
      isLoading = data;
    });
    setLoading(true);
    console.log(await container.findByTestId("spinner"));
  });
});