testing-library / testing-library/react-testing-library

Support sinon fake timers

Open
#1,187 3 comments 19 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
JavaScript
Stars
19.7k
Forks
1.2k
Avg merge
3d 16h
Merged PRs (30d)
1

Description

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.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by tracing the waitFor behavior and the setTimeout added in commit f78839bf4147a777a823e33a429bcf5de9562f9e. Review the configure asyncWrapper example in the issue and compare it with existing Jest timer support. Done means waitFor no longer hangs with Sinon fake timers, or the supported configuration and examples are clearly documented.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react
Domain
frontend, testing-qa
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.