🐛Requests with RTK Query do not resolve with various jest.useFakeTimers() configs

[Shrugsy]

When using jest.useFakeTimers(), RTK Query requests resolve normally with jest.useFakeTimers('legacy'), but not with jest.useFakeTimers('modern')

A repo reproducing the issue can be found here:

• on jest v26.6.3: https://github.com/Shrugsy/rtk-query-jest-compatibility-test/tree/master
• on Jest v27.0.0: https://github.com/Shrugsy/rtk-query-jest-compatibility-test/tree/jest-v27.0.0

Tests with jest^26.6.3

• ✔️ passes with useFakeTimers('legacy') (note that useFakeTimers() defaults to 'legacy' on this jest version)
• ❌ fails with useFakeTimers('modern')

Test results: https://github.com/Shrugsy/rtk-query-jest-compatibility-test/runs/4305391175?check_suite_focus=true

Test file: https://github.com/Shrugsy/rtk-query-jest-compatibility-test/blob/79d6dd98a499dbc5df9f2fb631e0fa6888ed724d/src/_tests/App.spec.tsx

The observed symptom is that the query hook always stays in the isLoading state

FAIL src/_tests/App.spec.tsx (5.103 s)
  App test
    ✓ Loads a project without fake timers (789 ms)
    ✓ Loads a project with jest fake timers (legacy) (643 ms)
    ✕ Loads a project with jest fake timers (modern) (1021 ms)

  ● App test › Loads a project with jest fake timers (modern)

    TestingLibraryElementError: Unable to find an element with the text: /Successfully fetched projects!/i. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.

Tests with jest^27.0.0

• ❌ fails with useFakeTimers('legacy')
• ❌ fails with useFakeTimers('modern') (note that useFakeTimers() defaults to 'modern' on this jest version)

Test results: https://github.com/Shrugsy/rtk-query-jest-compatibility-test/runs/4305392974?check_suite_focus=true

FAIL src/_tests/App.spec.tsx
  App test
    ✓ Loads a project without fake timers (769 ms)
    ✕ Loads a project with jest fake timers (legacy) (1027 ms)
    ✕ Loads a project with jest fake timers (modern) (1023 ms)

  ● App test › Loads a project with jest fake timers (legacy)

    Unable to find an element with the text: /Successfully fetched projects!/i. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.

[Shrugsy]

For jest v26.6.3, after swapping whatwg-fetch out for node-fetch, both legacy and modern fake timers work as expected.

https://github.com/Shrugsy/rtk-query-jest-compatibility-test/runs/4318217563?check_suite_focus=true

v27+ still needs further investigation

[markerikson]

Ironically I just ran into this yesterday while trying to deal with test failures from https://github.com/reduxjs/redux-toolkit/pull/2409 . I did indeed end up setting all of our useFakeTimers back to 'legacy':

https://github.com/reduxjs/redux-toolkit/pull/2460

[markerikson]

Well, I ended up switching us to Vitest for our 2.0 branch. No one else has complained about this in their tests, so I'm going to close this.