Question

我正在使用react / redux生成一个面板列表，每个面板都显示每个列表项的数据。我设置了一个5秒的间隔，调用refreshAppList（this.props.list）动作创建者，forEach循环遍历列表中的每个项目并进行异步调用，然后调度刷新的列表项（使用redux-thunk）。所以基本上，每隔5秒我就会刷新最新数据的面板列表。这很棒！不幸的是，现在我正在为这个特殊的异步动作创建者编写单元测试，我遇到了一个问题。 .forEach不会返回任何内容，所以当我在单元测试中调用它时，我得到了不确定。有谁知道如何覆盖这个问题，或者我可能需要使用不同的方法刷新整个面板列表？

这是循环遍历数组并在每个数组项上进行异步调用的动作创建者。

export const refreshAppList = list => (dispatch) => {
  list.forEach((version, index) => {
    const url = `apiEndpoint/${version.data.app_id}/${version.data.version}`;
    return axios.get(url)
      .then(({ data }) => {
        data.uniqueId = version.uniqueId;
        data.refreshId = uuidv1();
        dispatch({ type: REFRESH_APP_LIST, payload: { index, data } });
      })
      .catch((e) => {
      console.log(e);
      });
   });
 };

以下是我收到的错误：

 1) async actions creates an action with type: REFRESH_APP_LIST:
 TypeError: Cannot read property 'then' of undefined
  at Context.<anonymous> (tests/asyncActions.js:140:12)

这是我在测试中调用动作创建者的地方（使用redux-mock-store）：

return store.dispatch(refreshAppList(list)).then(() => {
  expect(store.getActions()).to.deep.equal(expectedActions);
});

我认为值得一提的是我使用axios-mock-adapter来模拟动作创建者中异步调用返回的数据。

最后一件事：我已经在同一个应用程序中为另外两个异步动作创建者编写了单元测试，并且都通过了。最大的区别在于，这个特定的动作创建者使用forEach循环将多个异步调用链接在一起（不会将任何内容返回到测试中）。

Answer 1

这不起作用，因为refreshAppList返回的函数不返回任何内容。此外，即使您从内部返回.forEach，axios.get.也不会返回任何内容。您可以使用.map代替Promise.all内的所有内容。像这样的东西

export const refreshAppList = list => (dispatch) => {
  return Promise.all(list.map((version, index) => {
    const url = `apiEndpoint/${version.data.app_id}/${version.data.version}`;
    return axios.get(url)
      .then(({ data }) => {
        data.uniqueId = version.uniqueId;
        data.refreshId = uuidv1();
        dispatch({ type: REFRESH_APP_LIST, payload: { index, data } });
      })
      .catch((e) => {
      console.log(e);
      });
   }));
 };

.forEach异步操作创建者在运行单元测试时不返回操作

1 个答案: