Have you ever run into this error while creating a variable before your ++code>jest.mock++/code>:

++pre>++code data-line-start="6" data-line-end="24">const mockIsLoggedIn = jest.fn();

jest.mock('./utils', () => ({
 ...
 isLoggedIn: mockIsLoggedIn,
}));

it('does ... when user is logged in', () => {
   mockIsLoggedIn.mockReturnValue(true);

   ... // test while logged in
);
it('does ... when user is logged out', () => {
   mockIsLoggedIn.mockReturnValue(false);

   ... // test while logged out
);
++/code>++/pre>

🔴 Test suite failed to run: ReferenceError: Cannot access 'mockIsLoggedIn' before initialization

Maybe you don't even understand why because the official docs displays this working example:

++pre>++code data-line-start="31" data-line-end="39">import SoundPlayer from './sound-player';
const mockPlaySoundFile = jest.fn();
jest.mock('./sound-player', () => {
 return jest.fn().mockImplementation(() => {
   return {playSoundFile: mockPlaySoundFile};
 });
});
++/code>++/pre>

They even mention:

"since calls to jest.mock() are hoisted to the top of the file, it's not possible to first define a variable and then use it in the factory. An exception is made for variables that start with the word 'mock'."

⚠️ But the very next sentence, "It's up to you to guarantee that they will be initialized on time!" is what's crucial here.

The in-depth explanation is here 👇

• JEST hoist the jest.mock block (? move it to the top of the file before running it).
• JEST doesn't hoist variables that start with ++code>mock++/code>.
• What happens is that when doing the hoisting for ++code>jest.mock++/code>, the babel plugin checks variables that are being used in the mock factory to ensure that everything being used will be within scope after hoisting.
• So if it finds a variable (if "mockPlaySoundFile" didn't start with "mock") it'll throw; it's effectively doing a little bit of what TypeScript does in general, to be helpful given that this hoisting is happening in the background & so not obvious. (warning ? this only happens if you use babel).
• However, as an advanced escape hatch, the babel plugin allows variables that start with ++code>mock++/code> as a way to tell jest that you know what you're doing.

Why does my code throw and not the one in the docs?

Let's take a simpler example:

++table border="1" cellpadding="4" style="width: 100%; border-color: #ff0201; border-style: solid; border-collapse: collapse; table-layout: fixed; height: 345px;">++tbody>++tr style="height: 33px;">++td style="width: 100%; background-color: #eeeeee; height: 33px;">Fails++/td>++/tr>++tr style="height: 312px;">++td style="width: 100%; height: 312px;">++pre>++code data-line-start="63" data-line-end="69">const useDispatchMock = () => jest.fn();

jest.mock('react-redux', () => ({
 useDispatch: useDispatchMock, // ❌ BREAKS, useDispatchMock needed while hoisting.
}));
++/code>++/pre>Here, ++code>useDispatchMock++/code> will be needed when doing the actual mocking (before ++code data-line-start="63" data-line-end="69">useDispatchMock++/code> initialization).

Jest needs to return ++code>useDispatchMock++/code> when you ask for ++code>useDispatch++/code>.

➡ it needs to know what it is right now (mocking phase)

++/td>++/tr>++/tbody>++/table>

++table border="1" cellpadding="4" style="width: 100%; border-color: #00FF03; border-style: solid; border-collapse: collapse; table-layout: fixed;">++tbody>++tr>++td style="width: 100%; background-color: #eeeeee;">Works++/td>++/tr>++tr>++td style="width: 100%;">++pre>++code data-line-start="77" data-line-end="83">const dispatchMock = jest.fn();

jest.mock('react-redux', () => ({
 useDispatch: () => dispatchMock, // ✅ WORKS, dispatchMock needed only on execution
}));
++/code>++/pre>Here, ++code>dispatchMock++/code> is not necessary when doing the actual mocking. It's only necessary when ++code data-line-start="77" data-line-end="83">useDispatch++/code> is called, after ++code data-line-start="77" data-line-end="83">dispatchMock ++/code>++code data-line-start="77" data-line-end="83">++/code>initialization.

Jest needs to return a ++code>function++/code> when you ask for ++code>useDispatch++/code>

➡ this ++code>function++/code> will later return ++code>dispatchMock++/code> when you actually run it.

➡ jest doesn't need to know what ++code>dispatchMock++/code> is as long as you haven't run the ++code>function++/code>

➡ the ++code>function++/code> is not run right now (mocking phase)

++/td>++/tr>++tr>++td style="width: 100%;">

‍

In Jest example:

++pre>++code data-line-start="97" data-line-end="105">import SoundPlayer from './sound-player';
const mockPlaySoundFile = jest.fn();
jest.mock('./sound-player', () => {
 return jest.fn().mockImplementation(() => {
   return {playSoundFile: mockPlaySoundFile};
 });
});
++/code>++/pre>

++code>mockPlaySoundFile++/code> is not necessary when doing the actual mocking.

‍

Jest needs to return a ++code>jest.fn()++/code> when you ask for './sound-player'.

➡ this ++code>jest.fn()++/code> will later return ++code>mockPlaySoundFile++/code> (here it's inside an object returned because of the mockImplementation) when you actually run it.

➡ jest doesn't need to know what ++code>mockPlaySoundFile++/code> is as long as you haven't run the './sound-player'.

➡ this is exactly like the above example but with a complex syntax

➡ maybe this article can help you get an even better grasp of what's happening under the hood.

++/td>++/tr>++/tbody>++/table>

The general solution

Do like in the jest docs when you can. ➡ This works when what you want control over isn't returned directly by the mock but rather by a function in the mock.

++pre>++code data-line-start="123" data-line-end="132">const myMock = jest.fn();

jest.mock('lib', () => ({
 useLogin: () => myMock(), // ✅ WORKS, myMock needed only on execution
 logout: myMock, // ❌ BREAKS, myMock needed while mocking
 complexHook: () => ({ callback: myMock }), // ✅ WORKS, myMock needed only on execution
 complexSyntaxHook: jest.fn().mockImplementation(() => ({ callback: myMock })), // ✅ WORKS, myMock needed only on execution
}));
++/code>++/pre>

And if you cannot do that (like in my 1st example & in the above example that breaks ❌) you can opt for the following solution:

++pre>++code data-line-start="136" data-line-end="154">import { isLoggedIn } from './utils';

jest.mock('./utils', () => ({
 ...
 isLoggedIn: jest.fn(),
}));

it('does ... when user is logged in', () => {
   (isLoggedIn as jest.Mock).mockReturnValue(true);    // 'as jest.Mock' so that typescript understands you're not using the real 'isLoggedIn' but a mocked one.

   ... // test while logged in
);
it('does ... when user is logged out', () => {
   (isLoggedIn as jest.Mock).mockReturnValue(false);

   ... // test while logged out
);++/code>++/pre>