开玩笑 - TypeError：response.json 不是函数答案

【问题标题】：Jest - TypeError: response.json is not a function开玩笑 - TypeError：response.json 不是函数
【发布时间】：2020-02-24 05:44:16
【问题描述】：

我们正在对一个 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;
  }
}

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

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

TypeError: Cannot read property 'response' of null

而我们console.log这个在抓中：

TypeError: response.json is not a function

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

【问题讨论】：

标签： javascript json react-native jestjs fetch-api

【解决方案1】：

尝试给它一个假的json 来调用，像这样：

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

【讨论】：

在这种情况下，我只从 mockImplementation 获取解析中传递的数据，我想从真正的 api 获取响应并测试该响应，如果获取 API 中的所有必需项如何我可以使用 fetch 做到这一点吗？ @emily-coleman