使用react-testing-library测试useQuery

Question

我正在尝试测试 useQuery 挂钩。测试 (expect(screen.getByText(/Loading.../)).not.toBeInTheDocument()) 似乎失败。我只是不断在 dom 中加载文本，而不是标题。尽管mockResolved已被分配/知道为什么会发生这种情况吗？整个目标是测试 isLoading 和 isError。下面是代码

索引.js

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import { QueryClient, QueryClientProvider } from "react-query";

const queryClient = new QueryClient();

ReactDOM.render(
  <React.StrictMode>
    <QueryClientProvider client={queryClient}>
      <App />
    </QueryClientProvider>
  </React.StrictMode>,
  document.getElementById("root")
);

应用程序

import React, { useState, Fragment } from "react";
import { useQuery } from "react-query";
import { getManagers } from "./api/index";
import CustomInputSelect from "./components/CustomInputSelect";
import { processEmployeeData } from "./utils/index";
import "./App.scss";

const App = () => {

  const { isLoading, isError, error, data: employeeData } = useQuery(
    "fetchEmployees",
    getManagers
  );

  const updatedData = processEmployeeData(employeeData);

  if (isLoading) {
    return <span>Loading...</span>;
  }

  if (isError) {
    return <span>Error: {error.message}</span>;
  }

  return (
    <Fragment>
      <header>
        <h1>my header</h1>
      </header>
 <Fragment>

我的测试

import React from "react";
import { render, screen, act } from "@testing-library/react";
import "@testing-library/jest-dom/extend-expect";
import { QueryClient, QueryClientProvider } from "react-query";
import App from "./App";
import * as api from "./api/index";

const queryClient = new QueryClient();

const renderComponent = () => {
  render(
    <QueryClientProvider client={queryClient}>
      <App />
    </QueryClientProvider>
  );
};

test("renders CustomSelect component", () => {
  const getManagerFunc = jest
    .spyOn(api, "getManagers")
    .mockResolvedValue({ data: { data: [{ firstName: "John" }] } });
  renderComponent();
  expect(getManagerFunc).toHaveBeenCalledTimes(1);
  expect(screen.getByText(/Loading.../)).not.toBeInTheDocument();
});