fix(breaking): use real timers internally to fix awaiting with fake timers (#568)

* capture global timers, use them in waitFor, tests+

* use real timers in flushMicroTasks

* test to show changes with modern timer mocks

* use enum-like object for timer modes

* fix tests

* remove default timer mode, add flow types
export other timer helpers, adjust tests and docs

* base waitFor on RTL implementation

* [jest] Capture and restore global promise

* [waitFor] Simulate intervals when using fake timers

* [tests] Fix waitForElementToBeRemoved

* cleanups; use more specific global

* rename globals to match others

Co-authored-by: Michael James Duminy <michael-james.duminy@klarna.com>
Co-authored-by: Michał Pierzchała <thymikee@gmail.com>

jest/preset.js

@@ -0,0 +1,10 @@
+const reactNativePreset = require('react-native/jest-preset');
+
+module.exports = {
+  ...reactNativePreset,
+  // this is needed to make modern fake timers work
+  // because the react-native preset overrides global.Promise
+  setupFiles: [require.resolve('./save-promise.js')]
+    .concat(reactNativePreset.setupFiles)
+    .concat([require.resolve('./restore-promise.js')]),
+};

jest/restore-promise.js

@@ -0,0 +1 @@
+global.Promise = global.RNTL_ORIGINAL_PROMISE;

jest/save-promise.js

@@ -0,0 +1 @@
+global.RNTL_ORIGINAL_PROMISE = Promise;

package.json

@@ -70,11 +70,12 @@
     "build": "rm -rf build; babel src --out-dir build --ignore 'src/__tests__/*'"
   },
   "jest": {
-    "preset": "react-native",
+    "preset": "../jest/preset.js",
     "moduleFileExtensions": [
       "js",
       "json"
     ],
-    "rootDir": "./src"
+    "rootDir": "./src",
+    "testPathIgnorePatterns": ["timerUtils"]
   }
 }

src/__tests__/timerUtils.js

