useFakeTimers breaks with native promise implementation

🐛 Bug Report

Use the native Promise implementation breaks useFakeTimers

To Reproduce

Steps to reproduce the behavior:

jest.useFakeTimers();

test('timing', () => {
  Promise.resolve().then(() => console.log('promise'));
  setTimeout(() => console.log('timer'), 100);
  jest.runAllTimers();
  console.log('end');
});

Expected behavior

It should log:

• promise
• timer
• end

This is because runAllTimers should trigger the async promise handler first, then the timeout delayed by 100ms, then return control.

Actual Behaviour

• timer
• end
• promise

Link to repl or repo (highly encouraged)

https://repl.it/repls/PhysicalBriefCores

[KamalAman]

I would like to expand on this issue since it gets amplified by uses of setTimeouts within the async code:

jest.useFakeTimers();

test('timing', async () => {
  const shouldResolve = Promise.resolve()
    .then(() => console.log('before-promise'))
    .then(() => new Promise(r => setTimeout(r, 20)))
    .then(() => console.log('after-promise'));

  setTimeout(() => console.log('timer'), 100);
  jest.runAllTimers();
  await shouldResolve;
  console.log('end');
});

Timeout - Async callback was not invoked within the 30000ms timeout specified by jest.setTimeout.

Expected: before-promise -> after-promise -> timer -> end Actual: timer -> before-promise -> Hangs

This issue here is there is nothing to continuously advance the timers once you’re within the promise world. shouldResolve will never resolve.

Switching to global.Promise = require('promise'); does seem like does the trick to resolve the issue for this particular use case. However in practice we have found the it does not work for all use-cases.

The best solution without replacing promises that i have come up for this is a utility function to continuouslyAdvanceTimers. However your results will still be out of order.

const _setTimeout = global.setTimeout;
function continuouslyAdvanceTimers() {
  let isCancelled = false;

  async function advance() {
    while (!isCancelled) {
      jest.runOnlyPendingTimers();
      await new Promise(r => _setTimeout(r, 1));
    }
  }

  advance();
  return () => {
    isCancelled = true;
  };
}

jest.useFakeTimers();

test('timing', async () => {
  const shouldResolve = Promise.resolve()
    .then(() => console.log('before-promise'))
    .then(() => new Promise(r => setTimeout(r, 20)))
    .then(() => console.log('after-promise'));

  setTimeout(() => console.log('timer'), 100);
  const cancelAdvance = continuouslyAdvanceTimers();
  await shouldResolve;
  cancelAdvance();
  console.log('end');
});

Expected: before-promise -> after-promise -> timer -> end Actual: timer -> before-promise -> after-promise -> end

[tatethurston]

Posting this work around in case it helps someone else:

await Promise.resolve().then(() => jest.advanceTimersByTime(milliseconds));

More context here: https://stackoverflow.com/questions/51126786/jest-fake-timers-with-promises/51132058#51132058

Broader example:

  function sleep(ms: number): Promise<void> {
    return new Promise((resolve) => {
      setTimeout(resolve, ms);
    });
  }

  export async function foo(fn: () => T, waitMs: number): Promise<T> {
     await sleep(waitMs);
     return fn();
  }

  it('calls fn after x milliseconds', async () => {
    jest.useFakeTimers();

    const fn = jest.fn(() => 3);
    const retVal = foo(fn, 1000);

    expect(fn).not.toBeCalled();
    await Promise.resolve().then(() => jest.advanceTimersByTime(1000));
    expect(fn).toHaveBeenCalledTimes(1);
    await expect(retVal).resolves.toBe(3);
  });