测试Redux Thunk Action Creator-Java 学习之路

我有一个redux动作创建者利用redux-thunk做一些逻辑来确定要分发到商店的内容 . 它不是基于承诺的，就像HTTP请求一样，所以我在如何正确测试它时遇到了一些问题 . 我需要测试当值满足条件时以及何时不满足条件 . 由于动作创建者没有返回承诺，我不能在我的测试中运行.then（） . 测试这样的东西的最佳方法是什么？

同样，我相信测试getRemoveFileMetrics（）动作创建者会非常简单，因为它确实会返回一个promise . 但是，如果值为removeFiles并满足条件，我该如何断言将调用？怎么能在测试中写出来？

提前谢谢，因为这让我在最近几天陷入困境 .

Action Creators

export const handleSelection = (value, cacheKey) => {
    return dispatch => {
        if (value === "removeFiles") {
            dispatch(getRemoveFileMetrics(cacheKey));
        }
        dispatch({ type: HANDLE_SELECTION, value });
    };
};

export const getRemoveFileMetrics = cacheKey => {
    return dispatch => {
        dispatch({ type: IS_FETCHING_DELETE_METRICS });
        return axios
            .get(`../GetRemoveFileMetrics`, { params: { cacheKey } })
            .then(response => {
                dispatch({ type: GET_REMOVE_FILE_METRICS, payload: response.data });
            })
            .catch(err => console.log(err));
    };
};

Jest

it("should dispatch HANDLE_SELECTION when selecting operation", () => {
    const store = mockStore({});
    const value = "switchVersion";
    const expectedAction = [{
        type: MOA.HANDLE_SELECTION,
        value,
    }]; // TypeError: Cannot read property 'then' of undefined
    return store.dispatch(MOA.handleSelection(value)).then(() => {
        const returnedActions = store.getActions();
        expect(returnedActions).toEqual(expectedAction);
    });
});

NEW EDIT

因此，基于Danny Delott回复承诺的答案，我实现了如下通过测试：

export const handleSelection = (value, cacheKey) => {
    return dispatch => {
        if (value === "removeFiles") {
            return dispatch(getRemoveFileMetrics(cacheKey));
        }
        return new Promise((resolve, reject) => {
            resolve(dispatch({ type: HANDLE_SELECTION, value }));   
        });
    };
};

1 回答

是否有理由明确不在您的动作创建者中返回承诺？看起来 getRemoveFileMetrics 正在返回承诺，它只是被 handleSelection 吞噬了......

最简单的解决方案就是回报承诺：

export const handleSelection = (value, cacheKey) => {
    return dispatch => {
        if (value === "removeFiles") {
            return dispatch(getRemoveFileMetrics(cacheKey));
        }
        dispatch({ type: HANDLE_SELECTION, value });
        return new Promise();
    };
};

否则，您需要在事件循环结束后进行断言 . 您可以使用包含在Promise中的setTimeout来获取 .then 行为 .

it("should dispatch HANDLE_SELECTION when selecting operation", () => {
    const store = mockStore({});
    const value = "switchVersion";
    const expectedAction = [{
        type: MOA.HANDLE_SELECTION,
        value,
    }];

   store.dispatch(MOA.handleSelection(value));

   // flush outstanding async tasks
   return new Promise(resolve => {
     setTimeout(resolve, 0);
   })
   .then(() => {
      const returnedActions = store.getActions();
      expect(returnedActions).toEqual(expectedAction);
    });
});

回复于 2024-05-03T03:24:46+08:00

测试Redux Thunk Action Creator

1 回答

相关问题