What is the difference between these two mock ways in Jest?

November 5, 2024

I have some custom hook in React. I am working with unit-tests (Jest) where I have to mock this hook.

const theHook = () => {

// some code

return {func1, func2};
}

I have discovered that the two examples below are not the same.

import theHook from '../theHook';

jest.mock('../theHook');

theHook.mockReturnValue({
    func1: jest.fn(),
    func2: jest.fn()
});

and

import theHook from '../theHook';

jest.mock('../theHook', () => ({
    func1: jest.fn(),
    func2: jest.fn()
}));

Who can explain to me the difference between these two mock ways?

Timing of Implementation: In the first example, you mock the module first and then set the return value separately. In the second, you provide the return value directly in the mock definition.
Mocking Behavior: In the first example, if you want to further customize behavior after the initial mock, you can do so since the module is mocked but not yet defined. In the second example, you have a fixed return value immediately upon mocking.

Use the first approach when you want to define the mock behavior later in your tests, especially if you have multiple tests that may need different return values for the same hook.
Use the second approach for simpler cases where you want to define the mock behavior upfront and don’t need to change it later.