时间戳

首页 > 解决方案 > 如何在 Jest 单元测试中为调用更多异步操作的异步操作模拟多个 get axios 请求？

reactjs - 如何在 Jest 单元测试中为调用更多异步操作的异步操作模拟多个 get axios 请求？

问题描述

我正在使用 axios mock 在我的应用程序中测试 redux 操作。我坚持测试发送POST请求的异步操作函数并调度更多发送自己的GET请求的异步操作的问题。我如何使用模拟来管理它？

行动：

export function recordStepCompleted(step, isNewLevel = true) {
    return function (dispatch) {
        // setUserTaskComplete() action sends `POST` request
        dispatch(setUserTaskComplete(step))
            .then(() => isNewLevel && dispatch(rewardsActions.getUserLevels()));
        dispatch({
            type: types.RECORD_STEP_COMPLETED,
            payload: { step }
        });
    };
}

export function getUserLevels() {
    return function (dispatch, getState) {
        dispatch(getAchievements()) // it sends GET request
            .then(achievements => {
                dispatch({ type: types.GET_LEVELS.REQUEST });
                return api.getLevels() // it also sends GET request
                    .then(res => {
                        //......
                        dispatch({
                            type: types.GET_LEVELS.SUCCESS,
                            payload: { levels: { ...res.data, ... } }
                        });
                    })
                    .catch(error => /*....*/);
            });
    };
}

所以，总的来说，我需要模拟三个不同的请求来测试recordStepCompleted动作，但我不知道如何。请帮帮我。提前致谢！

标签： reactjsunit-testingreduxjestjsaxios

解决方案

您可以扩展 AxiosStatic 接口来创建自己的接口并使用 jest.fn() 来传递您的响应：

    import axios, { AxiosStatic } from "axios";
    jest.mock("axios");

    interface AxiosMock extends AxiosStatic {
    mockResolvedValue: (promise: Promise<Partial<AxiosResponse>>) => void;
    mockRejectedValue: (error: Partial<AxiosError>) => void;
    mockResolvedValueOnce: (promise: Promise<Partial<AxiosResponse>>) => this;
}

    const mockAxios = axios as AxiosMock;
    const myMock = jest.fn();
        myMock
            .mockReturnValueOnce({ "Your DATA 1" })
            .mockReturnValueOnce({ "Your DATA 2" })
            .mockReturnValueOnce({ "Your DATA 3" });

        mockAxios
            .mockResolvedValueOnce(Promise.resolve(myMock()))
            .mockResolvedValueOnce(Promise.resolve(myMock()))
            .mockResolvedValue(Promise.resolve(myMock()));

推荐阅读