如何测试来自 redux 的操作？答案

【问题标题】：How to test actions from redux?如何测试来自 redux 的操作？
【发布时间】：2020-10-02 15:47:51
【问题描述】：

如何检查 redux 操作是否有效？并在执行结束时，检查 dataState 的数据？

例如：

在应用程序中测试授权的功能。期望（AuthMethod（登录名，密码））；

行动：

return async (dispatch) => {
    dispatch(AuthLoading());

    try {
      var date = new Date().getDate();
      var month = new Date().getMonth() + 1; 
      var year = new Date().getFullYear();
      var hours = new Date().getHours(); 
      var min = new Date().getMinutes(); 
      var sec = new Date().getSeconds();
      var time =
        date + '-' + month + '-' + year + ' ' + hours + ':' + min + ':' + sec;

      let response = await fetch(
        'http://' + ServerLink + ':' + ServerPort + '/tmo/rest/user',
        {
          method: 'POST',
          headers: {
            Accept: 'application/json',
            'Content-Type': 'application/json',
          },
          body: JSON.stringify({
            login: login,
            password: password,
            deviceSerialNumber: '1111111', 
            currentAppVersion: AppVersion,
            currentDateTime: time,
          }),
        },
      );

      let data = await response.json();
      if (data.sessionToken === '') {
        dispatch(AuthFailure('Token null'));
      } else {
        AsyncStorage.setItem('token', data.sessionToken);
        dispatch(AuthSuccess(data));
      }
    } catch (e) {
      dispatch(AuthFailure(e.message));
    }
  };
};

【问题讨论】：

可能它返回一个有效的操作对象，即具有type 属性和任何其他数据属性的对象。你有任何尝试测试的测试代码示例吗？
不幸的是，我不太擅长这个。我所有测试它的尝试都以失败告终。我需要正确调用此操作，然后检查 DataReducer 中的数据。类似的东西：it('auth test', async () => { await AuthMethod(login , password) const value = store.getState().AuthData })
我没有使用过 redux-thunk，但通常我认为你会通过针对处理最终调度动作的 reducer 编写的测试来“测试”你的动作创建者。模拟 fetch，将当前状态和正确的参数传递给 action creator 到 reducer，并断言 reducer 的正确状态输出。
你能给我举个例子吗？如果我有一个工作示例（例如使用 AuthMethod），我可以继续对其他操作进行测试，那就太酷了

标签： reactjs react-native jestjs redux-thunk

【解决方案1】：

由于 redux reducer 被认为是纯函数，我倾向于单独对它们进行单元测试。像这样：

expect(reducerFn(preConditionState, action)).toEqual(expectedStateAfterAction);

要测试 thunk/action 创建者，您可以模拟 store 并获取，请参阅the docs。

然后您可以使用假数据测试您的异步操作，并验证模拟存储接收到具有预期值的预期操作。

这两种方法一起应涵盖测试您的个人操作和异步/重击操作。

【讨论】：

我试图做类似的事情。但我收到一个错误：expect(AuthMethod(login, password)).toEqual(AuthSuccesData);
fetchMock.getOnce('link', { body: JSON.stringify({ login: login, password: password, deviceSerialNumber: '1111111', currentAppVersion: AppVersion, currentDateTime: time, }), 方法：'POST'，标题：{接受：'application/json'，'Content-Type'：'application/json'，}，}）； const AuthSuccesData = [ {type: FETCH_AUTH_LOADING}, { type: FETCH_AUTH_SUCCESS, payload: data, }, ]; expect(AuthMethod(login, password)).toEqual(AuthSuccesData);

【解决方案2】：

只需将debugger 关键字放在您暂停执行的行并打开您的开发人员工具并触发您的操作，如果您的操作正在调度，它将在您放置关键字debugger 的行暂停执行

如下所示，我在 reducer 中放置了一个调试器。

【讨论】：

我需要检查特定操作的操作。然后检查 dataState 中的新数据 [AuthData]
执行暂停时，您可以通过步进检查每个变量的值，当您步进时它将转到下一行并显示当时状态或变量的值。
我想我有些不明白。我会用另一种方式问这个问题。我该如何开玩笑地执行我的 AuthMethod（redux 操作）？
你知道mapdispatchtoProps react-redux 的方法吗？