Tests with async useEffect don't seem to complete #1067

Activity

1. pierrezimmermannbam commented on Aug 19, 2022

   

   pierrezimmermannbam

   on Aug 19, 2022

   Collaborator

   More actions

   I believe the issue is the combination of timeouts and promises. From what I notice, the first promise is never resolved. Not sure this should be handled by the library but I do think in this kind of situation what you want to do is use fake timers. Using real timers with timeouts makes tests less predictable and in some cases quite long running so I'd advise against that.
   I managed to make your test work by using fake timers with the following code :

   jest.useFakeTimers();
   
   test("MyComponent", async () => {
     render(<MyComponent />);
   
     // Commenting this out makes it work but with `act` warnings... however
     // wrapping it in an async `act` causes the test to fail again
     // await wait({ ms:5000 });
   
     // Run timer of stage 1
     jest.runOnlyPendingTimers();
     // Wait for promise to be resolved
     await waitFor(() => {});
   
     // Run timer of stage 2
     jest.runOnlyPendingTimers();
     // Wait for promise to be resolved
     await waitFor(() => {});
   
     // Run timer of stage 3
     jest.runOnlyPendingTimers();
     await screen.findByText("Hello world.", {}, { timeout: 20000 });
   }, 30000);

   This is not ideal as there are waitFor with empty callbacks which act here as a way to flush promises but there is no observable effect at the end of the first two stages. This is a very contrived example though and it should be rather unlikely that you encounter something similar very often

   Hope this helps !
2. leepowellnbs commented on Aug 19, 2022

   

   leepowellnbs

   on Aug 19, 2022

   More actions

   I'm more concerned about why the first promise doesn't resolve ... I can't see any reason it shouldn't. And I don't think I should be limited to fake timers to make this run. Appreciate this is a contrived example, but I currently have real world code that is similar to this - async useEffects updating state to trigger other useEffects.

   I'll certainly take a look over your approach. Thanks.
3. mdjastrzebski commented on Aug 19, 2022

   

   mdjastrzebski

   on Aug 19, 2022

   Member

   More actions

   @leepowelldev Does the MyComponent test work correctly if we have only 2 promises? What about a single promise? I wonder what might be threshold fold observed behaviour.
4. leepowelldev commented on Aug 20, 2022

   

   leepowelldev

   on Aug 20, 2022

   Author

   More actions

   @mdjastrzebski a single promise passes, mutiple promises fails. I don't believe this is a problem with timeouts, but possibly an issue with the promises...

   I tried changing the wait util from:

   function wait({
     ms = 500,
     signal,
   }: { ms?: number; signal?: AbortSignal } = {}): Promise<void> {
     return new Promise((resolve, reject) => {
       const id = setTimeout(() => {
         resolve()
       }, ms);
   
       if (signal) {
         signal.addEventListener('abort', () => {
           clearTimeout(id);
           reject(new Error('Aborted'));
         });
       }
     });
   }
   

   to simply:

   function wait(): Promise<void> {
     return Promise.resolve();
   }
   

   And still got the same issues.
5. leepowellnbs commented on Sep 21, 2022

   

   leepowellnbs

   on Sep 21, 2022

   More actions

   FYI I tested this in @testing-library/react and it passes as expected.
6. AugustinLF commented on Sep 21, 2022

   

   AugustinLF

   on Sep 21, 2022

   Collaborator

   More actions

   I'm pretty sure it's the same as #1093. If you use react 18, we seem to have issues with some cases. In the linked issue there is an attached PR that should fix that.
7. mdjastrzebski commented on Sep 26, 2022

   

   mdjastrzebski

   on Sep 26, 2022

   Member

   More actions

   I've retested the repro repo you submitted with following deps update and all tests pass:

     "dependencies": {
       "react": "18.1.0",
       "react-dom": "18.1.0",
       "react-native": "0.70.1",
     },
     "devDependencies": {
       "@testing-library/react-native": "^11.2.0",
       "react-test-renderer": "18.1.0",
     },
   

   Note: the tests seem to require Node 16, due to AbortController not available in Node 14.

   @leepowelldev can you confirm the RNTL v11.2.0 (with potential React, React Test Renderer and React Native updates) does solve the issue for you.
8. mdjastrzebski commented on Sep 30, 2022

   

   mdjastrzebski

   on Sep 30, 2022

   Member

   More actions

   Closing as fixed.

   @leepowelldev If the issue still occurs for you on the latest version of RNTL, please provide update the repo with latest RNTL, React, etc deps so that we are able to reproduce it on our end.
9. mdjastrzebski

   closed this as completedon Sep 30, 2022
10. leepowellnbs commented on Sep 30, 2022

    

    leepowellnbs

    on Sep 30, 2022

    More actions

    @mdjastrzebski sorry, this was on my "todo" list, but it's been a busy few days and it slipped my mind. Thanks for the fix and for testing 🙇

    👍React with 👍1Reacted by Maciej Jastrzebski