使用fetch with Jest +节点-fetch+fetch模拟测试库的响应和函数调用

Question

我正在编写一个使用fetch的JavaScript/React库。

我使用Jest来测试这个库，我想要实现的是：

1. 为了不发送真正的调用和操作答案(模拟后端服务器)，所以我使用了fetch-mock
2. 测试传递给fetch函数的参数

为了达到第一点，我需要做

fetchMock.post(`${API_URL}/sessions`, {
  body: JSON.stringify({
    token: 'this-is-your-token'
  }),
  status: 201
})

为了达到第二点，我需要做

const spiedFetch = jest.spyOn(global, 'fetch')
// ...
expect(spiedFetch).toHaveBeenCalledTimes(1)

(最后一行位于describe()和it()__系列中)。

我有第一个测试，它确保响应具有token字段等等，第二个测试是确保fetch被调用了一次。

当我运行它们时，第一个通过，然后第二个失败。当我评论fetchMock.post(...)时，第一个失败了，第二个失败了。

基于此，我猜fetch-mock和jest.spyOn是不兼容的。

问题：

1. 我是否正确地认为fetch-mock和jest.spyOn是不相容的？
2. 如何实现fetch响应和传递参数的测试？(我希望确保HTTP谓词是这样的，所传递的标题是这样的)。
3. 我可以想到的一种方法是按原样使用fetch-mock，但在库的函数上使用jest.spyOn，这将嵌入fetch。这样做还行吗？

更新：--我尝试了我的第3点，它成功了。

Answer 1

jest.spyOn 用包装器替换原始函数。.

const fetchMock = require('fetch-mock');不会立即更改全局fetch，但是fetchMock.get被称为fetch。

因为它们都是通过修改全局fetch来工作的，所以它们在一起使用是很棘手的。

事实证明，每次像fetchMock.get这样的方法被称为全局fetch，但是如果在fetchMock上调用了所有这些方法之后调用了jest.spyOn，那么它们实际上都会工作，因为jest.spyOn将包装并跟踪最终替换的fetch。

尽管如此，如果您已经在使用jest.spyOn(global, 'fetch')，那么实际上并不需要使用fetch-mock，因为fetch-mock提供了对fetch的所有调用的访问。

要直接断言调用，可以使用fetchMock.calls()。

更容易的方法是在测试结束时使用fetchMock.done()来断言fetch是按照预期使用的。