Combining jsdom testEnvironment and fake timers results in timeout errors

[dcalhoun]

Describe the bug

Combining testEnvironment: 'jsdom' and fake timers, regardless of "legacy" or "modern" timers, results in timeout errors. It would appear that setImmediate does not perform as expected, breaking the built-in cleanup functionality of @testing-library/react-native.

This issue occurs in Jest 27, not Jest 26. Jest 27 includes a fair number of changes, including changes to setImmediate.

Error Details

> rntl-jsdom-fake-timers@0.0.1 test
> jest

 PASS  ./node-real-timers.test.js
 PASS  ./node-fake-timers.test.js
 PASS  ./jsdom-real-timers.test.js
 FAIL  ./jsdom-fake-timers.test.js (5.829 s)
  ● jsdom test environment with fake timers › does not timeout

    thrown: "Exceeded timeout of 5000 ms for a hook.
    Use jest.setTimeout(newTimeout) to increase the timeout value, if this is a long-running test."

      3 |  */
      4 |
    > 5 | import "@testing-library/react-native";
        | ^
      6 |
      7 | beforeEach(() => {
      8 |   jest.useFakeTimers();

      at Object.<anonymous> (node_modules/@testing-library/react-native/build/index.js:29:3)
      at Object.<anonymous> (jsdom-fake-timers.test.js:5:1)

Test Suites: 1 failed, 3 passed, 4 total
Tests:       1 failed, 3 passed, 4 total
Snapshots:   0 total
Time:        6.732 s
Ran all test suites.

Expected behavior

Combining @testing-library/react-native, testEnvironment: 'jsdom', and fake timers does not cause tests to fail with timeout errors.

Steps to Reproduce

1. Clone the reproduction.
2. npm install
3. npm run test

Screenshots

n/a

Versions

  npmPackages:
    @testing-library/react-native: ^9.0.0 => 9.0.0
    react: 17.0.2 => 17.0.2
    react-native: 0.66.4 => 0.66.4
    react-test-renderer: 17.0.2 => 17.0.2

[mdjastrzebski]

We only suport testEnvironment: 'node'.

If you want to test under jsdom (e.g. for React Native Web) then React Testing Library is more suitable option as it provides better interaction with JSDOM.

[AugustinLF]

Might be worth warning if that's the case? Where I work we share the same test file for web and native, and have jsdom setup for all our RNTL tests. I'll fix that, but I didn't know it could be a problem.

[kopax-polyconseil]

Hello, we also have the same problem and as @AugustinLF pointed out, where can we found the upgrade guide for this version ? We are not aware of what action should be done to succeed an upgrade to jest 27.

[dcalhoun]

Hello, we also have the same problem and as @AugustinLF pointed out, where can we found the upgrade guide for this version ? We are not aware of what action should be done to succeed an upgrade to jest 27.

@kopax-polyconseil there are two options:

1. Change your Jest configuration to testEnvironment: 'node' and address any incompatibility in your test (e.g. DOM references).
2. Continue using testEnvironment: 'jsdom' and replace RNTL usage with React Testing Library.

Option 1 is ideal if achievable for your code, as tests will run faster.

Also, you may be able to mix both options by setting the testing environment for individual files as needed with a comment in a given test file.

[thymikee]

To add to @mdjastrzebski's comment:

We only suport testEnvironment: 'node'.
If you want to test under jsdom (e.g. for React Native Web) then React Testing Library is more suitable option as it provides better interaction with JSDOM.

The thing is that even though this library may work within "jsdom" environment, we can't give any guarantee on that, because we're not testing it. We advise using "node" for various reasons outlined in this thread and other ones.

However, I'm happy to learn about usecases we may miss by not actively supporting "jsdom" :)

[kopax-polyconseil]

2. Continue using testEnvironment: 'jsdom' and replace RNTL usage with React Testing Library.

Actually, we are using testEnvironment: 'jest-environment-jsdom', and as advice per the documentation of react-native-testing-library, we installed the dependency and keep using it. However I have a bunch of problem in the process of upgrading to jest 27, for instance, on native, I used to use import * as consoleFailTestModule from 'console-fail-test' to forbid logging during test, and now I can't execute it in a global.beforeAll I have :

    Cannot add a hook after tests have started running. Hooks must be defined synchronously.

Considering the amount of test in our project, I believe this is very hard to upgrade. This is our branch https://github.com/pass-culture/pass-culture-app-native/tree/update-jest-27 .

I wonder how jest 27 as no upgrade guide considering all the change you made =/

[thymikee]

@kopax-polyconseil it's unrelated to this library, but you can mock out the console object however you like, without relying on external library.

[kopax-polyconseil]

You misunderstood me, this module console-fail-test is not a logger, it is meant to fail test if they are logs.

I have described the issue here since we tried the upgrade to jest 27, we are unable to fix it : JoshuaKGoldberg/console-fail-test#72 (comment)

Perhaps you have a hint for us, I don't have any idea atm yet.

[MaxToyberman]

how did jsdom work with jest 26 ?

[dcalhoun]

how did jsdom work with jest 26 ?

👋🏻 @MaxToyberman. As I mentioned in the original issue description (quoted below), there were a fair number of changes between Jest 26 and Jest 27 — it may be difficult to provide a concise answer to your question. Also, this issue is quite old, the project maintainers may not notice or respond to new comments. I suggest creating a new issue with details on any specific problems you encountered. 🙇🏻

This issue occurs in Jest 27, not Jest 26. Jest 27 includes a fair number of changes, including changes to setImmediate.