Dom-testing-library: jest.useFakeTimers() breaks waitForDomChange, waitForElement, waitForElementToBeRemoved due to setTimeout

[LaurensBosscher]

Issue:

When running any tests with:

• waitForDomChange
• waitForElement
• waitForElementToBeRemoved

with jest.useFakeTimers enabled, these functions only run once and then fail.

This is because they use setTimeout internally to set a timeout.

However wait does work as expected because wait-for-expect has implemented a workaround, see: https://github.com/TheBrainFamily/wait-for-expect/pull/5/files

Would it be possible to implement this workaround for waitForDomChange, waitForElement, waitForElementToBeRemoved as well?

I'm willing to make a PR if I could talk the changes through with someone (e.g do we want to implement setTimeout as a util function or do we want to add the workaround to these three functions, how do we make sure that this will not break again in the future?).

[kentcdodds]

I'm in favor 👍 thanks.

[alexkrolick]

do we want to implement setTimeout as a util function or do we want to add the workaround to these three functions, how do we make sure that this will not break again in the future

How about implementing it as a util function that performs the workaround from wait-for-expect as the initial implementation, so that future changes, if any, are isolated? It looks like they have added a few more tweaks to the workaround since that PR.

https://github.com/TheBrainFamily/wait-for-expect/blob/7bf926a9b347ff297bdc3e4099fb123d85935392/src/index.ts#L10-L14

// Used to avoid using Jest's fake timers and Date.now mocks
// See https://github.com/TheBrainFamily/wait-for-expect/issues/4 and
// https://github.com/TheBrainFamily/wait-for-expect/issues/12 for more info
const { setTimeout, Date: { now } } =
  typeof window !== "undefined" ? window : global;

[LaurensBosscher]

do we want to implement setTimeout as a util function or do we want to add the workaround to these three functions, how do we make sure that this will not break again in the future

How about implementing it as a util function that performs the workaround from wait-for-expect as the initial implementation, so that future changes, if any, are isolated? It looks like they have added a few more tweaks to the workaround since that PR.

https://github.com/TheBrainFamily/wait-for-expect/blob/7bf926a9b347ff297bdc3e4099fb123d85935392/src/index.ts#L10-L14

// Used to avoid using Jest's fake timers and Date.now mocks
// See https://github.com/TheBrainFamily/wait-for-expect/issues/4 and
// https://github.com/TheBrainFamily/wait-for-expect/issues/12 for more info
const { setTimeout, Date: { now } } =
  typeof window !== "undefined" ? window : global;

Sounds good! I got held up with a bunch of Safari issues the past few days. I'll pick this up asap. Implementing this as a util function sounds great.

The only thing that I'm still struggling with is how to make sure that our existing tests will still use the fake timer mock.

I think we can fix that by checking if a global boolean is set (e.g global.useSetTimeOutMock) and if it's set we can return the mock. I'll try to prototype something in the coming week and make a PR.

[kentcdodds]

This has been fixed 👍 Thanks!