reactjs - 如何使用获取 API 请求测试 Action 创建者

Question

我有一个带有 Redux 和 Jest 的 create-react-app 用于测试。我正在使用 fetch 从 Action 创建者发出 API 请求。在编写测试时，我发现无论出于何种原因——无论如何我都在尝试模拟这个请求——它仍在尝试向 API 发出实际请求并收到网络连接错误(所以我从请求中获取了每个测试时间)。可能值得一提的是，这在浏览器中运行良好。

import fetch from 'isomorphic-fetch';
import { SUBMIT_SUCCESS, EMPLOYEE_DETAILS, ERROR } from './actionTypes';
import { API_URL } from '../../Constants';

 export function getEmployeeDetails(id) {
   return async dispatch => {
    try {
      let payload = await (await fetch(`${API_URL}/users/${id}`, {
        method: 'GET',
        headers: { jwt: localStorage.getItem('jwt') },
      })).json();

      dispatch(getEmployeeDetailsSuccess(payload.user));
    } catch (err) {
      dispatch(errorCatch(err));
    }
  };
}

我试过了 - https://medium.com/@ferrannp/unit-testing-with-jest-redux-async-actions-fetch-9054ca28cdcd

我也厌倦了这个 - https://medium.com/@kellyrmilligan/testing-async-actions-in-redux-with-isomorphic-fetch-and-fetch-mock-35f98c6c2ee7

基本上花了几天时间来尝试解决这个问题。

我做错了什么？是否有机会获得有关如何测试此操作的工作示例？

谢谢!

Answer 1

你到底想测试什么？对于模拟 fetch，有类似 fetch-mock 的东西但也许您也可以重构您的代码，使其不直接依赖于 fetch 工作。

例如，要检查是否派发了正确的操作，您可以使用以下内容:

export function getEmployeeDetails(fetcher, id) {
  return async dispatch => {
    let payload = await fetcher(id);

    if (/* payload is good */) {
      dispatch(getEmployeeDetailsSuccess(payload.user));
    }
    else {
      dispatch(errorCatch(err))
    }
  };
}

现在您可以通过传入一个返回好/坏负载的函数来测试您的方法，并且 make sure that the right actions are dispatched .在普通代码中，您可以像以前一样使用 fetch，但传递处理该逻辑的函数，而不是直接将其包含在 Action 创建者中。