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

Related Posts

How to remove highcharts.com credits link

How to remove highcharts.com credits link

Highcharts is a popular JavaScript charting library that offers a wide range of interactive and customizable charts for developers. However, if you’re using the free version of…

Highcharts Place text in the center of a pie chart

Highcharts Place text in the center of a pie chart

To place text in the center of a pie chart in Highcharts, you can use the chart.renderer object to create a custom label and position it in…

Test design breakpoints using jest and react-testing-library

Test responsive design using jest and react-testing-library

Testing design breakpoints in React applications is an important aspect of front-end development. It ensures that the components look and behave as expected on different screen sizes….

Testing React-Query with Jest and React-testing-library

Testing React-Query with Jest and React-testing-library

Introduction In this article we will cover the basic usage of testing useQuery hook from tanstack/react-query library, along with how to test it using jest and react-testing-library….

Highcharts How To Change Series Color with examples

Highcharts How To Change Series Color with examples

To change the color of a series in Highcharts, there are a set of options we are going to discover in this article. Option 1: Using the…

A quick introduction to Javascript shadow DOM

A quick introduction to Javascript shadow DOM

Introduction JavaScript Shadow DOM is a powerful tool for creating isolated and reusable components in web development. It allows developers to create custom elements with their own…

Leave a Reply

%d bloggers like this: