My simple understanding of these two functions in react/frontend projects is the following:

jest.fn()

• You want to mock a function and really don't care about the original implementation of that function (it will be overridden by jest.fn())
• Often you just mock the return value
• This is very helpful if you want to remove dependencies to the backend (e.g. when calling backend API) or third party libraries in your tests
• It is also extremly helpful if you want to make real unit tests. You don't care about if certain function that gets called by the unit you test is working properly, because thats not part of it's responsibility.

jest.spyOn()

• The original implementation of the function is relevant for your test, but:
  • You want to add your own implementation just for a specific scenario and then reset it again via mockRestore() (if you just use a jest.spyOn() without mocking it further it will still call the original function by default)
  • You just want to see if the function was called
  • ...
• I think this is especially helpful for integration tests, but not only for them!

(Good blog post: https://medium.com/@rickhanlonii/understanding-jest-mocks-f0046c68e53c)

To my understanding the only difference is that YOU CAN RESTORE ORIGINAL FUNCTION with jest.spyOn and you can't with jest.fn.

Imagine we have some hook that calls a function when component is rendered, here we can just check the function was called, we do not test that function.

Another case if we want original function to test how it works. And we need both in one test file.

Real method:

myMethod() {
  return 33;
}

With jest.fn()

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

In case we want to test now real myMethod, we can't restore it back to normal with jest.fn().

Another thing with spies:

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

And now if we want the original myMethod

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

jest.fn() is a method to create a stub, it allowing you to track calls, define return values etc...

jest.spyOn() came from jasmine, it allow you to convert an existing method on an object into a spy, that also allows you to track calls and re-define the original method implementation.

My rule of thumb on this is: if you want to make an existing implementation a spy use spyOn if you are building a mock, use fn().