react-testing-library icon indicating copy to clipboard operation
react-testing-library copied to clipboard

Support sinon fake timers

Open thatsmydoing opened this issue 2 years ago • 3 comments

Describe the feature you'd like:

When using waitFor and sinon fake timers enabled, the test gets stuck and eventually times out. This seems to be a consequence of https://github.com/testing-library/react-testing-library/commit/f78839bf4147a777a823e33a429bcf5de9562f9e which adds a setTimeout.

Suggested implementation:

Supporting it in the same way jest timers are supported is probably okay, alternatively provide configuration for generically supporting arbitrary fake timer implementations.

Describe alternatives you've considered:

Adding the following to our test setup seems to work with the current version but it could easily get out of sync and it would be nice to have it built in or provide nicer abstraction to configure.

import { configure } from '@testing-library/react';
import sinon from 'sinon';

configure({
  asyncWrapper: async (cb) => {
    // our tests run only in the browser but this should more properly be getIsReactActEnvironment()
    const previousActEnvironment = window.IS_REACT_ACT_ENVIRONMENT;
    window.IS_REACT_ACT_ENVIRONMENT = false;
    try {
      const result = await cb();
      // Drain microtask queue.
      // Otherwise we'll restore the previous act() environment, before we resolve the `waitFor` call.
      // The caller would have no chance to wrap the in-flight Promises in `act()`
      await new Promise(resolve => {
        setTimeout(() => {
          resolve();
        }, 0);
        // run callbacks if we've mocked out global timers
        if (window.Date.isFake) {
          sinon.clock.tick(0);
        }
      });
      return result;
    } finally {
      window.IS_REACT_ACT_ENVIRONMENT = previousActEnvironment;
    }
  },
});

Teachability, Documentation, Adoption, Migration Strategy:

Ideally, it should just work. Otherwise, examples for how to configure it would be nice.

thatsmydoing avatar Mar 06 '23 09:03 thatsmydoing

Alternatively, flush the queue without using setTimeout like what react does in https://github.com/facebook/react/blob/main/packages/shared/enqueueTask.js

thatsmydoing avatar Mar 06 '23 14:03 thatsmydoing

This would be great, jest fake timers are supported in RTL, but sinon fake times are widely used. We can't build a few scenarios due to this limitation at the moment.

eugenet8k avatar Mar 17 '23 20:03 eugenet8k

Use this snippet if you only want the current time to be faked

sinon.useFakeTimers({
        now: (new Date(2024, 7, 21)).getTime(),
        toFake: ['Date'],
      });

Aryan3212 avatar Aug 04 '24 09:08 Aryan3212