React component using useQuery fails to render data when using jest.useFakeTimers

[ensconced]

See here for details on how to reproduce this issue.

You should be able to reproduce the issue just by cloning that repo, running npm install and then npm run test.
There are two tests, each pretty much the same except that one uses fake timers, which seems to cause it to fail.

From what I can tell, the store is always updated with the data from the (stubbed) API response, but when using fake timers this does not result in the react component actually being rendered with the data.

[ensconced]

It seems that passing { doNotFake: ['clearTimeout'] } into jest.useFakeTimers fixes this. (This isn't viable as a workaround for me - just mentioning in case it helps the investigation).

[phryneas]

I mean, you're configuring your runtime to not run per the specification. That will break every tool using setTimeout and clearTimeout - and RTK Query uses those.

So honestly I don't know what we could do to fix that - RTKQ needs them to work :/

[ensconced]

Sorry if this wasn't clear, but the reason I expect this to work is that the findBy functions provided by react testing library internally advance fake timers if they detect that jest is using fake timers.

(Here is the relevant code in testing library https://github.com/testing-library/dom-testing-library/blob/a86c54ccda5242ad8dfc1c70d31980bdbf96af7f/src/wait-for.js#L51)

I've done some more digging and I'm pretty sure this is the problem:

redux-toolkit/packages/toolkit/src/autoBatchEnhancer.ts

Line 20 in 24286f1

const rAF =

requestAnimationFrame is read into rAF at the top level of that module, meaning it will always use the real version of window.requestAnimationFrame and never the fake version inserted by jest.

[ensconced]

If I move the assignment of rAF into the autoBatchEnhancer function, just before it's used, it fixes my test.