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 Capture Screenshots with Puppeteer In NodeJS

How to Capture Screenshots with Puppeteer In NodeJS

To Capture Screenshots with Puppeteer: Launch a Browser Instance Navigate to the Web Page Capture the Screenshot Introduction: Puppeteer is a powerful Node.js library that allows developers…

How to Minimize Puppeteer Browser Window To Tray

How to Minimize Puppeteer Browser Window To Tray

Puppeteer is a powerful tool for automating tasks in headless or non-headless web browsers using JavaScript. While Puppeteer is often used to perform actions within a browser,…

Intercepting Responses in Node.js with Puppeteer

Intercepting Responses in Node.js with Puppeteer

Introduction: Puppeteer is a powerful Node.js library that provides a high-level API for controlling headless Chrome or Chromium browsers. It’s widely used for web scraping, automated testing,…

Mastering React Component Re-rendering in Jest

Mastering React Component Re-rendering in Jest

In this hands-on guide, we’ll explore the art of optimizing React component re-rendering within Jest tests. By combining theory with practical coding examples, you’ll gain a deep…

Eliminating Nesting Loops in React Rendering

Eliminating Nesting Loops in React Rendering

React has ushered in a new era of web application development with its component-based structure, promoting code reusability and maintainability. But as projects evolve, achieving optimal performance…

Exploring Type and Interface Usage in TypeScript

Exploring Type and Interface Usage in TypeScript

TypeScript has gained immense popularity by bridging the gap between dynamic JavaScript and static typing. Two of its fundamental features, “Type” and “Interface,” play pivotal roles in…

Leave a Reply

%d bloggers like this: