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 extremely 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)

Try this https://www.npmjs.com/package/jest_workaround

The example code mixes ES6 import/ export syntax with Node module.exports syntax...

...but based on a library that looks like this:

lib.js

function Viewer() { }

Viewer.prototype.foo = function () { }

module.exports = Viewer;

...it would be used like this:

mp_wrapper.js

import Viewer from './lib';  // <= Babel allows Viewer to be used like an ES6 default export

export const createViewer = container => new Viewer(container);

...and to spy on Viewer you would need to mock the entire library in your test:

mp_wrapper.spec.js

import Viewer from './lib';
import { createViewer } from './mp_wrapper';

jest.mock('./lib', () => jest.fn());  // <= mock the library

test('returns a new instance of the Viewer class', () => {
  const viewer = createViewer('the container');
  expect(Viewer).toHaveBeenCalledWith('the container');  // Success!
  expect(viewer).toBeInstanceOf(Viewer);  // Success!
});

Note that if the library was an ES6 library then you could spy on the default export directly like this:

import * as lib from './lib';

const spy = jest.spyOn(lib, 'default');  // <= spy on the default export

...but because of the way Babel handles the interop between ES6 and non-ES6 code this approach doesn't work if the library is not ES6.

Edit: response to the follow-up question

jest.genMockFromModule generates a mocked version of the module and returns it.

So for example this:

const mock = jest.genMockFromModule('lib');

...generates a mocked version of lib and assigns it to mock. Note that this does not mean that the mock will be returned when lib is required during a test.

jest.genMockFromModule can be useful when creating a manual mock:

__mocks__/lib.js

const lib = jest.genMockFromModule('lib');  // <= generate a mock of the module
lib.someFunc.mockReturnValue('some value');  // <= modify it
module.exports = lib;  // <= export the modified mock

In your final solution you have these two lines:

jest.genMockFromModule('lib');
jest.mock('lib');

This line:

jest.genMockFromModule('lib');

...doesn't actually do anything since it is generating a mock of the module but the returned mock isn't being used for anything.

This line:

jest.mock('lib');

...tells Jest to auto-mock the lib module and is the only line that is needed in this case.

I am not expert in jest, but my recommendation to think about:

1) When the function is exported as default I use something like:

import Funct1 from "../../../src/components/Funct1";
...
jest.mock("../../../src/components/Funct1");
...
expect(Funct1).toHaveBeenCalledWith(params);

2) When the module (utils.js) has multiple exports as

export const f1 = () => {};
...
export const f8 = () => {};

You can try

import * as Utils from "../../../src/components/utils"
const f8Spy = jest.spyOn(Utils, 'f8');
...
expect(f8Spy).toHaveBeenCalledWith(params);

Similar discussion here