Jest -类型错误:response.json不是函数

gmxoilav  于 2023-03-31  发布在  Jest
关注(0)|答案(2)|浏览(152)

我们正在对一个React-Native应用程序(使用Jest)进行单元测试,该应用程序使用fetch执行各种API调用。
我们在API调用函数中模拟了对fetch的调用,以测试它们。到目前为止,这很好。我们也有函数将这些API调用组合起来,并在其上操作一些逻辑。
例如,这里有一个函数,给定一个令牌,它将获取相关用户的第一个项目(project[0])并返回该项目的项目列表。

export async function getAllItems(token) {
  try {
    const response = await getCurrentUser(token); // fetch called inside
    const responseJson = await response.json();
    const allItemsResp = await getAllItemsFromSpecificProject(
      token,
      responseJson.projectIds[0],
    );                                            // fetch called inside
    return await allItemsResp.json();
  } catch (error) {
    console.log(error);
    return null;
  }
}

函数getCurrentUsergetAllItemsFromSpecificProject都是简单的fetch调用,目前已经被正确模拟。下面是一个测试getAllItems函数的测试:

it('Gets all items', async () => {
  getAccessTokenMockFetch();
  const token = await getAccessToken('usherbrooke@powertree.io', 'test!23');

  getAllItemsMockFetch();
  const items = await getAllItems(token.response.access_token);

  expect(items.response.length).toEqual(3);
});

为了清楚起见,下面是getAccessTokenMockFetch是如何完成的。getAllItemsMockFetch几乎相同(响应中的数据不同):

function getAccessTokenMockFetch() {
  global.fetch = jest.fn().mockImplementation(() => {
    promise = new Promise((resolve, reject) => {
      resolve(accepted);
    });

    return promise;
  });
}

where accepted包含成功调用的JSON内容。当我们运行此测试时,我们得到以下错误:

TypeError: Cannot read property 'response' of null

我们console.log这个在catch中:

TypeError: response.json is not a function

这解释了为什么响应是null。似乎json()调用不被理解,我不知道如何模仿它。我对Stack Overflow和其他方面做了大量的研究,但我们没有发现任何有助于我理解如何解决这个问题的东西。这可能表明我在这个问题上走错了路,这是很有可能的,因为我是JavaScript,React Native,还有杰斯特。

e5nqia27

e5nqia271#

可以尝试的一件事是给它一个假的json来调用,像这样:

const mockFetch = Promise.resolve({ json: () => Promise.resolve(accepted) });
global.fetch = jest.fn().mockImplementation(() => mockFetchPromise);
c2e8gylq

c2e8gylq2#

我在创建jest单元测试时遇到了类似的问题,下面是我创建helper函数来创建mock响应的解决方案。

function createMockResponse(
    body: any,
    status: number,
    statusText: string
  ): Response {
    return {
      ok: status >= 200 && status < 300,
      status,
      statusText,
      headers: {
        get: (headerName: string) => {
          if (headerName === 'content-type') {
            return 'application/json'
          }
          return null
        },
      },
      json: async () => body,
    } as unknown as Response
  }

相关问题