如何使用 React、Jest 和 React-testing-library 为带有令牌的 api 调用编写单元测试？

Posted 2023-02-27

【中文标题】如何使用 React、Jest 和 React-testing-library 为带有令牌的 api 调用编写单元测试？

【英文标题】：How can I write unit test for api call with token using React, Jest and React-testing-library?

【发布时间】：2022-01-20 22:02:59

【问题描述】：

这是我要测试的函数，它需要一个令牌和一个描述作为道具。通常在 React 代码中，我可以从 useContext 获取令牌。

export const updateUserProfileAbout = async (
  token,
  description
) => 
  const dataUpdateTemplateDescriptionRes = await patchData(`me/`, token, 
    about:description,
  );
  const dataUpdateTemplateDescriptionJson  = await dataUpdateTemplateDescriptionRes.json();
  return dataUpdateTemplateDescriptionJson;
;

这是我的自定义 patchData 函数：

const patchData = async (urn, token, data = "") => 
  const headers = 
    "Content-Type": "application/json",
    Authorization: `Bearer $token.access`,
  ;
  const body = data ? JSON.stringify(data) : null;
  let response;
  if (body) 
    response = await fetch(`$host/api/$urn`, 
      method: "PATCH",
      headers,
      body,
    );
   else 
    response = await fetch(`$host/api/$urn`, 
      method: "PATCH",
      headers,
    );
  
  if (!response.ok) throw new Error(response.status);
  return response;
;

【问题讨论】：

您听说过 Mock API（例如 Mock Axios）吗？

@TanNguyen 是的，我用 Axios 和 Fetch API 对 mock API 做了一些研究。但是，我不知道如何使用令牌模拟 API 或开玩笑地使用 React ContextAPI。

尝试使用关键字“ReactContext”、“Jest”进行谷歌搜索，找到了一些：***.com/questions/54292298/jest-mock-react-context

【参考方案1】：

经过一天的研究，虽然我可能错了，但我认为在前端单元测试时我不必关心令牌或授权。我只需要 jest.fn() 来模拟函数和 jest.spyOn(global, "fetch") 来跟踪 fetch API。

有关更多信息，以下是我阅读的一些参考资料：

https://codewithhugo.com/jest-fn-spyon-stub-mock/

https://dev.to/qmenoret/mocks-and-spies-with-jest-32gf

https://www.pluralsight.com/guides/how-does-jest.fn()-work

https://www.loupetestware.com/post/mocking-api-calls-with-jest

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。

您好，能否请您发布更新后的代码？