Jest.mock is not allowed to reference variables

Sometimes when trying to mock a function in Jest, you might encounter the following error:

Service mocked with Jest causes “The module factory of jest.mock() is not allowed to reference any out-of-scope variables”

One of the possible solutions for this error:

1- The mocked function name doesn’t start the `mock` word.

The following implementation will throw an error, because the mocked function doesn’t start with the `mock` word, the reason for the need of the `mock` word, Is that Jest requires the mocked function to be available before it’s initialization in order to do the actual mocking.

const setFiltersFn = jest.fn();

jest.mock('./filters.ts', () => ({
  ...jest.requireActual('./filters.ts'),
  useFiltersContext: () => ({
    setFilters: setFiltersFn, // BREAKS!
  }),
}));

In the above example, the setFiltersFn will be needed when doing the actual mocking (before setFiltersFn initialization). And in this case Jest doesn’t know if the setFiltersFn is a mocked function.

Note: This is a precaution to guard against uninitialized mock variables. If it is ensured that the mock is required lazily, variable names prefixed with `mock` (case insensitive) are permitted.

This means, we can solve the above issue by just prefix the function the `mock` keyword, and it should work as expected.

const mockSetFiltersFn = jest.fn();

jest.mock('./filters.ts', () => ({
  ...jest.requireActual('./filters.ts'),
  useFiltersContext: () => ({
    setFilters: mockSetFiltersFn, // WORKS!
  }),
}));

Photo from Unsplash