如何使用 Javascript 覆盖 fetch？答案

【问题标题】：How to overwrite fetch using Javascript?如何使用 Javascript 覆盖 fetch？
【发布时间】：2020-09-23 04:11:44
【问题描述】：

我想测试我的 React 应用并模拟后端调用。我决定用一个返回常量的 Jest 函数替换 fetch。

问题是我无法覆盖默认提取值。我用谷歌搜索了一堆，发现 global.fetch = ... 覆盖了 fetch 但我不确定 global 是什么意思。我试着在我的测试文件中写var fetch = ...，但没有工作，尽管组件在组件的范围内。

我很高兴听到模拟 fetch 的替代解决方案。

// Does not work
import component that fetches
test(...){
  var fetch = ...
  <component that fetches/>
}

// Works
import component that fetches
test(...){
  global.fetch = ...
  <component that fetches/>
}

【问题讨论】：

这有帮助吗stackoverflow.com/questions/56355434/…
@ShubhamSrivastava 你知道全局是什么意思吗？
我不是专家，但似乎 global 是一个对象，而 global.fetch 是为 global 声明的函数，这意味着它在技术上不会覆盖以前的定义
我认为是引用了这个nodejs.org/api/globals.html#globals_global
global.fetch 肯定会覆盖 fetch。

标签： javascript reactjs jestjs

【解决方案1】：

预计第一个选项不起作用，因为fetch 变量对于定义它的函数是本地的。 虽然组件在组件的范围内 声明没有多大意义，但组件是嵌套的（或者更具体地说，是 React 元素，因为 <Comp/> 转换为 React.createElement(Comp)）没有多大意义意味着它可以访问该范围内的任何内容，除了专门作为 props 传递的变量。

这就像：

function foo() {
  var fetch = 'local';
  var someGlobal = 'local';
  console.log(fetch); // a global shadowed by a local
  console.log(someGlobal); // a global shadowed by a local
  bar(someGlobal);
}

function bar(someGlobal) {
  console.log(fetch); // a global
  console.log(someGlobal); // a global shadowed by a local
}

由于不应该在测试中执行真正的请求，因此可以通过将 fetch 分配给像 global.fetch = ... 这样的全局变量来模拟 fetch，但对于其他全局变量，这将无法恢复原始实现。一般来说，Jest 间谍永远不应该通过分配来设置。而是使用spyOn：

beforeEach(() => {
  jest.spyOn(global, 'fetch').mockImplementation(...)
});

这允许框架在需要时恢复原始实现，此间谍可与resetAllMocks 和restoreAllMocks 一起正常工作。

【讨论】：