test(ui): Fix various act warnings for react 18 (#66080)

static/app/components/assistant/guideAnchor.spec.tsx

@@ -1,7 +1,7 @@
 import {ConfigFixture} from 'sentry-fixture/config';
 import {UserFixture} from 'sentry-fixture/user';
 
-import {render, screen, userEvent} from 'sentry-test/reactTestingLibrary';
+import {act, render, screen, userEvent} from 'sentry-test/reactTestingLibrary';
 
 import GuideAnchor from 'sentry/components/assistant/guideAnchor';
 import ConfigStore from 'sentry/stores/configStore';
@@ -32,7 +32,7 @@ describe('GuideAnchor', function () {
       </div>
     );
 
-    GuideStore.fetchSucceeded(serverGuide);
+    act(() => GuideStore.fetchSucceeded(serverGuide));
     expect(await screen.findByText('Identify Your Issues')).toBeInTheDocument();
 
     // XXX(epurkhiser): Skip pointer event checks due to a bug with how Popper
@@ -75,7 +75,7 @@ describe('GuideAnchor', function () {
       </div>
     );
 
-    GuideStore.fetchSucceeded(serverGuide);
+    act(() => GuideStore.fetchSucceeded(serverGuide));
     expect(await screen.findByText('Identify Your Issues')).toBeInTheDocument();
 
     const dismissMock = MockApiClient.addMockResponse({
@@ -129,11 +129,11 @@ describe('GuideAnchor', function () {
       </div>
     );
 
-    GuideStore.fetchSucceeded(serverGuide);
+    act(() => GuideStore.fetchSucceeded(serverGuide));
     expect(await screen.findByText('Identify Your Issues')).toBeInTheDocument();
-    GuideStore.setForceHide(true);
+    act(() => GuideStore.setForceHide(true));
     expect(screen.queryByText('Identify Your Issues')).not.toBeInTheDocument();
-    GuideStore.setForceHide(false);
+    act(() => GuideStore.setForceHide(false));
     expect(await screen.findByText('Identify Your Issues')).toBeInTheDocument();
   });
 });

static/app/components/autoComplete.spec.tsx

@@ -1,6 +1,6 @@
 import {useEffect} from 'react';
 
-import {fireEvent, render, screen, waitFor} from 'sentry-test/reactTestingLibrary';
+import {act, fireEvent, render, screen, waitFor} from 'sentry-test/reactTestingLibrary';
 
 import type {AutoCompleteProps} from 'sentry/components/autoComplete';
 import AutoComplete from 'sentry/components/autoComplete';
@@ -134,7 +134,7 @@ describe('AutoComplete', function () {
       fireEvent.focus(input);
       fireEvent.blur(input);
       expect(screen.getByTestId('test-autocomplete')).toBeInTheDocument();
-      jest.runAllTimers();
+      act(() => jest.runAllTimers());
 
       expect(screen.queryByTestId('test-autocomplete')).not.toBeInTheDocument();
       expect(mocks.onClose).toHaveBeenCalledTimes(1);
@@ -152,11 +152,11 @@ describe('AutoComplete', function () {
     it('can open and close dropdown menu using injected actions', function () {
       createWrapper();
       const [injectedProps] = autoCompleteState;
-      injectedProps.actions.open();
+      act(() => injectedProps.actions.open());
       expect(screen.getByTestId('test-autocomplete')).toBeInTheDocument();
       expect(mocks.onOpen).toHaveBeenCalledTimes(1);
 
-      injectedProps.actions.close();
+      act(() => injectedProps.actions.close());
       expect(screen.queryByTestId('test-autocomplete')).not.toBeInTheDocument();
       expect(mocks.onClose).toHaveBeenCalledTimes(1);
     });
@@ -311,7 +311,7 @@ describe('AutoComplete', function () {
       expect(input).toHaveValue('a');
 
       fireEvent.blur(input);
-      jest.runAllTimers();
+      act(() => jest.runAllTimers());
       expect(screen.queryByTestId('test-autocomplete')).not.toBeInTheDocument();
       expect(input).toHaveValue('');
     });
@@ -352,7 +352,7 @@ describe('AutoComplete', function () {
       jest.useFakeTimers();
       fireEvent.focus(input);
       fireEvent.blur(input);
-      jest.runAllTimers();
+      act(() => jest.runAllTimers());
       expect(screen.getByTestId('test-autocomplete')).toBeInTheDocument();
 
       // This still gets called even though menu is open
@@ -372,12 +372,12 @@ describe('AutoComplete', function () {
     it('does not open and close dropdown menu using injected actions', function () {
       createWrapper({isOpen: true});
       const [injectedProps] = autoCompleteState;
-      injectedProps.actions.open();
+      act(() => injectedProps.actions.open());
       expect(screen.getByTestId('test-autocomplete')).toBeInTheDocument();
 
       expect(mocks.onOpen).toHaveBeenCalledTimes(1);
 
-      injectedProps.actions.close();
+      act(() => injectedProps.actions.close());
       expect(screen.getByTestId('test-autocomplete')).toBeInTheDocument();
 
       expect(mocks.onClose).toHaveBeenCalledTimes(1);
@@ -528,7 +528,7 @@ describe('AutoComplete', function () {
       expect(input).toHaveValue('a');
 
       fireEvent.blur(input);
-      jest.runAllTimers();
+      act(() => jest.runAllTimers());
       expect(input).toHaveValue('');
     });
   });

static/app/components/charts/eventsRequest.spec.tsx

@@ -72,7 +72,7 @@ describe('EventsRequest', function () {
       expect(doEventsRequest).toHaveBeenCalled();
     });
 
-    it('makes a new request if projects prop changes', function () {
+    it('makes a new request if projects prop changes', async function () {
       const {rerender} = render(<EventsRequest {...DEFAULTS}>{mock}</EventsRequest>);
       (doEventsRequest as jest.Mock).mockClear();
 
@@ -81,6 +81,7 @@ describe('EventsRequest', function () {
           {mock}
         </EventsRequest>
       );
+      await waitFor(() => expect(doEventsRequest).toHaveBeenCalledTimes(1));
       expect(doEventsRequest).toHaveBeenCalledWith(
         expect.anything(),
         expect.objectContaining({
@@ -89,7 +90,7 @@ describe('EventsRequest', function () {
       );
     });
 
-    it('makes a new request if environments prop changes', function () {
+    it('makes a new request if environments prop changes', async function () {
       const {rerender} = render(<EventsRequest {...DEFAULTS}>{mock}</EventsRequest>);
       (doEventsRequest as jest.Mock).mockClear();
 
@@ -98,6 +99,7 @@ describe('EventsRequest', function () {
           {mock}
         </EventsRequest>
       );
+      await waitFor(() => expect(doEventsRequest).toHaveBeenCalledTimes(1));
       expect(doEventsRequest).toHaveBeenCalledWith(
         expect.anything(),
         expect.objectContaining({
@@ -106,7 +108,7 @@ describe('EventsRequest', function () {
       );
     });
 
-    it('makes a new request if period prop changes', function () {
+    it('makes a new request if period prop changes', async function () {
       const {rerender} = render(<EventsRequest {...DEFAULTS}>{mock}</EventsRequest>);
       (doEventsRequest as jest.Mock).mockClear();
 
@@ -116,6 +118,7 @@ describe('EventsRequest', function () {
         </EventsRequest>
       );
 
+      await waitFor(() => expect(doEventsRequest).toHaveBeenCalledTimes(1));
       expect(doEventsRequest).toHaveBeenCalledWith(
         expect.anything(),
         expect.objectContaining({

static/app/components/charts/onDemandMetricRequest.spec.tsx

@@ -67,7 +67,7 @@ describe('OnDemandMetricRequest', function () {
       expect(doEventsRequest).toHaveBeenCalled();
     });
 
-    it('makes a new request if projects prop changes', function () {
+    it('makes a new request if projects prop changes', async function () {
       const {rerender} = render(
         <OnDemandMetricRequest {...DEFAULTS}>{mock}</OnDemandMetricRequest>
       );
@@ -79,7 +79,7 @@ describe('OnDemandMetricRequest', function () {
         </OnDemandMetricRequest>
       );
 
-      expect(doEventsRequest).toHaveBeenCalledTimes(2);
+      await waitFor(() => expect(doEventsRequest).toHaveBeenCalledTimes(2));
       expect(doEventsRequest).toHaveBeenCalledWith(
         expect.anything(),
         expect.objectContaining({
@@ -88,7 +88,7 @@ describe('OnDemandMetricRequest', function () {
       );
     });
 
-    it('makes a new request if environments prop changes', function () {
+    it('makes a new request if environments prop changes', async function () {
       const {rerender} = render(
         <OnDemandMetricRequest {...DEFAULTS}>{mock}</OnDemandMetricRequest>
       );
@@ -100,7 +100,7 @@ describe('OnDemandMetricRequest', function () {
         </OnDemandMetricRequest>
       );
 
-      expect(doEventsRequest).toHaveBeenCalledTimes(2);
+      await waitFor(() => expect(doEventsRequest).toHaveBeenCalledTimes(2));
       expect(doEventsRequest).toHaveBeenCalledWith(
         expect.anything(),
         expect.objectContaining({
@@ -109,7 +109,7 @@ describe('OnDemandMetricRequest', function () {
       );
     });
 
-    it('makes a new request if period prop changes', function () {
+    it('makes a new request if period prop changes', async function () {
       const {rerender} = render(
         <OnDemandMetricRequest {...DEFAULTS}>{mock}</OnDemandMetricRequest>
       );
@@ -121,7 +121,7 @@ describe('OnDemandMetricRequest', function () {
         </OnDemandMetricRequest>
       );
 
-      expect(doEventsRequest).toHaveBeenCalledTimes(2);
+      await waitFor(() => expect(doEventsRequest).toHaveBeenCalledTimes(2));
       expect(doEventsRequest).toHaveBeenCalledWith(
         expect.anything(),
         expect.objectContaining({

static/app/components/charts/optionSelector.spec.tsx

@@ -56,9 +56,9 @@ describe('Charts > OptionSelector (Multiple)', function () {
     return render(<TestComponent />, {context: initialData.routerContext});
   };
 
-  it('renders yAxisOptions with yAxisValue selected', function () {
+  it('renders yAxisOptions with yAxisValue selected', async function () {
     renderComponent();
-    expect(screen.getByRole('option', {name: 'count()'})).toHaveAttribute(
+    expect(await screen.findByRole('option', {name: 'count()'})).toHaveAttribute(
       'aria-selected',
       'true'
     );

static/app/components/charts/releaseSeries.spec.tsx

@@ -163,7 +163,7 @@ describe('ReleaseSeries', function () {
     );
   });
 
-  it('fetches on property updates', function () {
+  it('fetches on property updates', async function () {
     const wrapper = render(
       <ReleaseSeries {...baseSeriesProps} period="14d">
         {renderFunc}
@@ -186,9 +186,11 @@ describe('ReleaseSeries', function () {
 
       expect(releasesMock).toHaveBeenCalled();
     }
+
+    await waitFor(() => expect(releasesMock).toHaveBeenCalledTimes(1));
   });
 
-  it('doesnt not refetch releases with memoize enabled', function () {
+  it('doesnt not refetch releases with memoize enabled', async function () {
     const originalPeriod = '14d';
     const updatedPeriod = '7d';
     const wrapper = render(
@@ -197,7 +199,7 @@ describe('ReleaseSeries', function () {
       </ReleaseSeries>
     );
 
-    expect(releasesMock).toHaveBeenCalledTimes(1);
+    await waitFor(() => expect(releasesMock).toHaveBeenCalledTimes(1));
 
     wrapper.rerender(
       <ReleaseSeries {...baseSeriesProps} period={updatedPeriod} memoized>
@@ -205,7 +207,7 @@ describe('ReleaseSeries', function () {
       </ReleaseSeries>
     );
 
-    expect(releasesMock).toHaveBeenCalledTimes(2);
+    await waitFor(() => expect(releasesMock).toHaveBeenCalledTimes(2));
 
     wrapper.rerender(
       <ReleaseSeries {...baseSeriesProps} period={originalPeriod} memoized>
@@ -213,7 +215,7 @@ describe('ReleaseSeries', function () {
       </ReleaseSeries>
     );
 
-    expect(releasesMock).toHaveBeenCalledTimes(2);
+    await waitFor(() => expect(releasesMock).toHaveBeenCalledTimes(2));
   });
 
   it('generates an eCharts `markLine` series from releases', async function () {

static/app/components/compactSelect/composite.spec.tsx

@@ -64,7 +64,7 @@ describe('CompactSelect', function () {
     );
   });
 
-  it('renders disabled trigger button', function () {
+  it('renders disabled trigger button', async function () {
     render(
       <CompositeSelect disabled>
         <CompositeSelect.Region
@@ -77,7 +77,7 @@ describe('CompactSelect', function () {
         />
       </CompositeSelect>
     );
-    expect(screen.getByRole('button')).toBeDisabled();
+    expect(await screen.findByRole('button')).toBeDisabled();
   });
 
   // CompositeSelect renders a series of separate list boxes, each of which has its own

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

@@ -5,7 +5,7 @@ import {render, screen, userEvent, waitFor} from 'sentry-test/reactTestingLibrar
 import {CompactSelect} from 'sentry/components/compactSelect';
 
 describe('CompactSelect', function () {
-  it('renders', function () {
+  it('renders', async function () {
     render(
       <CompactSelect
         options={[
@@ -14,9 +14,10 @@ describe('CompactSelect', function () {
         ]}
       />
     );
+    expect(await screen.findByRole('button', {name: 'None'})).toBeEnabled();
   });
 
-  it('renders disabled', function () {
+  it('renders disabled', async function () {
     render(
       <CompactSelect
         disabled
@@ -26,7 +27,7 @@ describe('CompactSelect', function () {
         ]}
       />
     );
-    expect(screen.getByRole('button')).toBeDisabled();
+    expect(await screen.findByRole('button', {name: 'None'})).toBeDisabled();
   });
 
   it('renders with menu title', async function () {
@@ -174,7 +175,7 @@ describe('CompactSelect', function () {
       ]);
     });
 
-    it('displays trigger button with prefix', function () {
+    it('displays trigger button with prefix', async function () {
       render(
         <CompactSelect
           triggerProps={{prefix: 'Prefix'}}
@@ -185,7 +186,9 @@ describe('CompactSelect', function () {
           ]}
         />
       );
-      expect(screen.getByRole('button', {name: 'Prefix Option One'})).toBeInTheDocument();
+      expect(
+        await screen.findByRole('button', {name: 'Prefix Option One'})
+      ).toBeInTheDocument();
     });
 
     it('can search', async function () {
@@ -472,7 +475,7 @@ describe('CompactSelect', function () {
       ]);
     });
 
-    it('displays trigger button with prefix', function () {
+    it('displays trigger button with prefix', async function () {
       render(
         <CompactSelect
           grid
@@ -484,7 +487,9 @@ describe('CompactSelect', function () {
           ]}
         />
       );
-      expect(screen.getByRole('button', {name: 'Prefix Option One'})).toBeInTheDocument();
+      expect(
+        await screen.findByRole('button', {name: 'Prefix Option One'})
+      ).toBeInTheDocument();
     });
 
     it('can search', async function () {

static/app/components/events/contextSummary/index.spec.tsx

@@ -82,7 +82,7 @@ describe('ContextSummary', function () {
       render(<ContextSummary event={event} />);
     });
 
-    it('renders at least three contexts', function () {
+    it('renders at least three contexts', async function () {
       const event = EventFixture({
         id: '',
         user: CONTEXT_USER,
@@ -92,6 +92,9 @@ describe('ContextSummary', function () {
       });
 
       render(<ContextSummary event={event} />);
+      expect((await screen.findAllByTestId('context-item'))[0]).toHaveTextContent(
+        'Mmail@example.orgID:1'
+      );
     });
 
     it('renders up to four contexts', function () {
@@ -171,7 +174,7 @@ describe('ContextSummary', function () {
 
 describe('OsSummary', function () {
   describe('render()', function () {
-    it('renders the version string', function () {
+    it('renders the version string', async function () {
       render(
         <ContextSummaryOS
           data={{
@@ -182,6 +185,9 @@ describe('OsSummary', function () {
           meta={{}}
         />
       );
+      expect(await screen.findByTestId('context-item')).toHaveTextContent(
+        'Mac OS XVersion:10.13.4'
+      );
     });
 
     it('renders the kernel version when no version', function () {
@@ -265,7 +271,7 @@ describe('OsSummary', function () {
 
 describe('GpuSummary', function () {
   describe('render()', function () {
-    it('renders name and vendor', function () {
+    it('renders name and vendor', async function () {
       render(
         <ContextSummaryGPU
           data={{
@@ -275,9 +281,12 @@ describe('GpuSummary', function () {
           meta={{}}
         />
       );
+      expect(await screen.findByTestId('context-item')).toHaveTextContent(
+        'Mali-T880Vendor:ARM'
+      );
     });
 
-    it('renders unknown when no vendor', function () {
+    it('renders unknown when no vendor', async function () {
       render(
         <ContextSummaryGPU
           data={{
@@ -286,6 +295,9 @@ describe('GpuSummary', function () {
           meta={{}}
         />
       );
+      expect(await screen.findByTestId('context-item')).toHaveTextContent(
+        'Apple A8 GPUVendor:Unknown'
+      );
     });
 
     it('display redacted name', async function () {

static/app/components/events/eventTagsAndScreenshot/index.spec.tsx

@@ -185,7 +185,7 @@ describe('EventTagsAndScreenshot', function () {
       });
     });
 
-    it('not shared event - without attachments', function () {
+    it('not shared event - without attachments', async function () {
       render(
         <EventTagsAndScreenshot
           event={EventFixture({...event, tags, contexts})}
@@ -196,14 +196,14 @@ describe('EventTagsAndScreenshot', function () {
         {organization}
       );
 
-      // Screenshot Container
-      expect(screen.queryByText('Screenshot')).not.toBeInTheDocument();
-
       // Tags Container
-      expect(screen.getByText('Tags')).toBeInTheDocument();
+      expect(await screen.findByText('Tags')).toBeInTheDocument();
       const contextItems = screen.getAllByTestId('context-item');
       expect(contextItems).toHaveLength(Object.keys(contexts).length);
 
+      // Screenshot Container
+      expect(screen.queryByText('Screenshot')).not.toBeInTheDocument();
+
       // Context Item 1
       const contextItem1 = within(contextItems[0]);
       expect(contextItem1.getByRole('heading')).toHaveTextContent(user.email);
@@ -413,9 +413,9 @@ describe('EventTagsAndScreenshot', function () {
         `/api/0/projects/${organization.slug}/${project.slug}/events/${event.id}/attachments/${moreAttachments[1].id}/?download`
       );
 
-      screen.getByRole('button', {name: 'Next Screenshot'}).click();
+      await userEvent.click(screen.getByRole('button', {name: 'Next Screenshot'}));
 
-      expect(screen.getByTestId('screenshot-data-section')?.textContent).toContain(
+      expect(await screen.findByTestId('screenshot-data-section')).toHaveTextContent(
         '2 of 2'
       );