test(ui): Fix a chunk of act warnings (#66526)

static/app/components/deprecatedAsyncComponent.spec.tsx

@@ -1,4 +1,4 @@
-import {render, screen} from 'sentry-test/reactTestingLibrary';
+import {act, render, screen} from 'sentry-test/reactTestingLibrary';
 
 import DeprecatedAsyncComponent from 'sentry/components/deprecatedAsyncComponent';
 
@@ -125,14 +125,14 @@ describe('DeprecatedAsyncComponent', function () {
 
       expect(screen.getByTestId('remaining-requests')).toHaveTextContent('2');
 
-      jest.advanceTimersByTime(40);
+      act(() => jest.advanceTimersByTime(40));
       expect(screen.getByTestId('remaining-requests')).toHaveTextContent('2');
 
-      jest.advanceTimersByTime(40);
+      act(() => jest.advanceTimersByTime(40));
       expect(screen.getByTestId('remaining-requests')).toHaveTextContent('1');
       expect(mockOnAllEndpointsSuccess).not.toHaveBeenCalled();
 
-      jest.advanceTimersByTime(40);
+      act(() => jest.advanceTimersByTime(40));
       expect(screen.queryByTestId('remaining-requests')).not.toBeInTheDocument();
       expect(mockOnAllEndpointsSuccess).toHaveBeenCalled();
 

static/app/components/hook.spec.tsx

@@ -1,6 +1,6 @@
 import {OrganizationFixture} from 'sentry-fixture/organization';
 
-import {render, screen} from 'sentry-test/reactTestingLibrary';
+import {act, render, screen} from 'sentry-test/reactTestingLibrary';
 
 import Hook from 'sentry/components/hook';
 import HookStore from 'sentry/stores/hookStore';
@@ -50,11 +50,13 @@ describe('Hook', function () {
 
     expect(screen.getByTestId('hook-wrapper')).toBeInTheDocument();
 
-    HookStore.add('sidebar:help-menu', () => (
-      <HookWrapper key="new" organization={null}>
-        New Hook
-      </HookWrapper>
-    ));
+    act(() =>
+      HookStore.add('sidebar:help-menu', () => (
+        <HookWrapper key="new" organization={null}>
+          New Hook
+        </HookWrapper>
+      ))
+    );
 
     rerender(<Hook name="sidebar:help-menu" organization={OrganizationFixture()} />);
 
@@ -77,17 +79,21 @@ describe('Hook', function () {
       </Hook>
     );
 
-    HookStore.add('sidebar:help-menu', () => (
-      <HookWrapper key="new" organization={null}>
-        First Hook
-      </HookWrapper>
-    ));
+    act(() =>
+      HookStore.add('sidebar:help-menu', () => (
+        <HookWrapper key="new" organization={null}>
+          First Hook
+        </HookWrapper>
+      ))
+    );
 
-    HookStore.add('sidebar:help-menu', () => (
-      <HookWrapper key="new" organization={null}>
-        Second Hook
-      </HookWrapper>
-    ));
+    act(() =>
+      HookStore.add('sidebar:help-menu', () => (
+        <HookWrapper key="new" organization={null}>
+          Second Hook
+        </HookWrapper>
+      ))
+    );
 
     for (let i = 0; i < idx; i++) {
       expect(screen.getByText(`hook: ${idx}`)).toBeInTheDocument();

static/app/components/issueDiff/index.spec.tsx

@@ -50,7 +50,7 @@ describe('IssueDiff', function () {
     MockApiClient.clearMockResponses();
   });
 
-  it('is loading when initially rendering', function () {
+  it('is loading when initially rendering', async function () {
     render(
       <IssueDiff
         api={api}
@@ -61,6 +61,7 @@ describe('IssueDiff', function () {
       />
     );
     expect(screen.queryByTestId('split-diff')).not.toBeInTheDocument();
+    expect(await screen.findByTestId('split-diff')).toBeInTheDocument();
   });
 
   it('can dynamically import SplitDiff', async function () {

static/app/components/modals/redirectToProject.spec.tsx

@@ -31,10 +31,10 @@ describe('RedirectToProjectModal', function () {
       ))
     );
 
-    jest.advanceTimersByTime(4900);
+    act(() => jest.advanceTimersByTime(4900));
     expect(window.location.assign).not.toHaveBeenCalled();
 
-    jest.advanceTimersByTime(200);
+    act(() => jest.advanceTimersByTime(200));
     expect(window.location.assign).toHaveBeenCalledTimes(1);
     expect(window.location.assign).toHaveBeenCalledWith('/org-slug/new-slug/');
   });

static/app/components/replays/playerDOMAlert.spec.tsx

@@ -1,4 +1,4 @@
-import {render, screen, waitFor} from 'sentry-test/reactTestingLibrary';
+import {render, screen, userEvent, waitFor} from 'sentry-test/reactTestingLibrary';
 import {resetMockDate, setMockDate} from 'sentry-test/utils';
 
 import localStorage from 'sentry/utils/localStorage';
@@ -38,7 +38,7 @@ describe('PlayerDOMAlert', () => {
 
     expect(screen.getByTestId('player-dom-alert')).toBeVisible();
 
-    screen.getByLabelText('Close Alert').click();
+    await userEvent.click(screen.getByLabelText('Close Alert'));
 
     expect(screen.queryByTestId('player-dom-alert')).not.toBeInTheDocument();
     await waitFor(() =>

static/app/components/search/sources/apiSource.spec.tsx

@@ -95,7 +95,7 @@ describe('ApiSource', function () {
     ConfigStore.loadInitialData(configState);
   });
 
-  it('queries all API endpoints', function () {
+  it('queries all API endpoints', async function () {
     const mock = jest.fn().mockReturnValue(null);
     render(
       <ApiSource {...defaultProps} query="foo">
@@ -103,7 +103,7 @@ describe('ApiSource', function () {
       </ApiSource>
     );
 
-    expect(orgsMock).toHaveBeenCalled();
+    await waitFor(() => expect(orgsMock).toHaveBeenCalled());
     expect(projectsMock).toHaveBeenCalled();
     expect(teamsMock).toHaveBeenCalled();
     expect(membersMock).toHaveBeenCalled();
@@ -111,7 +111,7 @@ describe('ApiSource', function () {
     expect(eventIdMock).not.toHaveBeenCalled();
   });
 
-  it('queries multiple regions for organization lists', function () {
+  it('queries multiple regions for organization lists', async function () {
     const mock = jest.fn().mockReturnValue(null);
     ConfigStore.loadInitialData({
       ...configState,
@@ -127,7 +127,7 @@ describe('ApiSource', function () {
       </ApiSource>
     );
 
-    expect(orgsMock).toHaveBeenCalledTimes(2);
+    await waitFor(() => expect(orgsMock).toHaveBeenCalledTimes(2));
     expect(orgsMock).toHaveBeenCalledWith(
       '/organizations/',
       expect.objectContaining({host: 'https://us.sentry.io'})
@@ -211,26 +211,28 @@ describe('ApiSource', function () {
     expect(teamsMock).toHaveBeenCalled();
     expect(membersMock).toHaveBeenCalled();
     expect(shortIdMock).not.toHaveBeenCalled();
-    expect(mock).toHaveBeenLastCalledWith(
-      expect.objectContaining({
-        results: [
-          {
-            item: expect.objectContaining({
-              title: 'event type',
-              description: 'event description',
-              sourceType: 'event',
-              resultType: 'event',
-              to: '/org-slug/project-slug/issues/1/events/12345678901234567890123456789012/',
-            }),
-            score: 1,
-            refIndex: 0,
-          },
-        ],
-      })
+    await waitFor(() =>
+      expect(mock).toHaveBeenLastCalledWith(
+        expect.objectContaining({
+          results: [
+            {
+              item: expect.objectContaining({
+                title: 'event type',
+                description: 'event description',
+                sourceType: 'event',
+                resultType: 'event',
+                to: '/org-slug/project-slug/issues/1/events/12345678901234567890123456789012/',
+              }),
+              score: 1,
+              refIndex: 0,
+            },
+          ],
+        })
+      )
     );
   });
 
-  it('only queries org endpoint if there is no org in context', function () {
+  it('only queries org endpoint if there is no org in context', async function () {
     const mock = jest.fn().mockReturnValue(null);
     render(
       <ApiSource {...omit(defaultProps, 'organization')} params={{orgId: ''}} query="foo">
@@ -238,7 +240,7 @@ describe('ApiSource', function () {
       </ApiSource>
     );
 
-    expect(orgsMock).toHaveBeenCalled();
+    await waitFor(() => expect(orgsMock).toHaveBeenCalled());
     expect(projectsMock).not.toHaveBeenCalled();
     expect(teamsMock).not.toHaveBeenCalled();
     expect(membersMock).not.toHaveBeenCalled();
@@ -415,40 +417,54 @@ describe('ApiSource', function () {
   });
 
   describe('API queries', function () {
-    it('calls API based on query string', function () {
+    it('calls API based on query string', async function () {
       const {rerender} = render(<ApiSource {...defaultProps} query="" />);
 
-      expect(projectsMock).toHaveBeenCalledTimes(1);
+      await waitFor(() => {
+        expect(projectsMock).toHaveBeenCalledTimes(1);
+      });
 
       rerender(<ApiSource {...defaultProps} query="f" />);
 
       // calls API when query string length is 1 char
-      expect(projectsMock).toHaveBeenCalledTimes(2);
+      await waitFor(() => {
+        expect(projectsMock).toHaveBeenCalledTimes(2);
+      });
 
       rerender(<ApiSource {...defaultProps} query="fo" />);
 
       // calls API when query string length increases from 1 -> 2
-      expect(projectsMock).toHaveBeenCalledTimes(3);
+      await waitFor(() => {
+        expect(projectsMock).toHaveBeenCalledTimes(3);
+      });
 
       rerender(<ApiSource {...defaultProps} query="foo" />);
 
       // Should not query API when query is > 2 chars
-      expect(projectsMock).toHaveBeenCalledTimes(3);
+      await waitFor(() => {
+        expect(projectsMock).toHaveBeenCalledTimes(3);
+      });
 
       // re-queries API if first 2 characters are different
       rerender(<ApiSource {...defaultProps} query="ba" />);
 
-      expect(projectsMock).toHaveBeenCalledTimes(4);
+      await waitFor(() => {
+        expect(projectsMock).toHaveBeenCalledTimes(4);
+      });
 
       // Does not requery when query stays the same
       rerender(<ApiSource {...defaultProps} query="ba" />);
 
-      expect(projectsMock).toHaveBeenCalledTimes(4);
+      await waitFor(() => {
+        expect(projectsMock).toHaveBeenCalledTimes(4);
+      });
 
       // queries if we go from 2 chars -> 1 char
       rerender(<ApiSource {...defaultProps} query="b" />);
 
-      expect(projectsMock).toHaveBeenCalledTimes(5);
+      await waitFor(() => {
+        expect(projectsMock).toHaveBeenCalledTimes(5);
+      });
     });
   });
 });

static/app/components/search/sources/routeSource.spec.tsx

@@ -61,7 +61,7 @@ describe('RouteSource', function () {
     });
   });
 
-  it('does not find any form field', function () {
+  it('does not find any form field', async function () {
     const mock = jest.fn().mockReturnValue(null);
     const {organization, project, routerProps} = initializeOrg();
     render(
@@ -70,6 +70,8 @@ describe('RouteSource', function () {
       </RouteSource>
     );
 
-    expect(mock).toHaveBeenCalledWith(expect.objectContaining({results: []}));
+    await waitFor(() =>
+      expect(mock).toHaveBeenCalledWith(expect.objectContaining({results: []}))
+    );
   });
 });

static/app/components/slider/index.spec.tsx

@@ -1,4 +1,4 @@
-import {render, screen, userEvent} from 'sentry-test/reactTestingLibrary';
+import {act, render, screen, userEvent} from 'sentry-test/reactTestingLibrary';
 
 import {Slider} from 'sentry/components/slider';
 
@@ -38,7 +38,9 @@ describe('Slider', function () {
     // To focus on the slider, we should call the focus() method. The slider input element
     // is visually hidden and only rendered for screen-reader & keyboard accessibility —
     // users can't actually click on it.
-    screen.getByRole('slider', {name: 'Test'}).focus();
+    act(() => {
+      screen.getByRole('slider', {name: 'Test'}).focus();
+    });
 
     await userEvent.keyboard('{ArrowRight}');
     expect(onChangeMock).toHaveBeenCalledWith(6);
@@ -63,7 +65,9 @@ describe('Slider', function () {
     // To focus on the slider, we should call the focus() method. The slider input element
     // is visually hidden and only rendered for screen-reader & keyboard accessibility —
     // users can't actually click on it.
-    screen.getByRole('slider', {name: 'Test'}).focus();
+    act(() => {
+      screen.getByRole('slider', {name: 'Test'}).focus();
+    });
 
     await userEvent.keyboard('{ArrowRight}');
     expect(onChangeEndMock).toHaveBeenCalledWith(10);
@@ -84,7 +88,9 @@ describe('Slider', function () {
     // To focus on the slider, we should call the focus() method. The slider input element
     // is visually hidden and only rendered for screen-reader & keyboard accessibility —
     // users can't actually click on it.
-    screen.getByRole('slider', {name: 'Test'}).focus();
+    act(() => {
+      screen.getByRole('slider', {name: 'Test'}).focus();
+    });
 
     // Pressing Arrow Right/Left increases/decreases value by 1
     await userEvent.keyboard('{ArrowRight}');

static/app/components/smartSearchBar/index.spec.tsx

@@ -287,7 +287,7 @@ describe('SmartSearchBar', function () {
   });
 
   describe('pasting', function () {
-    it('trims pasted content', function () {
+    it('trims pasted content', async function () {
       const mockOnChange = jest.fn();
       render(<SmartSearchBar {...defaultProps} onChange={mockOnChange} />);
 
@@ -296,7 +296,9 @@ describe('SmartSearchBar', function () {
       fireEvent.paste(textbox, {clipboardData: {getData: () => ' something'}});
 
       expect(textbox).toHaveValue('something');
-      expect(mockOnChange).toHaveBeenCalledWith('something', expect.anything());
+      await waitFor(() =>
+        expect(mockOnChange).toHaveBeenCalledWith('something', expect.anything())
+      );
     });
   });
 

static/app/components/version.spec.tsx

@@ -46,6 +46,6 @@ describe('Version', () => {
     await userEvent.hover(screen.getByText('1.0.0 (20200101)'), {delay: null});
     act(() => jest.advanceTimersByTime(50));
 
-    expect(screen.getByText(VERSION)).toBeInTheDocument();
+    expect(await screen.findByText(VERSION)).toBeInTheDocument();
   });
 });