test(ui): Silence act warnings in utils tests (#66122)

static/app/utils/discover/discoverQuery.spec.tsx

@@ -1,4 +1,4 @@
-import {render, screen} from 'sentry-test/reactTestingLibrary';
+import {render, screen, waitFor} from 'sentry-test/reactTestingLibrary';
 
 import DiscoverQuery from 'sentry/utils/discover/discoverQuery';
 import EventView from 'sentry/utils/discover/eventView';
@@ -38,10 +38,9 @@ describe('DiscoverQuery', function () {
         }}
       </DiscoverQuery>
     );
-    await tick();
 
     // Children should be rendered, and API should be called.
-    expect(getMock).toHaveBeenCalledTimes(1);
+    await waitFor(() => expect(getMock).toHaveBeenCalledTimes(1));
     expect(await screen.findByText('/health')).toBeInTheDocument();
   });
 
@@ -69,9 +68,8 @@ describe('DiscoverQuery', function () {
         }}
       </DiscoverQuery>
     );
-    await tick();
 
-    expect(getMock).toHaveBeenCalledTimes(1);
+    await waitFor(() => expect(getMock).toHaveBeenCalledTimes(1));
     expect(getMock).toHaveBeenCalledWith(
       '/organizations/test-org/events/',
       expect.objectContaining({
@@ -109,9 +107,8 @@ describe('DiscoverQuery', function () {
         }}
       </DiscoverQuery>
     );
-    await tick();
 
-    expect(errorValue.message).toEqual('Error Message');
+    await waitFor(() => expect(errorValue.message).toBe('Error Message'));
   });
 
   it('parses object errors correctly', async function () {
@@ -143,8 +140,7 @@ describe('DiscoverQuery', function () {
         }}
       </DiscoverQuery>
     );
-    await tick();
 
-    expect(errorValue.message).toEqual('Object Error');
+    await waitFor(() => expect(errorValue.message).toBe('Object Error'));
   });
 });

static/app/utils/discover/fieldRenderers.spec.tsx

@@ -3,7 +3,7 @@ import {ProjectFixture} from 'sentry-fixture/project';
 import {UserFixture} from 'sentry-fixture/user';
 
 import {initializeOrg} from 'sentry-test/initializeOrg';
-import {act, render, screen} from 'sentry-test/reactTestingLibrary';
+import {act, render, screen, waitFor} from 'sentry-test/reactTestingLibrary';
 
 import ConfigStore from 'sentry/stores/configStore';
 import ProjectsStore from 'sentry/stores/projectsStore';
@@ -119,14 +119,16 @@ describe('getFieldRenderer', function () {
       );
     });
 
