Jest - TypeError: response.json is not a function

Question

我们正在对 React-Native 应用程序（使用 Jest）进行单元测试，该应用程序使用 fetch.

执行各种 API 调用

我们在 API 调用函数中模拟了对 fetch 的调用以测试它们。到目前为止效果很好。我们还有组合这些 API 调用并对它们进行一些逻辑操作的函数。

例如，这里有一个函数，给定一个令牌，将获得相关用户的第一个项目 (project[0]) 和 return 该项目的项目列表。

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

getCurrentUser 和 getAllItemsFromSpecificProject 这两个函数都是简单的 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;
  });
}

其中accepted包含成功调用的JSON内容。当我们运行这个测试时，我们得到以下错误：

TypeError: Cannot read property 'response' of null

而我们 console.log 抓住了这个：

TypeError: response.json is not a function

这解释了为什么响应是 null。似乎 json() 调用不被理解，我不知道如何模拟它。我对 Stack Overflow 及其他方面进行了大量研究，但没有发现任何可以帮助我理解如何解决此问题的东西。这可能表明我在这方面走错了路，这是很有可能的，因为我是 JavaScript、React Native 和 Jest 的新手。

Answer 1

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

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

Jest - TypeError: response.json is not a function

Jest - TypeError: response.json is not a function

javascript

json

jestjs

react-native

fetch-api