测试Redux Thunk Action Creator [英] Testing Redux Thunk Action Creator

问题描述

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

I've got a redux action creator that utilizes redux-thunk to do some logic to determine what to dispatch to the store. Its not promise-based, like an HTTP request would be, so I am having some issues with how to test it properly. Ill need a test for when the value meets the condition and for when it doesn't. Since the action creator does not return a promise, I cannot run a .then() in my test. What is the best way to test something like this?

同样，我认为测试 getRemoveFileMetrics()操作创建者将非常简单，因为它实际上确实返回了承诺.但是，如果值是removeFiles并满足条件，我该如何断言该调用呢?在测试中该怎么写?

Likewise, I believe it would be pretty straightforward testing the getRemoveFileMetrics() action creator as it actually does return a promise. But how can I assert that that will called if the value is removeFiles and meets the condition? How can that be written in the test?

在此感谢我，因为这让我在过去的两天中陷入困境.

Thanks in advance as this has had me stuck for the last couple of days.

动作创建者

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));
    };
};

笑话

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)的答覆，我实现了如下通过测试:

So based off of Danny Delott's answer to return a promise, I acheived a passing test as follows:

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 }));   
        });
    };
};

推荐答案

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

Is there a reason to explicitly NOT return a promise in your action creator? It looks like getRemoveFileMetrics is returning the promise, it just gets swallowed in handleSelection...

最简单的解决方案是只返回承诺:

Easiest solution is to just return the promise:

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行为.

Otherwise, you'll need make your assertions after the event loop is finished. You can do with a setTimeout wrapped in a Promise to get the .then behavior.

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);
    });
});

这篇关于测试Redux Thunk Action Creator的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！