Reactjs React Jest：如何模拟返回数据的异步API调用？

我正在尝试测试React表组件（使用异步API调用返回表数据），但无法解决如何模拟API调用以满足React测试文件的要求。我有一个模拟数据文件来提供模拟数据。（我只包括了相关代码）

模拟数据：

const mockRequestData = [
    {
        "email": "runner1@test.com",
        "firstName": "runner1",
        "lastName": "runner1"
    },
    {
        "email": "runner2@test.com",
        "firstName": "runner2",
        "lastName": "runner2"
    },
    {
        "email": "runner3@test.com",
        "firstName": "runner3",
        "lastName": "runner3"
    },
];

export const mockData = {
    mockData: mockRequestData,
};

const getAllAthletesSigningUp = async () => {
    let athletesSigningUp= [];

    const response = await returnGetResponse("/api/atheletesignup");
    if (response.status === 200) {
        return athletesSigningUp= (response.body);
    }
    return athletesSigningUp
};

export {getAllAthletesSigningUp};

 const [requests, setRequests] = useState([]);

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

    const apiResponse = async () => {
        return setRequests(await getAllAthletesSigningUp ())
    }


<div className={"table_content"}>
                {
                  requests.map((request, index) => {
                       return (
                          <>
                              <div key={index} className={"table_row"} data-testid={"tableRow"}>
                                  <p>{formatText(request.email)}</p>
                                  <p>{formatText(request.firstName)}</p>
                                  <p>{formatText(request.lastName)}</p>

apiCall位于其自己的文件中：

const mockRequestData = [
    {
        "email": "runner1@test.com",
        "firstName": "runner1",
        "lastName": "runner1"
    },
    {
        "email": "runner2@test.com",
        "firstName": "runner2",
        "lastName": "runner2"
    },
    {
        "email": "runner3@test.com",
        "firstName": "runner3",
        "lastName": "runner3"
    },
];

export const mockData = {
    mockData: mockRequestData,
};

const getAllAthletesSigningUp = async () => {
    let athletesSigningUp= [];

    const response = await returnGetResponse("/api/atheletesignup");
    if (response.status === 200) {
        return athletesSigningUp= (response.body);
    }
    return athletesSigningUp
};

export {getAllAthletesSigningUp};

 const [requests, setRequests] = useState([]);

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

    const apiResponse = async () => {
        return setRequests(await getAllAthletesSigningUp ())
    }


<div className={"table_content"}>
                {
                  requests.map((request, index) => {
                       return (
                          <>
                              <div key={index} className={"table_row"} data-testid={"tableRow"}>
                                  <p>{formatText(request.email)}</p>
                                  <p>{formatText(request.firstName)}</p>
                                  <p>{formatText(request.lastName)}</p>

可运行应用程序：

const mockRequestData = [
    {
        "email": "runner1@test.com",
        "firstName": "runner1",
        "lastName": "runner1"
    },
    {
        "email": "runner2@test.com",
        "firstName": "runner2",
        "lastName": "runner2"
    },
    {
        "email": "runner3@test.com",
        "firstName": "runner3",
        "lastName": "runner3"
    },
];

export const mockData = {
    mockData: mockRequestData,
};

const getAllAthletesSigningUp = async () => {
    let athletesSigningUp= [];

    const response = await returnGetResponse("/api/atheletesignup");
    if (response.status === 200) {
        return athletesSigningUp= (response.body);
    }
    return athletesSigningUp
};

export {getAllAthletesSigningUp};

 const [requests, setRequests] = useState([]);

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

    const apiResponse = async () => {
        return setRequests(await getAllAthletesSigningUp ())
    }


<div className={"table_content"}>
                {
                  requests.map((request, index) => {
                       return (
                          <>
                              <div key={index} className={"table_row"} data-testid={"tableRow"}>
                                  <p>{formatText(request.email)}</p>
                                  <p>{formatText(request.firstName)}</p>
                                  <p>{formatText(request.lastName)}</p>

const[requests，setRequests]=useState（[]）；
useffect（（）=>{
apiResponse（）；
},[]);
常量apiResponse=async（）=>{
返回setRequests（等待getAllathletessignup（））
}
{
requests.map（（请求，索引）=>{
返回(
{formatText（request.email）}

{formatText（request.firstName）}

{formatText（request.lastName）}

您可以使用：

jest.mock（，（）=>({
getAllathletessignup:jest.fn（（）=>[]）
}))
描述（“…”，（）=>{
它（“…”，（）=>{
//const{getAllAthletesSigningUp}=jest.requireMock（）-如果您在测试中需要模拟实现；
//const{getAllAthletesSigningUp}=jest.requireActual（）-如果您需要测试中的原始实现；
})
})

或使用或直接在单个测试中描述实现：

jest.mock（，（）=>({
getAllathletessignup:jest.fn（）
}))
描述（“…”，（）=>{
它（“…”，（）=>{
const{getAllAthletesSigningUp}=jest.requireMock（）
//GetAllathletAssigningup.mockImplementation（（）=>[]）-用于所有函数调用；
//getAllAthletesSigningUp.mockImplementationOnce（（）=>[]）-用于单个函数调用；
})
})

我尝试了第二个选项，但出现了以下错误：类型“（）=>Promise”上不存在属性“mockImplementationOnce”。