我对react/frontend项目中这两个函数的简单理解如下：

一个月一个月

• 您想要模拟一个函数，但实际上并不关心该函数的原始实现（它将被jest.fn()覆盖）
• • 通常 * 你只是模仿返回值
• 如果您想在测试中移除对后端（例如调用后端API时）或第三方库的依赖，这将非常有用
• 如果你想做真实的的单元测试，这也是非常有用的，你不关心你测试的单元调用的某个函数是否工作正常，因为那不是它的职责。

jest.spyOn()

• 函数的原始实现与您的测试相关，但是：
• 您希望仅针对特定场景添加自己的实现，然后通过mockRestore()再次重置它（如果您只是使用jest.spyOn()，而没有进一步模拟它，默认情况下它仍将调用原始函数）
• 你只想看看函数是否被调用了
• ...
• 我认为这对集成测试特别有帮助，但不仅仅对它们有帮助！

(Good博客文章：https://medium.com/@rickhanlonii/understanding-jest-mocks-f0046c68e53c）

据我所知，唯一的区别是您可以使用jest.spyOn恢复原始功能，而不能使用jest.fn。
假设我们有一个钩子，在组件呈现时调用一个函数，这里我们可以只检查函数被调用了，我们不测试那个函数。
另一种情况，如果我们想测试原始函数如何工作。我们需要在一个测试文件。
真实的方法：

myMethod() {
  return 33;
}

使用jest.fn()

const myMethod = jest.fn().mockImplementation(() => 25);
const result = myMethod();
expect(result).toBe(25);

如果我们现在想测试真实的myMethod，我们不能用jest.fn（）将它恢复到正常状态。
间谍还有一件事

const spy_myMethod = jest.spyOn(component, "myMethod").mockImplementation(() => 25);
const result = myMethod();
expect(result).toBe(25);

现在如果我们想要原始的myMethod

spy_myMethod.mockRestore();
const result = myMethod();
expect(result).toBe(33);

jest.fn()是一个创建存根的方法，它允许您跟踪调用、定义返回值等...
jest.spyOn()来自jasmine，它允许您将对象上的现有方法转换为spy，还允许您跟踪调用并重新定义原始方法实现。
我的经验法则是：如果您想使现有实现成为间谍，请使用spyOn如果您要构建模拟，请使用fn()。

**jest.fn（）方法创建一个新的模拟函数，而jest.spyOn（）**方法用于监视现有函数。

模拟函数是函数的虚拟实现，它可以替换实现以进行测试。它允许您使用mockImplementation、mockReturnValue和mockResolvedValue等方法指定模拟函数的行为。您还可以使用模拟对象跟踪对模拟函数的调用，并访问其参数、返回值和this值。
另一方面，spy是现有函数的 Package 版本，它跟踪对函数及其参数、返回值和this值的调用，而不替换原始函数的实现。可以使用mock对象访问与mock函数相同的信息，也可以使用callThrough方法执行函数的原始实现。
下面是一个如何使用jest.fn（）和jest.spyOn（）的示例：

// Create a mock function
const mockFunction = jest.fn();

// Set the implementation of the mock function
mockFunction.mockImplementation(() => 'hello world');

// Call the mock function
console.log(mockFunction()); // Output: 'hello world'

// Create an object with a method
const obj = {
  method: () => 'hello world'
};

// Spy on the method
const spy = jest.spyOn(obj, 'method');

// Call the method
console.log(obj.method()); // Output: 'hello world'