test(ui): Swap hook test waitForNextUpdate for waitFor (#66031)

static/app/components/onboardingWizard/useOnboardingDocs.spec.tsx

@@ -41,7 +41,7 @@ describe('useOnboardingDocs', function () {
       });
     });
 
-    const {result, waitForNextUpdate} = reactHooks.renderHook(useOnboardingDocs, {
+    const {result, waitFor} = reactHooks.renderHook(useOnboardingDocs, {
       initialProps: {
         project,
         docKeys,
@@ -51,10 +51,9 @@ describe('useOnboardingDocs', function () {
       },
       wrapper,
     });
-    await waitForNextUpdate();
-    const {docContents, isLoading, hasOnboardingContents} = result.current;
+    await waitFor(() => expect(result.current.isLoading).toEqual(false));
+    const {docContents, hasOnboardingContents} = result.current;
 
-    expect(isLoading).toEqual(false);
     const expectedDocContents = Object.keys(apiMocks).reduce((acc, key) => {
       acc[key] = `${key} content`;
       return acc;

static/app/utils/api/useFetchParallelPages.spec.tsx

@@ -47,18 +47,15 @@ describe('useFetchParallelPages', () => {
     });
     const getQueryKey = queryKeyFactory();
 
-    const {result, rerender, waitForNextUpdate} = reactHooks.renderHook(
-      useFetchParallelPages,
-      {
-        wrapper: makeWrapper(makeTestQueryClient()),
-        initialProps: {
-          enabled: false,
-          getQueryKey,
-          hits: 13,
-          perPage: 10,
-        },
-      }
-    );
+    const {result, rerender, waitFor} = reactHooks.renderHook(useFetchParallelPages, {
+      wrapper: makeWrapper(makeTestQueryClient()),
+      initialProps: {
+        enabled: false,
+        getQueryKey,
+        hits: 13,
+        perPage: 10,
+      },
+    });
 
     expect(result.current.isFetching).toBeFalsy();
     expect(getQueryKey).not.toHaveBeenCalled();
@@ -68,9 +65,7 @@ describe('useFetchParallelPages', () => {
     expect(result.current.isFetching).toBeTruthy();
     expect(getQueryKey).toHaveBeenCalled();
 
-    await waitForNextUpdate();
-
-    expect(result.current.isFetching).toBeFalsy();
+    await waitFor(() => expect(result.current.isFetching).toBeFalsy());
   });
 
   it('should call the queryFn zero times, when hits is 0', () => {
@@ -101,7 +96,7 @@ describe('useFetchParallelPages', () => {
     });
     const getQueryKey = queryKeyFactory();
 
-    const {result, waitForNextUpdate} = reactHooks.renderHook(useFetchParallelPages, {
+    const {result, waitFor} = reactHooks.renderHook(useFetchParallelPages, {
       wrapper: makeWrapper(makeTestQueryClient()),
       initialProps: {
         enabled: true,
@@ -112,8 +107,7 @@ describe('useFetchParallelPages', () => {
     });
 
     expect(result.current.isFetching).toBeTruthy();
-    await waitForNextUpdate();
-    expect(result.current.isFetching).toBeFalsy();
+    await waitFor(() => expect(result.current.isFetching).toBeFalsy());
     expect(getQueryKey).toHaveBeenCalledTimes(1);
   });
 
@@ -124,7 +118,7 @@ describe('useFetchParallelPages', () => {
     });
     const getQueryKey = queryKeyFactory();
 
-    const {result, waitForNextUpdate} = reactHooks.renderHook(useFetchParallelPages, {
+    const {result, waitFor} = reactHooks.renderHook(useFetchParallelPages, {
       wrapper: makeWrapper(makeTestQueryClient()),
       initialProps: {
         enabled: true,
@@ -135,8 +129,7 @@ describe('useFetchParallelPages', () => {
     });
 
     expect(result.current.isFetching).toBeTruthy();
-    await waitForNextUpdate();
-    expect(result.current.isFetching).toBeFalsy();
+    await waitFor(() => expect(result.current.isFetching).toBeFalsy());
     expect(getQueryKey).toHaveBeenCalledTimes(3);
   });
 
@@ -153,7 +146,7 @@ describe('useFetchParallelPages', () => {
     });
     const getQueryKey = queryKeyFactory();
 
-    const {result, waitForNextUpdate} = reactHooks.renderHook(useFetchParallelPages, {
+    const {result, waitFor} = reactHooks.renderHook(useFetchParallelPages, {
       wrapper: makeWrapper(makeTestQueryClient()),
       initialProps: {
         enabled: true,
@@ -163,8 +156,7 @@ describe('useFetchParallelPages', () => {
       },
     });
 
-    await waitForNextUpdate();
-    expect(result.current.isFetching).toBeFalsy();
+    await waitFor(() => expect(result.current.isFetching).toBeFalsy());
     expect(result.current.pages).toEqual([
       'results starting at 0',
       'results starting at 10',
@@ -179,7 +171,7 @@ describe('useFetchParallelPages', () => {
     });
     const getQueryKey = queryKeyFactory();
 
-    const {result, waitForNextUpdate} = reactHooks.renderHook(useFetchParallelPages, {
+    const {result, waitFor} = reactHooks.renderHook(useFetchParallelPages, {
       wrapper: makeWrapper(makeTestQueryClient()),
       initialProps: {
         enabled: true,
@@ -189,8 +181,7 @@ describe('useFetchParallelPages', () => {
       },
     });
 
-    await waitForNextUpdate();
-    expect(result.current.isFetching).toBeFalsy();
+    await waitFor(() => expect(result.current.isFetching).toBeFalsy());
     expect(result.current.isError).toBeFalsy();
   });
 
@@ -209,7 +200,7 @@ describe('useFetchParallelPages', () => {
     });
     const getQueryKey = queryKeyFactory();
 
-    const {result, waitForNextUpdate} = reactHooks.renderHook(useFetchParallelPages, {
+    const {result, waitFor} = reactHooks.renderHook(useFetchParallelPages, {
       wrapper: makeWrapper(makeTestQueryClient()),
       initialProps: {
         enabled: true,
@@ -219,8 +210,7 @@ describe('useFetchParallelPages', () => {
       },
     });
 
-    await waitForNextUpdate();
-    expect(result.current.isFetching).toBeFalsy();
+    await waitFor(() => expect(result.current.isFetching).toBeFalsy());
     expect(result.current.getLastResponseHeader).toStrictEqual(expect.any(Function));
     expect(result.current.getLastResponseHeader?.('Link')).toBe('next: 0:20:0');
   });
@@ -241,7 +231,7 @@ describe('useFetchParallelPages', () => {
 
     const getQueryKey = queryKeyFactory();
 
-    const {result, waitForNextUpdate} = reactHooks.renderHook(useFetchParallelPages, {
+    const {result, waitFor} = reactHooks.renderHook(useFetchParallelPages, {
       wrapper: makeWrapper(makeTestQueryClient()),
       initialProps: {
         enabled: true,
@@ -253,13 +243,12 @@ describe('useFetchParallelPages', () => {
 
     // No responses have resolved
     expect(result.current.isFetching).toBeTruthy();
-    await waitForNextUpdate();
-
-    // Only 1 response has resolved
-    expect(result.current.isFetching).toBeTruthy();
-    await waitForNextUpdate();
 
     // Both responses have resolved
-    expect(result.current.isFetching).toBeFalsy();
+    await waitFor(() => expect(result.current.isFetching).toBeFalsy());
+    expect(result.current.pages).toEqual([
+      'results starting at 0',
+      'results starting at 10',
+    ]);
   });
 });

static/app/utils/profiling/hooks/useProfileFunctionTrends.spec.tsx

@@ -63,15 +63,16 @@ describe('useProfileFunctionTrendss', function () {
     );
     expect(hook.result.current.isLoading).toEqual(true);
     expect(hook.result.current.isFetched).toEqual(false);
-    await hook.waitForNextUpdate();
-    expect(hook.result.current).toMatchObject(
-      expect.objectContaining({
-        isLoading: false,
-        isFetched: true,
-        data: expect.objectContaining({
-          data: expect.any(Array),
-        }),
-      })
+    await hook.waitFor(() =>
+      expect(hook.result.current).toMatchObject(
+        expect.objectContaining({
+          isLoading: false,
+          isFetched: true,
+          data: expect.objectContaining({
+            data: expect.any(Array),
+          }),
+        })
+      )
     );
   });
 });

static/app/utils/profiling/hooks/useProfileFunctions.spec.tsx

@@ -71,15 +71,16 @@ describe('useProfileFunctions', function () {
     );
     expect(hook.result.current.isLoading).toEqual(true);
     expect(hook.result.current.isFetched).toEqual(false);
-    await hook.waitForNextUpdate();
-    expect(hook.result.current).toMatchObject(
-      expect.objectContaining({
-        isLoading: false,
-        isFetched: true,
-        data: expect.objectContaining({
-          data: expect.any(Array),
-        }),
-      })
+    await hook.waitFor(() =>
+      expect(hook.result.current).toMatchObject(
+        expect.objectContaining({
+          isLoading: false,
+          isFetched: true,
+          data: expect.objectContaining({
+            data: expect.any(Array),
+          }),
+        })
+      )
     );
   });
 });

static/app/utils/replays/hooks/useInitialTimeOffsetMs.spec.tsx

@@ -43,7 +43,7 @@ describe('useInitialTimeOffsetMs', () => {
       const offsetInSeconds = 23;
       mockQuery({t: String(offsetInSeconds)});
 
-      const {result, waitForNextUpdate} = reactHooks.renderHook(useInitialTimeOffsetMs, {
+      const {result, waitFor} = reactHooks.renderHook(useInitialTimeOffsetMs, {
         initialProps: {
           orgSlug: organization.slug,
           projectSlug: project.slug,
@@ -51,9 +51,8 @@ describe('useInitialTimeOffsetMs', () => {
           replayStartTimestampMs: undefined,
         },
       });
-      await waitForNextUpdate();
 
-      expect(result.current).toStrictEqual({offsetMs: 23 * 1000});
+      await waitFor(() => expect(result.current).toStrictEqual({offsetMs: 23 * 1000}));
     });
 
     it('should prefer reading `t` over the other qs params', async () => {
@@ -64,7 +63,7 @@ describe('useInitialTimeOffsetMs', () => {
         query: 'click.tag:button',
       });
 
-      const {result, waitForNextUpdate} = reactHooks.renderHook(useInitialTimeOffsetMs, {
+      const {result, waitFor} = reactHooks.renderHook(useInitialTimeOffsetMs, {
         initialProps: {
           orgSlug: organization.slug,
           projectSlug: project.slug,
@@ -72,9 +71,8 @@ describe('useInitialTimeOffsetMs', () => {
           replayStartTimestampMs: undefined,
         },
       });
-      await waitForNextUpdate();
 
-      expect(result.current).toStrictEqual({offsetMs: 23 * 1000});
+      await waitFor(() => expect(result.current).toStrictEqual({offsetMs: 23 * 1000}));
       expect(MockFetchReplayClicks).toHaveBeenCalledTimes(0);
     });
   });
@@ -89,41 +87,35 @@ describe('useInitialTimeOffsetMs', () => {
       async ({input}) => {
         mockQuery({event_t: input});
 
-        const {result, waitForNextUpdate} = reactHooks.renderHook(
-          useInitialTimeOffsetMs,
-          {
-            initialProps: {
-              orgSlug: organization.slug,
-              projectSlug: project.slug,
-              replayId: replay.id,
-              replayStartTimestampMs: new Date(NOON).getTime(),
-            },
-          }
-        );
-        await waitForNextUpdate();
+        const {result, waitFor} = reactHooks.renderHook(useInitialTimeOffsetMs, {
+          initialProps: {
+            orgSlug: organization.slug,
+            projectSlug: project.slug,
+            replayId: replay.id,
+            replayStartTimestampMs: new Date(NOON).getTime(),
+          },
+        });
 
         // Expecting 5 minutes difference, in ms
-        expect(result.current).toStrictEqual({offsetMs: 5 * 60 * 1000});
+        await waitFor(() =>
+          expect(result.current).toStrictEqual({offsetMs: 5 * 60 * 1000})
+        );
       }
     );
 
     it('should return 0 offset if there is no replayStartTimetsamp, then recalculate when the startTimestamp appears', async () => {
       mockQuery({event_t: FIVE_PAST_FORMATTED});
 
-      const {result, rerender, waitForNextUpdate} = reactHooks.renderHook(
-        useInitialTimeOffsetMs,
-        {
-          initialProps: {
-            orgSlug: organization.slug,
-            projectSlug: project.slug,
-            replayId: replay.id,
-            replayStartTimestampMs: undefined as number | undefined,
-          },
-        }
-      );
+      const {result, rerender, waitFor} = reactHooks.renderHook(useInitialTimeOffsetMs, {
+        initialProps: {
+          orgSlug: organization.slug,
+          projectSlug: project.slug,
+          replayId: replay.id,
+          replayStartTimestampMs: undefined as number | undefined,
+        },
+      });
 
-      await waitForNextUpdate();
-      expect(result.current).toStrictEqual({offsetMs: 0});
+      await waitFor(() => expect(result.current).toStrictEqual({offsetMs: 0}));
 
       rerender({
         orgSlug: organization.slug,
@@ -131,10 +123,11 @@ describe('useInitialTimeOffsetMs', () => {
         replayId: replay.id,
         replayStartTimestampMs: new Date(NOON).getTime(),
       });
-      await waitForNextUpdate();
 
       // Expecting 5 minutes difference, in ms
-      expect(result.current).toStrictEqual({offsetMs: 5 * 60 * 1000});
+      await waitFor(() =>
+        expect(result.current).toStrictEqual({offsetMs: 5 * 60 * 1000})
+      );
     });
 
     it('should prefer reading `event_t` over the other search query params', async () => {
@@ -148,7 +141,7 @@ describe('useInitialTimeOffsetMs', () => {
         clicks: [],
       });
 
-      const {result, waitForNextUpdate} = reactHooks.renderHook(useInitialTimeOffsetMs, {
+      const {result, waitFor} = reactHooks.renderHook(useInitialTimeOffsetMs, {
         initialProps: {
           orgSlug: organization.slug,
           projectSlug: project.slug,
@@ -156,9 +149,10 @@ describe('useInitialTimeOffsetMs', () => {
           replayStartTimestampMs: new Date(NOON).getTime(),
         },
       });
-      await waitForNextUpdate();
 
-      expect(result.current).toStrictEqual({offsetMs: 5 * 60 * 1000});
+      await waitFor(() =>
+        expect(result.current).toStrictEqual({offsetMs: 5 * 60 * 1000})
+      );
       expect(MockFetchReplayClicks).toHaveBeenCalledTimes(0);
     });
   });
@@ -167,7 +161,7 @@ describe('useInitialTimeOffsetMs', () => {
     it('should skip this strategy if there is no `click.*` term in the query', async () => {
       mockQuery({query: 'user.email:*@sentry.io'});
 
-      const {result, waitForNextUpdate} = reactHooks.renderHook(useInitialTimeOffsetMs, {
+      const {result, waitFor} = reactHooks.renderHook(useInitialTimeOffsetMs, {
         initialProps: {
           orgSlug: organization.slug,
           projectSlug: project.slug,
@@ -175,10 +169,9 @@ describe('useInitialTimeOffsetMs', () => {
           replayStartTimestampMs: new Date(NOON).getTime(),
         },
       });
-      await waitForNextUpdate();
 
+      await waitFor(() => expect(result.current).toStrictEqual({offsetMs: 0}));
       expect(MockFetchReplayClicks).toHaveBeenCalledTimes(0);
-      expect(result.current).toStrictEqual({offsetMs: 0});
     });
 
     it('should request a list of click results, and calculate the offset from the first result', async () => {
@@ -189,7 +182,7 @@ describe('useInitialTimeOffsetMs', () => {
         clicks: [{node_id: 7, timestamp: FIVE_PAST_FORMATTED}],
       });
 
-      const {result, waitForNextUpdate} = reactHooks.renderHook(useInitialTimeOffsetMs, {
+      const {result, waitFor} = reactHooks.renderHook(useInitialTimeOffsetMs, {
         initialProps: {
           orgSlug: organization.slug,
           projectSlug: project.slug,
@@ -197,18 +190,19 @@ describe('useInitialTimeOffsetMs', () => {
           replayStartTimestampMs: new Date(NOON).getTime(),
         },
       });
-      await waitForNextUpdate();
 
-      expect(MockFetchReplayClicks).toHaveBeenCalledTimes(1);
       // Expecting 5 minutes difference, in ms
-      expect(result.current).toStrictEqual({
-        highlight: {
-          annotation: undefined,
-          nodeId: 7,
-          spotlight: true,
-        },
-        offsetMs: 5 * 60 * 1000,
-      });
+      await waitFor(() =>
+        expect(result.current).toStrictEqual({
+          highlight: {
+            annotation: undefined,
+            nodeId: 7,
+            spotlight: true,
+          },
+          offsetMs: 5 * 60 * 1000,
+        })
+      );
+      expect(MockFetchReplayClicks).toHaveBeenCalledTimes(1);
     });
 
     it('should not call call fetch twice when props change', async () => {
@@ -219,41 +213,40 @@ describe('useInitialTimeOffsetMs', () => {
         clicks: [{node_id: 7, timestamp: FIVE_PAST_FORMATTED}],
       });
 
-      const {result, rerender, waitForNextUpdate} = reactHooks.renderHook(
-        useInitialTimeOffsetMs,
-        {
-          initialProps: {
-            orgSlug: organization.slug,
-            projectSlug: project.slug,
-            replayId: replay.id,
-            replayStartTimestampMs: undefined as number | undefined,
-          },
-        }
-      );
-      await waitForNextUpdate();
-
-      expect(MockFetchReplayClicks).toHaveBeenCalledTimes(0);
-      expect(result.current).toStrictEqual({
-        offsetMs: 0,
+      const {result, rerender, waitFor} = reactHooks.renderHook(useInitialTimeOffsetMs, {
+        initialProps: {
+          orgSlug: organization.slug,
+          projectSlug: project.slug,
+          replayId: replay.id,
+          replayStartTimestampMs: undefined as number | undefined,
+        },
       });
 
+      await waitFor(() => expect(MockFetchReplayClicks).toHaveBeenCalledTimes(0));
+      await waitFor(() =>
+        expect(result.current).toStrictEqual({
+          offsetMs: 0,
+        })
+      );
+
       rerender({
         orgSlug: organization.slug,
         projectSlug: project.slug,
         replayId: replay.id,
         replayStartTimestampMs: new Date(NOON).getTime(),
       });
-      await waitForNextUpdate();
 
+      await waitFor(() =>
+        expect(result.current).toStrictEqual({
+          highlight: {
+            annotation: undefined,
+            nodeId: 7,
+            spotlight: true,
+          },
+          offsetMs: 5 * 60 * 1000,
+        })
+      );
       expect(MockFetchReplayClicks).toHaveBeenCalledTimes(1);
-      expect(result.current).toStrictEqual({
-        highlight: {
-          annotation: undefined,
-          nodeId: 7,
-          spotlight: true,
-        },
-        offsetMs: 5 * 60 * 1000,
-      });
     });
   });
 });

static/app/utils/replays/hooks/useReplayData.spec.tsx

@@ -88,7 +88,7 @@ describe('useReplayData', () => {
       body: {data: mockReplayResponse},
     });
 
-    const {result, waitForNextUpdate} = reactHooks.renderHook(useReplayData, {
+    const {result, waitFor} = reactHooks.renderHook(useReplayData, {
       wrapper,
       initialProps: {
         replayId: mockReplayResponse.id,
@@ -96,17 +96,17 @@ describe('useReplayData', () => {
       },
     });
 
-    await waitForNextUpdate();
-
-    expect(result.current).toEqual({
-      attachments: expect.any(Array),
-      errors: expect.any(Array),
-      fetchError: undefined,
-      fetching: false,
-      onRetry: expect.any(Function),
-      projectSlug: project.slug,
-      replayRecord: expectedReplay,
-    });
+    await waitFor(() =>
+      expect(result.current).toEqual({
+        attachments: expect.any(Array),
+        errors: expect.any(Array),
+        fetchError: undefined,
+        fetching: false,
+        onRetry: expect.any(Function),
+        projectSlug: project.slug,
+        replayRecord: expectedReplay,
+      })
+    );
   });
 
   it('should concat N segment responses and pass them into ReplayReader', async () => {
@@ -161,7 +161,7 @@ describe('useReplayData', () => {
       match: [(_url, options) => options.query?.cursor === '0:1:0'],
     });
 
-    const {result, waitForNextUpdate} = reactHooks.renderHook(useReplayData, {
+    const {result, waitFor} = reactHooks.renderHook(useReplayData, {
       wrapper,
       initialProps: {
         replayId: mockReplayResponse.id,
@@ -170,9 +170,7 @@ describe('useReplayData', () => {
       },
     });
 
-    await waitForNextUpdate();
-
-    expect(mockedSegmentsCall1).toHaveBeenCalledTimes(1);
+    await waitFor(() => expect(mockedSegmentsCall1).toHaveBeenCalledTimes(1));
     expect(mockedSegmentsCall2).toHaveBeenCalledTimes(1);
 
     expect(result.current).toStrictEqual(
@@ -249,7 +247,7 @@ describe('useReplayData', () => {
       ],
     });
 
-    const {result, waitForNextUpdate} = reactHooks.renderHook(useReplayData, {
+    const {result, waitFor} = reactHooks.renderHook(useReplayData, {
       wrapper,
       initialProps: {
         replayId: mockReplayResponse.id,
@@ -258,9 +256,7 @@ describe('useReplayData', () => {
       },
     });
 
-    await waitForNextUpdate();
-
-    expect(mockedErrorsCall1).toHaveBeenCalledTimes(1);
+    await waitFor(() => expect(mockedErrorsCall1).toHaveBeenCalledTimes(1));
     expect(mockedErrorsCall2).toHaveBeenCalledTimes(1);
 
     expect(result.current).toStrictEqual(
@@ -314,7 +310,7 @@ describe('useReplayData', () => {
       body: {data: mockErrorResponse},
     });
 
-    const {result, waitForNextUpdate} = reactHooks.renderHook(useReplayData, {
+    const {result, waitFor} = reactHooks.renderHook(useReplayData, {
       wrapper,
       initialProps: {
         replayId: mockReplayResponse.id,
@@ -338,11 +334,9 @@ describe('useReplayData', () => {
     expect(mockedSegmentsCall).not.toHaveBeenCalledTimes(1);
     expect(result.current).toEqual(expectedReplayData);
 
-    await waitForNextUpdate();
-
     // Afterwards we see the attachments & errors requests are made
-    expect(mockedReplayCall).toHaveBeenCalledTimes(1);
-    expect(mockedEventsMetaCall).toHaveBeenCalledTimes(1);
+    await waitFor(() => expect(mockedReplayCall).toHaveBeenCalledTimes(1));
+    await waitFor(() => expect(mockedEventsMetaCall).toHaveBeenCalledTimes(1));
     expect(mockedSegmentsCall).toHaveBeenCalledTimes(1);
     expect(result.current).toStrictEqual(
       expect.objectContaining({
@@ -353,26 +347,26 @@ describe('useReplayData', () => {
       })
     );
 
-    await waitForNextUpdate();
-
     // Next we see that some rrweb data has arrived
-    expect(result.current).toStrictEqual(
-      expect.objectContaining({
-        attachments: mockSegmentResponse,
-        errors: [],
-        replayRecord: expectedReplay,
-      })
+    await waitFor(() =>
+      expect(result.current).toStrictEqual(
+        expect.objectContaining({
+          attachments: mockSegmentResponse,
+          errors: [],
+          replayRecord: expectedReplay,
+        })
+      )
     );
 
-    await waitForNextUpdate();
-
     // Finally we see fetching is complete, errors are here too
-    expect(result.current).toStrictEqual(
-      expect.objectContaining({
-        attachments: mockSegmentResponse,
-        errors: mockErrorResponse,
-        replayRecord: expectedReplay,
-      })
+    await waitFor(() =>
+      expect(result.current).toStrictEqual(
+        expect.objectContaining({
+          attachments: mockSegmentResponse,
+          errors: mockErrorResponse,
+          replayRecord: expectedReplay,
+        })
+      )
     );
   });
 });

static/app/views/issueDetails/groupReplays/useReplaysForRegressionIssue.spec.tsx

@@ -1,3 +1,4 @@
+import {act} from 'react-test-renderer';
 import type {Location} from 'history';
 import {EventFixture} from 'sentry-fixture/event';
 import {GroupFixture} from 'sentry-fixture/group';
@@ -59,17 +60,14 @@ describe('useReplaysForRegressionIssue', () => {
       },
     });
 
-    const {result, waitForNextUpdate} = reactHooks.renderHook(
-      useReplaysForRegressionIssue,
-      {
-        initialProps: {
-          group: MOCK_GROUP,
-          location,
-          organization,
-          event: mockEvent,
-        },
-      }
-    );
+    const {result, waitFor} = reactHooks.renderHook(useReplaysForRegressionIssue, {
+      initialProps: {
+        group: MOCK_GROUP,
+        location,
+        organization,
+        event: mockEvent,
+      },
+    });
 
     expect(result.current).toEqual({
       eventView: null,
@@ -77,15 +75,15 @@ describe('useReplaysForRegressionIssue', () => {
       pageLinks: null,
     });
 
-    await waitForNextUpdate();
-
-    expect(result.current).toEqual({
-      eventView: expect.objectContaining({
-        query: 'id:[replay42,replay256]',
-      }),
-      fetchError: undefined,
-      pageLinks: null,
-    });
+    await waitFor(() =>
+      expect(result.current).toEqual({
+        eventView: expect.objectContaining({
+          query: 'id:[replay42,replay256]',
+        }),
+        fetchError: undefined,
+        pageLinks: null,
+      })
+    );
   });
 
   it('should return an empty EventView when there are no replay_ids returned from the count endpoint', async () => {
@@ -97,17 +95,14 @@ describe('useReplaysForRegressionIssue', () => {
       body: {},
     });
 
-    const {result, waitForNextUpdate} = reactHooks.renderHook(
-      useReplaysForRegressionIssue,
-      {
-        initialProps: {
-          group: MOCK_GROUP,
-          location,
-          organization,
-          event: mockEvent,
-        },
-      }
-    );
+    const {result, waitFor} = reactHooks.renderHook(useReplaysForRegressionIssue, {
+      initialProps: {
+        group: MOCK_GROUP,
+        location,
+        organization,
+        event: mockEvent,
+      },
+    });
 
     expect(result.current).toEqual({
       eventView: null,
@@ -115,15 +110,15 @@ describe('useReplaysForRegressionIssue', () => {
       pageLinks: null,
     });
 
-    await waitForNextUpdate();
-
-    expect(result.current).toEqual({
-      eventView: expect.objectContaining({
-        query: 'id:[]',
-      }),
-      fetchError: undefined,
-      pageLinks: null,
-    });
+    await waitFor(() =>
+      expect(result.current).toEqual({
+        eventView: expect.objectContaining({
+          query: 'id:[]',
+        }),
+        fetchError: undefined,
+        pageLinks: null,
+      })
+    );
   });
 
   it('queries using start and end date strings if passed in', async () => {
@@ -136,7 +131,7 @@ describe('useReplaysForRegressionIssue', () => {
       },
     });
 
-    const {waitForNextUpdate} = reactHooks.renderHook(useReplaysForRegressionIssue, {
+    reactHooks.renderHook(useReplaysForRegressionIssue, {
       initialProps: {
         group: MOCK_GROUP,
         location,
@@ -157,7 +152,7 @@ describe('useReplaysForRegressionIssue', () => {
       })
     );
 
-    await waitForNextUpdate();
+    await act(tick);
   });
 
   it('queries the transaction name with event type and duration filters', async () => {
@@ -170,7 +165,7 @@ describe('useReplaysForRegressionIssue', () => {
       },
     });
 
-    const {waitForNextUpdate} = reactHooks.renderHook(useReplaysForRegressionIssue, {
+    reactHooks.renderHook(useReplaysForRegressionIssue, {
       initialProps: {
         group: MOCK_GROUP,
         location,
@@ -189,6 +184,6 @@ describe('useReplaysForRegressionIssue', () => {
       })
     );
 
-    await waitForNextUpdate();
+    await act(tick);
   });
 });

static/app/views/issueDetails/groupReplays/useReplaysFromIssue.spec.tsx

@@ -37,7 +37,7 @@ describe('useReplaysFromIssue', () => {
       },
     });
 
-    const {result, waitForNextUpdate} = reactHooks.renderHook(useReplaysFromIssue, {
+    const {result, waitFor} = reactHooks.renderHook(useReplaysFromIssue, {
       initialProps: {
         group: MOCK_GROUP,
         location,
@@ -52,16 +52,16 @@ describe('useReplaysFromIssue', () => {
       pageLinks: null,
     });
 
-    await waitForNextUpdate();
-
-    expect(result.current).toEqual({
-      eventView: expect.objectContaining({
-        query: 'id:[replay42,replay256]',
-      }),
-      fetchError: undefined,
-      isFetching: false,
-      pageLinks: null,
-    });
+    await waitFor(() =>
+      expect(result.current).toEqual({
+        eventView: expect.objectContaining({
+          query: 'id:[replay42,replay256]',
+        }),
+        fetchError: undefined,
+        isFetching: false,
+        pageLinks: null,
+      })
+    );
   });
 
   it('should fetch a list of replay ids for a performance issue', async () => {
@@ -75,7 +75,7 @@ describe('useReplaysFromIssue', () => {
       },
     });
 
-    const {result, waitForNextUpdate} = reactHooks.renderHook(useReplaysFromIssue, {
+    const {result, waitFor} = reactHooks.renderHook(useReplaysFromIssue, {
       initialProps: {
         group: MOCK_GROUP,
         location,
@@ -90,16 +90,16 @@ describe('useReplaysFromIssue', () => {
       pageLinks: null,
     });
 
-    await waitForNextUpdate();
-
-    expect(result.current).toEqual({
-      eventView: expect.objectContaining({
-        query: 'id:[replay42,replay256]',
-      }),
-      fetchError: undefined,
-      isFetching: false,
-      pageLinks: null,
-    });
+    await waitFor(() =>
+      expect(result.current).toEqual({
+        eventView: expect.objectContaining({
+          query: 'id:[replay42,replay256]',
+        }),
+        fetchError: undefined,
+        isFetching: false,
+        pageLinks: null,
+      })
+    );
   });
 
   it('should return an empty EventView when there are no replay_ids returned from the count endpoint', async () => {
@@ -111,7 +111,7 @@ describe('useReplaysFromIssue', () => {
       body: {},
     });
 
-    const {result, waitForNextUpdate} = reactHooks.renderHook(useReplaysFromIssue, {
+    const {result, waitFor} = reactHooks.renderHook(useReplaysFromIssue, {
       initialProps: {
         group: MOCK_GROUP,
         location,
@@ -126,13 +126,13 @@ describe('useReplaysFromIssue', () => {
       pageLinks: null,
     });
 
-    await waitForNextUpdate();
-
-    expect(result.current).toEqual({
-      eventView: null,
-      fetchError: undefined,
-      isFetching: false,
-      pageLinks: null,
-    });
+    await waitFor(() =>
+      expect(result.current).toEqual({
+        eventView: null,
+        fetchError: undefined,
+        isFetching: false,
+        pageLinks: null,
+      })
+    );
   });
 });

static/app/views/starfish/queries/useSpanMetrics.spec.tsx

@@ -65,7 +65,7 @@ describe('useSpanMetrics', () => {
       },
     });
 
-    const {result, waitForNextUpdate} = reactHooks.renderHook(
+    const {result, waitFor} = reactHooks.renderHook(
       ({filters, fields, sorts, limit, cursor, referrer}) =>
         useSpanMetrics({filters, fields, sorts, limit, cursor, referrer}),
       {
@@ -105,9 +105,7 @@ describe('useSpanMetrics', () => {
       })
     );
 
-    await waitForNextUpdate();
-
-    expect(result.current.isLoading).toEqual(false);
+    await waitFor(() => expect(result.current.isLoading).toEqual(false));
     expect(result.current.data).toEqual([
       {
         'span.op': 'db',

static/app/views/starfish/queries/useSpanMetricsSeries.spec.tsx

@@ -67,7 +67,7 @@ describe('useSpanMetricsSeries', () => {
       },
     });
 
-    const {result, waitForNextUpdate} = reactHooks.renderHook(
+    const {result, waitFor} = reactHooks.renderHook(
       ({filters, yAxis}) => useSpanMetricsSeries({filters, yAxis}),
       {
         wrapper: Wrapper,
@@ -100,9 +100,7 @@ describe('useSpanMetricsSeries', () => {
       })
     );
 
-    await waitForNextUpdate();
-
-    expect(result.current.isLoading).toEqual(false);
+    await waitFor(() => expect(result.current.isLoading).toEqual(false));
     expect(result.current.data).toEqual({
       'spm()': {
         data: [
@@ -121,7 +119,7 @@ describe('useSpanMetricsSeries', () => {
       body: {},
     });
 
-    const {rerender, waitForNextUpdate} = reactHooks.renderHook(
+    const {rerender, waitFor} = reactHooks.renderHook(
       ({yAxis}) => useSpanMetricsSeries({yAxis}),
       {
         wrapper: Wrapper,
@@ -146,17 +144,17 @@ describe('useSpanMetricsSeries', () => {
       yAxis: ['p95(span.self_time)', 'spm()'] as MetricsProperty[],
     });
 
-    expect(eventsRequest).toHaveBeenLastCalledWith(
-      '/organizations/org-slug/events-stats/',
-      expect.objectContaining({
-        method: 'GET',
-        query: expect.objectContaining({
-          interval: '1h',
-          yAxis: ['p95(span.self_time)', 'spm()'] as MetricsProperty[],
-        }),
-      })
+    await waitFor(() =>
+      expect(eventsRequest).toHaveBeenLastCalledWith(
+        '/organizations/org-slug/events-stats/',
+        expect.objectContaining({
+          method: 'GET',
+          query: expect.objectContaining({
+            interval: '1h',
+            yAxis: ['p95(span.self_time)', 'spm()'] as MetricsProperty[],
+          }),
+        })
+      )
     );
-
-    await waitForNextUpdate();
   });
 });