Is there a type-safe alternative to the setTimeout function that I can use?

Question

Is there a type-safe alternative to the setTimeout function that I can use?

When running my tests, I encountered an issue with the setTimeout method making them run slower than desired.

I initially attempted to address this by using "any" in my code... but that led to complaints from eslint and others.

Now, I have implemented a new piece of code that eliminates the need for the use of "any".

  let defaultTimeout: typeof globalThis.setTimeout;
  beforeEach(() => {
    defaultTimeout = global.setTimeout;
    globalThis.setTimeout = (callback: TimerHandler) => { (1)
      defaultTimeout(callback, 500);
    };
  })

Despite these changes, I am still encountering an error related to globalThis.setTimeout.

TS2741: Property promisify is missing in type (callback: TimerHandler) => void but required in type typeof setTimeout timers.d.ts(161, 19): promisify is declared here.

While I am aware that using any and unknown could resolve this issue, I am curious if there is an alternative solution available?

javascript typescript type-safety

Answer 1

Answer №1

It is not recommended to override functions like setTimeout, setInterval, console.*. Have you considered using timer mocks instead? Why resort to this method?

I see that you may be using Jest or Vitest, but the approach remains the same.

If your aim is simply to bypass the timers, you could try this:

jest.useFakeTimers();

// Your test code can go here...

expect(true).toEqual(true);

jest.runAllTimers();

jest.useRealTimers();

The line jest.runAllTimers(); is crucial in accelerating the timers and advancing them quickly. For more information, visit: https://jestjs.io/docs/jest-object#jestrunalltimers

Answer 2

It is not recommended to override functions like setTimeout, setInterval, console.*. Have you considered using timer mocks instead? Why resort to this method?

I see that you may be using Jest or Vitest, but the approach remains the same.

If your aim is simply to bypass the timers, you could try this:

jest.useFakeTimers();

// Your test code can go here...

expect(true).toEqual(true);

jest.runAllTimers();

jest.useRealTimers();

The line jest.runAllTimers(); is crucial in accelerating the timers and advancing them quickly. For more information, visit: https://jestjs.io/docs/jest-object#jestrunalltimers

Answer 3

Answer №2

After being inspired by @Tal Rofe, I decided to revisit the problem:

I was unaware that jest could be used to mock global functions... so here is my updated solution:

jest.useFakeTimers();
type TimeoutType = ReturnType<typeof globalThis.setTimeout>;
const spyOn = jest.spyOn(global, 'setTimeout');
spyOn.mockImplementation((callback: (args: void) => void): TimeoutType => {
  callback();
  return <TimeoutType>(<unknown>0); // timeout is actually a number!
});

Answer 4

After being inspired by @Tal Rofe, I decided to revisit the problem:

I was unaware that jest could be used to mock global functions... so here is my updated solution:

jest.useFakeTimers();
type TimeoutType = ReturnType<typeof globalThis.setTimeout>;
const spyOn = jest.spyOn(global, 'setTimeout');
spyOn.mockImplementation((callback: (args: void) => void): TimeoutType => {
  callback();
  return <TimeoutType>(<unknown>0); // timeout is actually a number!
});

Is there a type-safe alternative to the setTimeout function that I can use?

Answer №1

Answer №2

Similar questions

How to generate an array within a TypeScript extension function

Passing object attributes to a modal in AngularJS

Working with Javascript: Navigating a dynamic array of elements

Angular Unit testing error: Unable to find a matching route for URL segment 'home/advisor'

Ways in which this data can be best retrieved

retrieve the variable contained within the callback function

Pressing the Button Increases the Counter, However the Counter Resets After

Implementing a NextJS client component within a webpage

"Upload a video file and use JavaScript to extract and save the first frame as an image

Creating a JavaScript-powered multi-department form: A step-by-step guide

Is it possible to dynamically add plotLines to the xAxis using datetime in HighCharts?

Problem encountered while using AJAX to load a PHP script, triggered by an onclick event;

Error occurs in Windows script while running a project installed globally

Filtering arrays of objects dynamically using Typescript

Attach the Bootstrap-Vue modal to the application's template

What is the maximum string length allowed for the parameter accepted by JavaScript's JSON.Parse() function?

The functionality of JQuery stops functioning once ajax (Node.js, PUG) is integrated

Issue with Vue directive bind not functioning after element refresh

Live Search: Find Your Answers with Ajax

Dynamic search form technology