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

gmxoilav  于 2022-12-16  发布在  Jest
关注(0)|答案(2)|浏览(214)

这是我想测试的函数,它接受一个token和一个描述作为 prop 。通常在React代码中,我可以从useContext中获得token。

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;
};
628mspwn

628mspwn1#

经过一天多的研究,我可能是错的,但我不认为我必须关心令牌或授权时,前端的单元测试.所有我需要的是jest.fn()模拟函数和jest.spyOn(全局,“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

fykwrbwg

fykwrbwg2#

你是对的。你不需要令牌。你需要做的就是模仿这个获取:

jest.spyOn(global, 'fetch').mockImplementationOnce(
jest.fn(() => Promise.resolve()) as jest.Mock);

如果您想从JSON响应中检索特定对象,可以用途:

jest.spyOn(global, 'fetch').mockImplementationOnce(
jest.fn(() => Promise.resolve({ ok: true, json: () => Promise.resolve({ myObject }) })) as jest.Mock);

您也可以拒绝它以触发错误捕获:

jest.spyOn(global, 'fetch').mockImplementationOnce(
jest.fn(() => Promise.reject()) as jest.Mock);

如果您想多次返回某个值,请将mockImplementationOnce更改为您需要的任何值(可能是mockImplementation,用于在每次调用它时返回它)。
如果你还想期待fetch的调用,只需添加一个常量:

const myFetch = jest.spyOn(global, 'fetch').mockImplementationOnce(
jest.fn(() => Promise.reject()) as jest.Mock);

然后您可以通过以下方式获得:expect(myFetch).toBecalledTimes(1);

相关问题