-    it('can render date fields', function () {
+    it('can render date fields', async function () {
       const renderer = getFieldRenderer('createdAt', {createdAt: 'date'});
       render(renderer(data, {location, organization}) as React.ReactElement<any, any>);
 
-      expect(screen.getByText('Oct 3, 2019 9:13:14 AM PDT')).toBeInTheDocument();
+      await waitFor(() =>
+        expect(screen.getByText('Oct 3, 2019 9:13:14 AM PDT')).toBeInTheDocument()
+      );
     });
 
-    it('can render date fields using utc when query string has utc set to true', function () {
+    it('can render date fields using utc when query string has utc set to true', async function () {
       const renderer = getFieldRenderer('createdAt', {createdAt: 'date'});
       render(
         renderer(data, {
@@ -135,7 +137,9 @@ describe('getFieldRenderer', function () {
         }) as React.ReactElement<any, any>
       );
 
-      expect(screen.getByText('Oct 3, 2019 4:13:14 PM UTC')).toBeInTheDocument();
+      await waitFor(() =>
+        expect(screen.getByText('Oct 3, 2019 4:13:14 PM UTC')).toBeInTheDocument()
+      );
     });
   });
 
@@ -278,7 +282,7 @@ describe('getFieldRenderer', function () {
     expect(screen.getByText(project.slug)).toBeInTheDocument();
   });
 
-  it('can render team key transaction as a star with the dropdown', function () {
+  it('can render team key transaction as a star with the dropdown', async function () {
     const renderer = getFieldRenderer('team_key_transaction', {
       team_key_transaction: 'boolean',
     });
@@ -291,7 +295,7 @@ describe('getFieldRenderer', function () {
 
     // Enabled, can't open the menu in the test without setting up the
     // TeamKeyTransactionManager
-    expect(star).toBeEnabled();
+    await waitFor(() => expect(star).toBeEnabled());
   });
 
   it('can render team key transaction as a star without the dropdown', function () {

static/app/utils/projects.spec.tsx

@@ -98,26 +98,28 @@ describe('utils.projects', function () {
         )
       );
 
-      expect(renderer).toHaveBeenCalledWith(
-        expect.objectContaining({
-          fetching: false,
-          isIncomplete: false,
-          hasMore: null,
-          projects: [
-            expect.objectContaining({
-              id: '100',
-              slug: 'a',
-            }),
-            expect.objectContaining({
-              id: '101',
-              slug: 'b',
-            }),
-            expect.objectContaining({
-              id: '1',
-              slug: 'foo',
-            }),
-          ],
-        })
+      await waitFor(() =>
+        expect(renderer).toHaveBeenCalledWith(
+          expect.objectContaining({
+            fetching: false,
+            isIncomplete: false,
+            hasMore: null,
+            projects: [
+              expect.objectContaining({
+                id: '100',
+                slug: 'a',
+              }),
+              expect.objectContaining({
+                id: '101',
+                slug: 'b',
+              }),
+              expect.objectContaining({
+                id: '1',
+                slug: 'foo',
+              }),
+            ],
+          })
+        )
       );
     });
 
@@ -163,25 +165,27 @@ describe('utils.projects', function () {
         )
       );
 
-      expect(renderer).toHaveBeenCalledWith(
-        expect.objectContaining({
-          fetching: false,
-          isIncomplete: true,
-          hasMore: null,
-          projects: [
-            expect.objectContaining({
-              id: '100',
-              slug: 'a',
-            }),
-            {
-              slug: 'b',
-            },
-            expect.objectContaining({
-              id: '1',
-              slug: 'foo',
-            }),
-          ],
-        })
+      await waitFor(() =>
+        expect(renderer).toHaveBeenCalledWith(
+          expect.objectContaining({
+            fetching: false,
+            isIncomplete: true,
+            hasMore: null,
+            projects: [
+              expect.objectContaining({
+                id: '100',
+                slug: 'a',
+              }),
+              {
+                slug: 'b',
+              },
+              expect.objectContaining({
+                id: '1',
+                slug: 'foo',
+              }),
+            ],
+          })
+        )
       );
     });
 
@@ -300,26 +304,28 @@ describe('utils.projects', function () {
         )
       );
 
-      expect(renderer).toHaveBeenCalledWith(
-        expect.objectContaining({
-          fetching: false,
-          isIncomplete: null,
-          hasMore: false,
-          projects: [
-            expect.objectContaining({
-              id: '1',
-              slug: 'foo',
-            }),
-            expect.objectContaining({
-              id: '100',
-              slug: 'a',
-            }),
-            expect.objectContaining({
-              id: '101',
-              slug: 'b',
-            }),
-          ],
-        })
+      await waitFor(() =>
+        expect(renderer).toHaveBeenCalledWith(
+          expect.objectContaining({
+            fetching: false,
+            isIncomplete: null,
+            hasMore: false,
+            projects: [
+              expect.objectContaining({
+                id: '1',
+                slug: 'foo',
+              }),
+              expect.objectContaining({
+                id: '100',
+                slug: 'a',
+              }),
+              expect.objectContaining({
+                id: '101',
+                slug: 'b',
+              }),
+            ],
+          })
+        )
       );
     });
   });
@@ -374,22 +380,24 @@ describe('utils.projects', function () {
         )
       );
 
-      expect(renderer).toHaveBeenCalledWith(
-        expect.objectContaining({
-          fetching: false,
-          isIncomplete: null,
-          hasMore: true,
-          projects: [
-            expect.objectContaining({
-              id: '100',
-              slug: 'a',
-            }),
-            expect.objectContaining({
-              id: '101',
-              slug: 'b',
-            }),
-          ],
-        })
+      await waitFor(() =>
+        expect(renderer).toHaveBeenCalledWith(
+          expect.objectContaining({
+            fetching: false,
+            isIncomplete: null,
+            hasMore: true,
+            projects: [
+              expect.objectContaining({
+                id: '100',
+                slug: 'a',
+              }),
+              expect.objectContaining({
+                id: '101',
+                slug: 'b',
+              }),
+            ],
+          })
+        )
       );
     });
 

static/app/utils/url/useLocationQuery.spec.tsx

@@ -123,19 +123,20 @@ describe('useLocationQuery', () => {
       },
     } as Location);
 
-    const {result, rerender} = reactHooks.renderHook(useLocationQuery, {
-      initialProps: {
-        fields: {
-          name: decodeScalar,
-          age: decodeInteger,
-          titles: decodeList,
-        },
+    const props = {
+      fields: {
+        name: decodeScalar,
+        age: decodeInteger,
+        titles: decodeList,
       },
+    };
+    const {result, rerender} = reactHooks.renderHook(useLocationQuery, {
+      initialProps: props,
     });
     const first = result.current;
-    rerender();
+    rerender(props);
     const second = result.current;
-    rerender();
+    rerender(props);
     const third = result.current;
 
     expect(first.name).toBe('Adam');

static/app/utils/useDismissAlert.spec.tsx

@@ -27,7 +27,7 @@ describe('useDismissAlert', () => {
 
     const initialRef = result.current.dismiss;
 
-    rerender();
+    rerender({key});
 
     expect(result.current.dismiss).toEqual(initialRef);
   });

static/app/utils/useTeams.spec.tsx

@@ -41,10 +41,7 @@ describe('useTeams', function () {
     const {onSearch} = result.current;
 
     // Works with append
-    const onSearchPromise = reactHooks.act(() => onSearch('test'));
-
-    expect(result.current.fetching).toBe(true);
-    await onSearchPromise;
+    await reactHooks.act(() => onSearch('test'));
     expect(result.current.fetching).toBe(false);
 
     // Wait for state to be reflected from the store

static/app/utils/useTimeout.spec.tsx

@@ -56,7 +56,7 @@ describe('useTimeout', () => {
 
     const firstRender = {...result.current};
 
-    rerender();
+    rerender({timeMs, onTimeout});
 
     expect(result.current.start).toBe(firstRender.start);
     expect(result.current.cancel).toBe(firstRender.cancel);

static/app/utils/useUndoableReducer.spec.tsx

@@ -89,7 +89,8 @@ describe('makeUndoableReducer', () => {
 
       reactHooks.act(() => result.current[1]('add'));
       expect(result.current[0]).toEqual(2);
-      expect(reducer).toHaveBeenNthCalledWith(2, 0, 'add');
+      // TODO(react18): switch back to .toHaveBeenNthCalledWith(2, 1, 'add');
+      expect(reducer).toHaveBeenLastCalledWith(1, 'add');
     });
 
     it('can undo state', () => {

static/app/utils/useUserTeams.spec.tsx

@@ -57,7 +57,7 @@ describe('useUserTeams', () => {
 
     await waitFor(() => result.current.teams.length === 1);
     expect(mockapi).toHaveBeenCalledTimes(1);
-    expect(result.current.teams).toEqual(userTeams);
+    await waitFor(() => expect(result.current.teams).toEqual(userTeams));
   });
 
   it('provides only the users teams', function () {

static/app/utils/withRelease.spec.tsx

@@ -63,7 +63,7 @@ describe('withRelease HoC', function () {
     );
   });
 
-  it('prevents repeated calls', function () {
+  it('prevents repeated calls', async function () {
     const Component = jest.fn(() => null);
     const Container = withRelease(Component);
 
@@ -100,7 +100,7 @@ describe('withRelease HoC', function () {
       />
     );
 
-    expect(api.requestPromise).toHaveBeenCalledTimes(2); // 1 for fetchRelease, 1 for fetchDeploys
+    await waitFor(() => expect(api.requestPromise).toHaveBeenCalledTimes(2)); // 1 for fetchRelease, 1 for fetchDeploys
     expect(Container.prototype.fetchRelease).toHaveBeenCalledTimes(3);
     expect(Container.prototype.fetchDeploys).toHaveBeenCalledTimes(3);
   });