Testing 重复操作测试中的错误

我不太会开玩笑，测试和按摩。正在尝试编写我的第一个异步操作测试。出现此错误的测试模具：

Expected value to equal:
  [{"payload": {"checked": true, "followingInfoId": "1"}, "type": "HANDLE_FAVORITE_SUCCESS"}]
Received:
  [{"payload": [TypeError: Cannot read property 'getItem' of undefined], "type": "ERROR"}]

有人能告诉我问题出在哪里吗。我想moxios的回答不是“然后”

以下是操作创建者：

export const handleFavorite = data => {
  return dispatch => {
    return followApi.handleFavorite(data).then(payload => {
      dispatch({ type: 'HANDLE_FAVORITE_SUCCESS', payload });
    }, err => {    
      dispatch({ type: 'ERROR', payload: err })
    });
  }
};

以下是以下API.handleFavorite：

handleFavorite: (data) => {
    return new Promise ((resolve, reject) => {
      httpServise.patch(`${host}:${port}/followings/handle-favorite`, data).then(
        res => {
          if (res.data.payload) {
            resolve(res.data.payload);
          } else reject({status: 401});
        }, err => reject(err)
      );
    });
  },

以及http服务的一部分（如果需要）：

patch: (url, params) => {
  return new Promise((resolve, reject) => {
      axios(url, {
          method: 'PATCH',
          headers: getHeaders(),
          data: params
      }).then(res => {
          resolve(res);
      }, err => {
          reject(err);
      });
  });
}

---

如果要测试动作创建者，应该模拟

followApi.handleFavorite

方法，而不是

axios

这是一个测试动作创建者的解决方案，您只需使用

jestjs

和

typescript

，就可以自己手动模拟该模块

文件夹结构：

。
├── actionCreators.spec.ts
├── actionCreators.ts
├── followApi.ts
└── httpServise.ts

actionCreators.ts

：

从“/followApi”导入followApi；
export const handleFavorite=数据=>{
返回调度=>{
返回followApi.handleFavorite（数据），然后(
有效载荷=>{
分派（{type:'HANDLE_FAVORITE_SUCCESS'，payload}）；
},
错误=>{
分派（{type:'ERROR'，负载：err}）；
}
);
};
};

followApi.ts

：

从'/httpServise'导入{httpServise}；
常数主机http://github.com/mrdulin';
常数端口=3000；
常量followApi={
handleFavorite:数据=>{
返回新承诺（（解决、拒绝）=>{
修补程序（`${host}:${port}/followers/handle-favorite`，data）(
（res:any）=>{
if（资源数据有效载荷）{
解析（res.data.payload）；
}否则{
拒绝（{状态：401}）；
}
},
err=>拒绝（err）
);
});
}
};
导出默认followApi；

httpService.ts

：

从“axios”导入axios；
函数getHeaders（）{
返回{}；
}
导出常数httpServise={
补丁：（url，参数）=>{
返回新承诺（（解决、拒绝）=>{
axios（url{
方法：'补丁'，
headers:getHeaders（），
数据：params
}).那么(
res=>{
决议（res）；
},
错误=>{
拒绝（错误）；
}
);
});
}
};

actionCreators.spec.ts

：

从“redux mock store”导入configureMockStore；
从'redux-thunk'导入thunk，{ThunkDispatch}；
从'redux'导入{AnyAction}；
从“/actionCreators”导入*作为操作；
从“/followApi”导入followApi；
jest.mock（'./followApi.ts'，（）=>{
返回{
handleFavorite:jest.fn（）
};
});
类型状态=任何；
const middleware=[thunk]；
const mockStore=configureMockStore（中间件）；
常量存储=mockStore（）；
描述（‘以下行动’，（）=>{
在每个之前（（）=>{
store.clearActions（）；
jest.resetAllMocks（）；
});
它（'dispatches the HANDLE\u FAVORITE\u SUCCESS action'，（）=>{
期望.断言（2）；
常量mockedHandleFavoritePayload={
followinfoid:'1'，
核对：正确
};
（遵循API.handleFavorite作为jest.MockedFunction）。mockResolvedValueOnce(
MockedHandleFavorite有效载荷
);
常量数据='jest'；
常数预期动作=[
{
键入：“处理\u收藏夹\u成功”，
有效载荷：{
followinfoid:'1'，
核对：正确
}
}
];
返回store.dispatch（actions.handleFavorite（data））。然后（（）=>{
expect（store.getActions（））.toEqual（expectedActions）；
expect（followApi.handleFavorite）.与（数据）一起调用；
});
});
它（'发送错误操作'，（）=>{
const mockedhndlefavoritererror=新错误（“网络错误”）；
（遵循API.handleFavorite作为jest.MockedFunction）。mockRejectedValueOnce(
模拟HHNDleFavoriteError
);
常量数据='jest'；
常数预期动作=[
{
键入：“错误”，
有效负载：MockedHHHandleFavoriteError
}
];
返回store.dispatch（actions.handleFavorite（data））。然后（（）=>{
expect（store.getActions（））.toEqual（expectedActions）；
expect（followApi.handleFavorite）.与（数据）一起调用；
});
});
});

具有100%覆盖率报告的单元测试结果：

PASS src/stackoverflow/520257/actionCreators.spec.ts（5.95s）
以下行动
✓ 发送句柄\u收藏夹\u成功操作（5ms）
✓ 发送错误操作（2ms）
-------------------|----------|----------|----------|----------|-------------------|
文件|%Stmts |%Branch |%Funcs |%Line |未覆盖行|s|
-------------------|----------|----------|----------|----------|-------------------|
所有文件| 100 | 100 | 100 | 100 ||
actionCreators.ts | 100 | 100 | 100 | 100 ||
-------------------|----------|----------|----------|----------|-------------------|
测试套件：1个通过，共1个
测试：2次通过，共2次
快照：共0个
时间：6.87秒，估计7秒

---

源代码：

请您发布

handleFavorite

action creator代码好吗？@一罐粘土，当然。看起来action creator需要一些数据，但您没有在测试中将其传递到函数中。为了确定这是否是问题所在，需要

followApi.handleFavorite

代码@一罐粘土，做成的。是否要将一些数据传递到

actions.handleFavorite（）

？不传递任何数据不一定是问题所在。从代码中可以看出，错误发生在

followApi.handleFavorite

中的某个地方，但很难说在哪里。也许可以尝试记录该函数和子函数中发生的每个步骤，看看这是否有帮助。

patch: (url, params) => {
  return new Promise((resolve, reject) => {
      axios(url, {
          method: 'PATCH',
          headers: getHeaders(),
          data: params
      }).then(res => {
          resolve(res);
      }, err => {
          reject(err);
      });
  });
}