I get TypeError: Cannot read property 'then' of undefined when I try to test async action

Question

我在 reactjs 中测试异步操作时遇到问题。这是我的代码：

export function fillStoryBoard(snippetsLink, channel, uniqueStoryObj, isUniqueStorySearch) {

return function(dispatch){
        for (var i = 0; i < snippetsLink.length; i++) {
            loadStorySnippet(channel, snippetsLink[i], (i + 1),dispatch);
        }
    }
 }

function loadStorySnippet(channel,snippetsLink,indexValue,dispatch){
    return axios.get(ServiceUrls.prototype.getServicesDfltUrl()+snippetsLink)
        .then(response => {
            dispatch({
                type: "FILL_STORYBOARDS",
                payload: {
                    "channelName": channel,
                    "storiesSnippet": response.data,
                    "order":indexValue
                }
            });
        }).catch(function(response){

    });
 }

所以我的 asnc 调用是在一个未导出的函数中，并且有一个函数在 for 循环中调用这个 asnc 函数。

下面是我的测试：

it('should dispatch type: FILL_STORYBOARDS with what is returned from server as a payload', () => {
    nock(ServiceUrls.prototype.getServicesDfltUrl())
        .get('/snippet/111')
        .reply(200, {"id":1,"headline":"",
            "label":"Other",
            "imgUrl":"",
            "postDate":0});


    const expectedActions = [
        { "type": "FILL_STORYBOARDS","payload": { "channel": "",
            "storiesSnippet": {"id":1,"headline":"",
                "label":"Other","imgUrl":"" +
                "",
                "postDate":0},
            "order":1 } }
    ]
    const store = mockStore();
    return store.dispatch(fillStoryBoard(["snippet/111"], "")).then(() => {
        expect(store.getActions()[0].type).to.equal(expectedActions[0].type);
    })
})

现在的问题是运行我得到的测试：

TypeError: Cannot read property 'then' of undefined

知道如何解决这个问题吗？

Answer 1

由 fillStoryBoard 编写的 thunk 函数 return 没有 return 承诺，因此您不能 .then 关闭它。

尝试这样的事情：

return function(dispatch){
  var promises = [];
  for (var i = 0; i < snippetsLink.length; i++) {
      promises.push(loadStorySnippet(channel, snippetsLink[i], (i + 1),dispatch));
  }
  return Promise.all(promises);
}

编辑：

如果没有循环，那么你可以这样做：

return function(dispatch){
    return loadStorySnippet(...your arguments here, dispatch));
}

I get TypeError: Cannot read property 'then' of undefined when I try to test async action

I get TypeError: Cannot read property 'then' of undefined when I try to test async action

reactjs

reactjs-testutils

redux-thunk

react-redux

axios