@@ -0,0 +1,14 @@
+// @flow
+
+import { setTimeout } from '../helpers/timers';
+
+const TimerMode = {
+  Legacy: 'legacy',
+  Modern: 'modern', // broken for now
+};
+
+async function sleep(ms: number): Promise<void> {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
+export { TimerMode, sleep };

src/__tests__/timers.test.js

@@ -0,0 +1,29 @@
+// @flow
+import waitFor from '../waitFor';
+import { TimerMode } from './timerUtils';
+
+describe.each([TimerMode.Legacy, TimerMode.Modern])(
+  '%s fake timers tests',
+  (fakeTimerType) => {
+    beforeEach(() => {
+      jest.useFakeTimers(fakeTimerType);
+    });
+
+    test('it successfully runs tests', () => {
+      expect(true).toBeTruthy();
+    });
+
+    test('it successfully uses waitFor', async () => {
+      await waitFor(() => {
+        expect(true).toBeTruthy();
+      });
+    });
+
+    test('it successfully uses waitFor with real timers', async () => {
+      jest.useRealTimers();
+      await waitFor(() => {
+        expect(true).toBeTruthy();
+      });
+    });
+  }
+);

src/__tests__/waitFor.test.js

@@ -1,7 +1,8 @@
 // @flow
 import * as React from 'react';
-import { View, Text, TouchableOpacity } from 'react-native';
+import { Text, TouchableOpacity, View } from 'react-native';
-import { render, fireEvent, waitFor } from '..';
+import { fireEvent, render, waitFor } from '..';
+import { TimerMode } from './timerUtils';
 
 class Banana extends React.Component<any> {
   changeFresh = () => {
@@ -76,39 +77,63 @@ test('waits for element with custom interval', async () => {
     // suppress
   }
 
-  expect(mockFn).toHaveBeenCalledTimes(3);
+  expect(mockFn).toHaveBeenCalledTimes(2);
 });
 
-test('works with legacy fake timers', async () => {
+test.each([TimerMode.Legacy, TimerMode.Modern])(
-  jest.useFakeTimers('legacy');
+  'waits for element until it stops throwing using %s fake timers',
+  async (fakeTimerType) => {
+    jest.useFakeTimers(fakeTimerType);
+    const { getByText, queryByText } = render(<BananaContainer />);
 
-  const mockFn = jest.fn(() => {
+    fireEvent.press(getByText('Change freshness!'));
-    throw Error('test');
+    expect(queryByText('Fresh')).toBeNull();
-  });
 
-  try {
+    jest.advanceTimersByTime(300);
-    waitFor(() => mockFn(), { timeout: 400, interval: 200 });
+    const freshBananaText = await waitFor(() => getByText('Fresh'));
-  } catch (e) {
+
-    // suppress
+    expect(freshBananaText.props.children).toBe('Fresh');
   }
-  jest.advanceTimersByTime(400);
+);
 
-  expect(mockFn).toHaveBeenCalledTimes(3);
+test.each([TimerMode.Legacy, TimerMode.Modern])(
-});
+  'waits for assertion until timeout is met with %s fake timers',
+  async (fakeTimerType) => {
+    jest.useFakeTimers(fakeTimerType);
 
-test('works with fake timers', async () => {
+    const mockFn = jest.fn(() => {
-  jest.useFakeTimers('modern');
+      throw Error('test');
+    });
 
-  const mockFn = jest.fn(() => {
+    try {
-    throw Error('test');
+      await waitFor(() => mockFn(), { timeout: 400, interval: 200 });
-  });
+    } catch (error) {
+      // suppress
+    }
 
-  try {
+    expect(mockFn).toHaveBeenCalledTimes(3);
-    waitFor(() => mockFn(), { timeout: 400, interval: 200 });
-  } catch (e) {
-    // suppress
   }
-  jest.advanceTimersByTime(400);
+);
 
-  expect(mockFn).toHaveBeenCalledTimes(3);
+test.each([TimerMode.Legacy, TimerMode.Legacy])(
-});
+  'awaiting something that succeeds before timeout works with %s fake timers',
+  async (fakeTimerType) => {
+    jest.useFakeTimers(fakeTimerType);
+
+    let calls = 0;
+    const mockFn = jest.fn(() => {
+      calls += 1;
+      if (calls < 3) {
+        throw Error('test');
+      }
+    });
+
+    try {
+      await waitFor(() => mockFn(), { timeout: 400, interval: 200 });
+    } catch (error) {
+      // suppress
+    }
+
+    expect(mockFn).toHaveBeenCalledTimes(3);
+  }
+);

src/__tests__/waitForElementToBeRemoved.test.js

@@ -2,6 +2,7 @@
 import React, { useState } from 'react';
 import { View, Text, TouchableOpacity } from 'react-native';
 import { render, fireEvent, waitForElementToBeRemoved } from '..';
+import { TimerMode } from './timerUtils';
 
 const TestSetup = ({ shouldUseDelay = true }) => {
   const [isAdded, setIsAdded] = useState(true);
@@ -120,7 +121,7 @@ test('waits with custom interval', async () => {
 
   try {
     await waitForElementToBeRemoved(() => mockFn(), {
-      timeout: 400,
+      timeout: 600,
       interval: 200,
     });
   } catch (e) {
@@ -130,30 +131,23 @@ test('waits with custom interval', async () => {
   expect(mockFn).toHaveBeenCalledTimes(4);
 });
 
-test('works with legacy fake timers', async () => {
+test.each([TimerMode.Legacy, TimerMode.Modern])(
-  jest.useFakeTimers('legacy');
+  'works with %s fake timers',
+  async (fakeTimerType) => {
+    jest.useFakeTimers(fakeTimerType);
 
-  const mockFn = jest.fn(() => <View />);
+    const mockFn = jest.fn(() => <View />);
 
-  waitForElementToBeRemoved(() => mockFn(), {
+    try {
-    timeout: 400,
+      await waitForElementToBeRemoved(() => mockFn(), {
-    interval: 200,
+        timeout: 400,
-  });
+        interval: 200,
+      });
+    } catch (e) {
+      // Suppress expected error
+    }
 
-  jest.advanceTimersByTime(400);
+    // waitForElementToBeRemoved runs an initial call of the expectation
-  expect(mockFn).toHaveBeenCalledTimes(4);
+    expect(mockFn).toHaveBeenCalledTimes(4);
-});
+  }
-
+);
-test('works with fake timers', async () => {
-  jest.useFakeTimers('modern');
-
-  const mockFn = jest.fn(() => <View />);
-
-  waitForElementToBeRemoved(() => mockFn(), {
-    timeout: 400,
-    interval: 200,
-  });
-
-  jest.advanceTimersByTime(400);
-  expect(mockFn).toHaveBeenCalledTimes(4);
-});

src/flushMicroTasks.js

@@ -1,5 +1,6 @@
 // @flow
 import { printDeprecationWarning } from './helpers/errors';
+import { setImmediate } from './helpers/timers';
 
 type Thenable<T> = { then: (() => T) => mixed };
 

src/helpers/timers.js

@@ -0,0 +1,88 @@
+// Most content of this file sourced directly from https://github.com/testing-library/dom-testing-library/blob/master/src/helpers.js
+// @flow
+/* globals jest */
+
+const globalObj = typeof window === 'undefined' ? global : window;
+
+// Currently this fn only supports jest timers, but it could support other test runners in the future.
+function runWithRealTimers<T>(callback: () => T): T {
+  const fakeTimersType = getJestFakeTimersType();
+  if (fakeTimersType) {
+    jest.useRealTimers();
+  }
+
+  const callbackReturnValue = callback();
+
+  if (fakeTimersType) {
+    jest.useFakeTimers(fakeTimersType);
+  }
+
+  return callbackReturnValue;
+}
+
+function getJestFakeTimersType() {
+  // istanbul ignore if
+  if (
+    typeof jest === 'undefined' ||
+    typeof globalObj.setTimeout === 'undefined'
+  ) {
+    return null;
+  }
+
+  if (
+    typeof globalObj.setTimeout._isMockFunction !== 'undefined' &&
+    globalObj.setTimeout._isMockFunction
+  ) {
+    return 'legacy';
+  }
+
+  if (
+    typeof globalObj.setTimeout.clock !== 'undefined' &&
+    // $FlowIgnore[prop-missing]
+    typeof jest.getRealSystemTime !== 'undefined'
+  ) {
+    try {
+      // jest.getRealSystemTime is only supported for Jest's `modern` fake timers and otherwise throws
+      // $FlowExpectedError
+      jest.getRealSystemTime();
+      return 'modern';
+    } catch {
+      // not using Jest's modern fake timers
+    }
+  }
+  return null;
+}
+
+const jestFakeTimersAreEnabled = (): boolean =>
+  Boolean(getJestFakeTimersType());
+
+// we only run our tests in node, and setImmediate is supported in node.
+function setImmediatePolyfill(fn) {
+  return globalObj.setTimeout(fn, 0);
+}
+
+type BindTimeFunctions = {
+  clearTimeoutFn: typeof clearTimeout,
+  setImmediateFn: typeof setImmediate,
+  setTimeoutFn: typeof setTimeout,
+};
+
+function bindTimeFunctions(): BindTimeFunctions {
+  return {
+    clearTimeoutFn: globalObj.clearTimeout,
+    setImmediateFn: globalObj.setImmediate || setImmediatePolyfill,
+    setTimeoutFn: globalObj.setTimeout,
+  };
+}
+
+const { clearTimeoutFn, setImmediateFn, setTimeoutFn } = (runWithRealTimers(
+  bindTimeFunctions
+): BindTimeFunctions);
+
+export {
+  runWithRealTimers,
+  jestFakeTimersAreEnabled,
+  clearTimeoutFn as clearTimeout,
+  setImmediateFn as setImmediate,
+  setTimeoutFn as setTimeout,
+};

src/waitFor.js

@@ -1,4 +1,5 @@
 // @flow
+/* globals jest */
 
 import * as React from 'react';
 import act from './act';
@@ -7,8 +8,14 @@ import {
   throwRemovedFunctionError,
   copyStackTrace,
 } from './helpers/errors';
+import {
+  setTimeout,
+  clearTimeout,
+  setImmediate,
+  jestFakeTimersAreEnabled,
+} from './helpers/timers';
 
-const DEFAULT_TIMEOUT = 4500;
+const DEFAULT_TIMEOUT = 1000;
 const DEFAULT_INTERVAL = 50;
 
 function checkReactVersionAtLeast(major: number, minor: number): boolean {
@@ -21,36 +28,159 @@ function checkReactVersionAtLeast(major: number, minor: number): boolean {
 export type WaitForOptions = {
   timeout?: number,
   interval?: number,
+  stackTraceError?: ErrorWithStack,
 };
 
 function waitForInternal<T>(
   expectation: () => T,
-  options?: WaitForOptions
+  {
+    timeout = DEFAULT_TIMEOUT,
+    interval = DEFAULT_INTERVAL,
+    stackTraceError,
+  }: WaitForOptions
 ): Promise<T> {
-  const timeout = options?.timeout ?? DEFAULT_TIMEOUT;
+  if (typeof expectation !== 'function') {
-  const interval = options?.interval ?? DEFAULT_INTERVAL;
+    throw new TypeError('Received `expectation` arg must be a function');
-  const startTime = Date.now();
+  }
-  // Being able to display a useful stack trace requires generating it before doing anything async
-  const stackTraceError = new ErrorWithStack('STACK_TRACE_ERROR', waitFor);
 
-  return new Promise((resolve, reject) => {
+  // eslint-disable-next-line no-async-promise-executor
-    const rejectOrRerun = (error) => {
+  return new Promise(async (resolve, reject) => {
-      if (Date.now() - startTime >= timeout) {
+    let lastError, intervalId;
-        copyStackTrace(error, stackTraceError);
+    let finished = false;
-        reject(error);
+    let promiseStatus = 'idle';
-        return;
+
+    const overallTimeoutTimer = setTimeout(handleTimeout, timeout);
+
+    const usingFakeTimers = jestFakeTimersAreEnabled();
+
+    if (usingFakeTimers) {
+      checkExpectation();
+      // this is a dangerous rule to disable because it could lead to an
+      // infinite loop. However, eslint isn't smart enough to know that we're
+      // setting finished inside `onDone` which will be called when we're done
+      // waiting or when we've timed out.
+      // eslint-disable-next-line no-unmodified-loop-condition
+      let fakeTimeRemaining = timeout;
+      while (!finished) {
+        if (!jestFakeTimersAreEnabled()) {
+          const error = new Error(
+            `Changed from using fake timers to real timers while using waitFor. This is not allowed and will result in very strange behavior. Please ensure you're awaiting all async things your test is doing before changing to real timers. For more info, please go to https://github.com/testing-library/dom-testing-library/issues/830`
+          );
+          if (stackTraceError) {
+            copyStackTrace(error, stackTraceError);
+          }
+          reject(error);
+          return;
+        }
+
+        // when fake timers are used we want to simulate the interval time passing
+        if (fakeTimeRemaining <= 0) {
+          return;
+        } else {
+          fakeTimeRemaining -= interval;
+        }
+
+        // we *could* (maybe should?) use `advanceTimersToNextTimer` but it's
+        // possible that could make this loop go on forever if someone is using
+        // third party code that's setting up recursive timers so rapidly that
+        // the user's timer's don't get a chance to resolve. So we'll advance
+        // by an interval instead. (We have a test for this case).
+        jest.advanceTimersByTime(interval);
+
+        // It's really important that checkExpectation is run *before* we flush
+        // in-flight promises. To be honest, I'm not sure why, and I can't quite
+        // think of a way to reproduce the problem in a test, but I spent
+        // an entire day banging my head against a wall on this.
+        checkExpectation();
+
+        // In this rare case, we *need* to wait for in-flight promises
+        // to resolve before continuing. We don't need to take advantage
+        // of parallelization so we're fine.
+        // https://stackoverflow.com/a/59243586/971592
+        // eslint-disable-next-line no-await-in-loop
+        await new Promise((resolve) => setImmediate(resolve));
       }
-      setTimeout(runExpectation, interval);
+    } else {
-    };
+      intervalId = setInterval(checkRealTimersCallback, interval);
-    function runExpectation() {
+      checkExpectation();
-      try {
+    }
-        const result = expectation();
+
+    function onDone(error, result) {
+      finished = true;
+      clearTimeout(overallTimeoutTimer);
+
+      if (!usingFakeTimers) {
+        clearInterval(intervalId);
+      }
+
+      if (error) {
+        reject(error);
+      } else {
+        // $FlowIgnore[incompatible-return] error and result are mutually exclusive
         resolve(result);
-      } catch (error) {
-        rejectOrRerun(error);
       }
     }
-    setTimeout(runExpectation, 0);
+
+    function checkRealTimersCallback() {
+      if (jestFakeTimersAreEnabled()) {
+        const error = new Error(
+          `Changed from using real timers to fake timers while using waitFor. This is not allowed and will result in very strange behavior. Please ensure you're awaiting all async things your test is doing before changing to fake timers. For more info, please go to https://github.com/testing-library/dom-testing-library/issues/830`
+        );
+        if (stackTraceError) {
+          copyStackTrace(error, stackTraceError);
+        }
+        return reject(error);
+      } else {
+        return checkExpectation();
+      }
+    }
+
+    function checkExpectation() {
+      if (promiseStatus === 'pending') return;
+      try {
+        const result = expectation();
+
+        // $FlowIgnore[incompatible-type]
+        if (typeof result?.then === 'function') {
+          promiseStatus = 'pending';
+          // eslint-disable-next-line promise/catch-or-return
+          result.then(
+            (resolvedValue) => {
+              promiseStatus = 'resolved';
+              onDone(null, resolvedValue);
+              return;
+            },
+            (rejectedValue) => {
+              promiseStatus = 'rejected';
+              lastError = rejectedValue;
+              return;
+            }
+          );
+        } else {
+          onDone(null, result);
+        }
+        // If `callback` throws, wait for the next mutation, interval, or timeout.
+      } catch (error) {
+        // Save the most recent callback error to reject the promise with it in the event of a timeout
+        lastError = error;
+      }
+    }
+
+    function handleTimeout() {
+      let error;
+      if (lastError) {
+        error = lastError;
+        if (stackTraceError) {
+          copyStackTrace(error, stackTraceError);
+        }
+      } else {
+        error = new Error('Timed out in waitFor.');
+        if (stackTraceError) {
+          copyStackTrace(error, stackTraceError);
+        }
+      }
+      onDone(error, null);
+    }
   });
 }
 
@@ -58,15 +188,19 @@ export default async function waitFor<T>(
   expectation: () => T,
   options?: WaitForOptions
 ): Promise<T> {
+  // Being able to display a useful stack trace requires generating it before doing anything async
+  const stackTraceError = new ErrorWithStack('STACK_TRACE_ERROR', waitFor);
+  const optionsWithStackTrace = { stackTraceError, ...options };
+
   if (!checkReactVersionAtLeast(16, 9)) {
-    return waitForInternal(expectation, options);
+    return waitForInternal(expectation, optionsWithStackTrace);
   }
 
   let result: T;
 
   //$FlowFixMe: `act` has incorrect flow typing
   await act(async () => {
-    result = await waitForInternal(expectation, options);
+    result = await waitForInternal(expectation, optionsWithStackTrace);
   });
 
   //$FlowFixMe: either we have result or `waitFor` threw error

website/docs/API.md

@@ -366,8 +366,6 @@ test('waiting for an Banana to be ready', async () => {
 In order to properly use `waitFor` you need at least React >=16.9.0 (featuring async `act`) or React Native >=0.60 (which comes with React >=16.9.0).
 :::
 
-If you're using Jest's [Timer Mocks](https://jestjs.io/docs/en/timer-mocks#docsNav), remember not to await the return of `waitFor` as it will stall your tests.
-
 ## `waitForElementToBeRemoved`
 
 - [`Example code`](https://github.com/callstack/react-native-testing-library/blob/master/src/__tests__/waitForElementToBeRemoved.test.js)
@@ -404,8 +402,6 @@ You can use any of `getBy`, `getAllBy`, `queryBy` and `queryAllBy` queries for `
 In order to properly use `waitForElementToBeRemoved` you need at least React >=16.9.0 (featuring async `act`) or React Native >=0.60 (which comes with React >=16.9.0).
 :::
 
-If you're using Jest's [Timer Mocks](https://jestjs.io/docs/en/timer-mocks#docsNav), remember not to await the return of `waitFor` as it will stall your tests.
-
 ## `within`, `getQueriesForElement`
 
 - [`Example code`](https://github.com/callstack/react-native-testing-library/blob/master/src/__tests__/within.test.js)