javascript - 用 jest 模拟 api 请求并反应 js

Question

我正在使用 jest 和 react 测试库测试 api 请求调用，这是我的代码。

现场演示现场演示

实用程序/api.js

import axios from "axios";

const instance = axios.create({
  withCredentials: true,
  baseURL: process.env.REACT_APP_API_URL,
  headers: {
    Accept: "application/json",
      "Content-Type": "application/json",
  },
});

export default instance;

export async function get(url, params) {
  const response = await instance({
    method: "GET",
    url: url,
    params: params,
  });
  return response;
}

模拟/api.js

    const mockResponse = {
      data: {
        attributes: {
          first_name: "Jeff",
          last_name: "Bezo's",
        },
      },
    };

export default {
  get: jest.fn().mockResolvedValue(mockResponse),
};

主页.js

import React, { useState, useEffect } from "react";

function Home() {
  const [user, setUser] = useState();

  const getUser = useCallback(async () => {
    try {
      const response = await api.get("/users/self");
      console.log("data response..", response.data);
      setUser(response.data.attributes.first_name);
    } catch (error) {}

  }, [dispatch]);

  useEffect(() => {
    getUser();
  }, []);

    return <div data-testid="user-info" > Welcome {user}</div>;
}

export default Home;

主页.test.js

import React, { Suspense } from "react";
import { render, cleanup, screen } from "@testing-library/react";
import "@testing-library/jest-dom/extend-expect";
import Home from "../../editor/Home";
import { Provider } from "react-redux";
import { store } from "../../app/store";
import Loader from "../../components/Loader/Loader";

const MockHomeComponent = () => {
  return (
    <Provider store={store}>
      <Suspense fallback={<Loader />}>
        <Home />
      </Suspense>
    </Provider>
  );
};

    describe("Home component", () => {
      it("should return a user name", async () => {
        render(<MockHomeComponent />);
        const userDivElement = await screen.findByTestId(`user-info`);
        expect(userDivElement).toBeInTheDocument();
        screen.debug();
      });
    
      afterAll(cleanup);
    });

问题：

当我运行npm run test测试通过但在screen.debug()结果中我没有看到按预期返回的用户名，我只是看到了Welcome。但它应该是welcome Jeff。

我在这里做错了什么？任何建议将不胜感激

标签： javascriptreactjsunit-testingjestjsreact-testing-library