使用 TypeScript 进行模拟全局获取时出现错误“不可分配给类型...”

Question

我在下面的“global.fetch”部分收到此错误，我不知道为什么。我觉得我正在以一种非常标准的方式做这件事......我错过了什么？我对任何东西都持开放态度，甚至是库。我只是想学习如何使用 React 测试库来测试我的组件，该库获取数据并呈现列表，但我遇到了很多麻烦...

\n

感谢任何提供帮助的人

\n

\n

TS2322：类型 'Mock<Promise<{ json: () => Promise<Data[]>; }>, []>'
\nis 不可分配给类型 '(input: RequestInfo | URL, init?:\nRequestInit) => Promise'。\xc2\xa0\xc2\xa0Type 'Promise<{ json: () =>\nPromise<Data[]>; }>' 不可分配给类型 'Promise'。\n\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0Type '{ json: () => Promise<Data[]>; }' 缺少类型“Response”中的以下属性：标头、确定、重定向、状态和\n其他 10 个属性。

\n

\n

我发现模拟 global.fetch 的通用方法如下：

\n

global.fetch = jest.fn(() =>\n  Promise.resolve({\n    json: () => Promise.resolve(....data here...),\n  })\n);\n

\n

我的组件如下所示：

\n

const SomeComponent = () => {\n  const [dataList, setDataList] = useState<Data[]>([]);  \n\n  const fetchdataList = async () => {\n    const response = await fetch(URL);\n    const json = await response.json();    \n    setDataList(json);\n  }\n\n  useEffect(() => {\n    fetchdataList();\n  }, []);\n}\n  useEffect(() => {\n    fetchNpos();\n  }, []);\n

\n

Answer 1

global.fetch = jest.fn(() =>
  Promise.resolve({
    json: () => Promise.resolve({....}),
  }),
) as jest.Mock;  // <-- adding this solved the issue