test(ui): Remove manual acts from tests (#63557)

static/app/views/performance/landing/widgets/components/widgetContainer.spec.tsx

@@ -2,7 +2,7 @@ import {
   initializeData as _initializeData,
   InitializeDataSettings,
 } from 'sentry-test/performance/initializePerformanceData';
-import {act, render, screen, userEvent} from 'sentry-test/reactTestingLibrary';
+import {render, screen, userEvent} from 'sentry-test/reactTestingLibrary';
 
 import {MetricsCardinalityProvider} from 'sentry/utils/performance/contexts/metricsCardinality';
 import {MEPSettingProvider} from 'sentry/utils/performance/contexts/metricsEnhancedSetting';
@@ -275,9 +275,6 @@ describe('Performance > Widgets > WidgetContainer', function () {
       </PageErrorProvider>
     );
 
-    // Provider update is after request promise.
-    await act(async () => {});
-
     expect(await screen.findByTestId('performance-widget-title')).toHaveTextContent(
       'Transactions Per Minute'
     );

static/app/views/settings/organizationIntegrations/integrationExternalMappingForm.spec.tsx

@@ -1,6 +1,6 @@
 import {GitHubIntegrationFixture} from 'sentry-fixture/githubIntegration';
 
-import {act, render, screen, userEvent} from 'sentry-test/reactTestingLibrary';
+import {render, screen, userEvent, waitFor} from 'sentry-test/reactTestingLibrary';
 
 import IntegrationExternalMappingForm from './integrationExternalMappingForm';
 
@@ -55,16 +55,14 @@ describe('IntegrationExternalMappingForm', function () {
   // No mapping provided (e.g. Create a new mapping)
   it('renders with no mapping provided as a form', async function () {
     render(<IntegrationExternalMappingForm type="user" {...baseProps} />);
-    await act(tick);
-    expect(screen.getByPlaceholderText('@username')).toBeInTheDocument();
+    expect(await screen.findByPlaceholderText('@username')).toBeInTheDocument();
     expect(screen.getByText('Select Sentry User')).toBeInTheDocument();
     expect(screen.getByTestId('form-submit')).toBeInTheDocument();
   });
   it('renders with no mapping as an inline field', async function () {
     render(<IntegrationExternalMappingForm isInline type="user" {...baseProps} />);
-    await act(tick);
+    expect(await screen.findByText('Select Sentry User')).toBeInTheDocument();
     expect(screen.queryByPlaceholderText('@username')).not.toBeInTheDocument();
-    expect(screen.getByText('Select Sentry User')).toBeInTheDocument();
     expect(screen.queryByTestId('form-submit')).not.toBeInTheDocument();
   });
 
@@ -77,8 +75,9 @@ describe('IntegrationExternalMappingForm', function () {
         {...baseProps}
       />
     );
-    await act(tick);
-    expect(screen.getByDisplayValue(MOCK_USER_MAPPING.externalName)).toBeInTheDocument();
+    expect(
+      await screen.findByDisplayValue(MOCK_USER_MAPPING.externalName)
+    ).toBeInTheDocument();
     expect(screen.getByText(`option${MOCK_USER_MAPPING.userId}`)).toBeInTheDocument();
     expect(screen.getByTestId('form-submit')).toBeInTheDocument();
   });
@@ -91,11 +90,12 @@ describe('IntegrationExternalMappingForm', function () {
         {...baseProps}
       />
     );
-    await act(tick);
+    expect(
+      await screen.findByText(`option${MOCK_USER_MAPPING.userId}`)
+    ).toBeInTheDocument();
     expect(
       screen.queryByDisplayValue(MOCK_USER_MAPPING.externalName)
     ).not.toBeInTheDocument();
-    expect(screen.getByText(`option${MOCK_USER_MAPPING.userId}`)).toBeInTheDocument();
     expect(screen.queryByTestId('form-submit')).not.toBeInTheDocument();
   });
 
@@ -108,8 +108,9 @@ describe('IntegrationExternalMappingForm', function () {
         {...baseProps}
       />
     );
-    await act(tick);
-    expect(screen.getByDisplayValue(MOCK_TEAM_MAPPING.externalName)).toBeInTheDocument();
+    expect(
+      await screen.findByDisplayValue(MOCK_TEAM_MAPPING.externalName)
+    ).toBeInTheDocument();
     expect(screen.getByText('Select Sentry Team')).toBeInTheDocument();
     expect(screen.getByTestId('form-submit')).toBeInTheDocument();
   });
@@ -122,11 +123,10 @@ describe('IntegrationExternalMappingForm', function () {
         {...baseProps}
       />
     );
-    await act(tick);
+    expect(await screen.findByText('Select Sentry Team')).toBeInTheDocument();
     expect(
       screen.queryByDisplayValue(MOCK_TEAM_MAPPING.externalName)
     ).not.toBeInTheDocument();
-    expect(screen.getByText('Select Sentry Team')).toBeInTheDocument();
     expect(screen.queryByTestId('form-submit')).not.toBeInTheDocument();
   });
 
@@ -141,17 +141,19 @@ describe('IntegrationExternalMappingForm', function () {
     expect(baseProps.getBaseFormEndpoint).not.toHaveBeenCalled();
     expect(postResponse).not.toHaveBeenCalled();
     await userEvent.type(screen.getByText('Select Sentry User'), 'option2');
-    await act(tick);
     await userEvent.click(screen.getAllByText('option2')[1]);
     await userEvent.click(screen.getByTestId('form-submit'));
-    await act(tick);
-    expect(baseProps.getBaseFormEndpoint).toHaveBeenCalledWith({
-      externalName: MOCK_USER_MAPPING.externalName,
-      integrationId: baseProps.integration.id,
-      provider: baseProps.integration.provider.name.toLowerCase(),
-      // From option2 selection
-      userId: '2',
+
+    await waitFor(() => {
+      expect(baseProps.getBaseFormEndpoint).toHaveBeenCalledWith({
+        externalName: MOCK_USER_MAPPING.externalName,
+        integrationId: baseProps.integration.id,
+        provider: baseProps.integration.provider.name.toLowerCase(),
+        // From option2 selection
+        userId: '2',
+      });
     });
+
     expect(postResponse).toHaveBeenCalled();
     expect(putResponse).not.toHaveBeenCalled();
   });
@@ -165,20 +167,21 @@ describe('IntegrationExternalMappingForm', function () {
         {...baseProps}
       />
     );
-    await act(tick);
+    expect(await screen.findByText('option1')).toBeInTheDocument();
     expect(baseProps.getBaseFormEndpoint).not.toHaveBeenCalled();
     expect(putResponse).not.toHaveBeenCalled();
     await userEvent.type(screen.getByRole('textbox'), 'option3');
-    await act(tick);
+    expect(await screen.findAllByText('option3')).toHaveLength(2);
     await userEvent.click(screen.getAllByText('option3')[1]);
-    expect(baseProps.getBaseFormEndpoint).toHaveBeenCalledWith({
-      ...MOCK_TEAM_MAPPING,
-      integrationId: baseProps.integration.id,
-      provider: baseProps.integration.provider.name.toLowerCase(),
-      // From option3 selection
-      teamId: '3',
+    await waitFor(() => {
+      expect(baseProps.getBaseFormEndpoint).toHaveBeenCalledWith({
+        ...MOCK_TEAM_MAPPING,
+        integrationId: baseProps.integration.id,
+        provider: baseProps.integration.provider.name.toLowerCase(),
+        // From option3 selection
+        teamId: '3',
+      });
     });
-    await act(tick);
     expect(putResponse).toHaveBeenCalled();
     expect(postResponse).not.toHaveBeenCalled();
   });
@@ -194,13 +197,12 @@ describe('IntegrationExternalMappingForm', function () {
     );
     const sentryNameField = screen.getByText(`option${MOCK_USER_MAPPING.userId}`);
     // Don't query for results on load
+    expect(await screen.findByText('option1')).toBeInTheDocument();
     expect(sentryNameField).toBeInTheDocument();
-    await act(tick);
     expect(getResponse).not.toHaveBeenCalled();
     // Now that the user types, query for results
     await userEvent.type(sentryNameField, 'option2');
-    await act(tick);
     await userEvent.click(screen.getAllByText('option2')[1]);
-    expect(getResponse).toHaveBeenCalled();
+    await waitFor(() => expect(getResponse).toHaveBeenCalled());
   });
 });

static/app/views/settings/organizationMembers/inviteBanner.spec.tsx

@@ -3,7 +3,7 @@ import {MemberFixture} from 'sentry-fixture/member';
 import {MissingMembersFixture} from 'sentry-fixture/missingMembers';
 import {OrganizationFixture} from 'sentry-fixture/organization';
 
-import {act, render, screen, userEvent} from 'sentry-test/reactTestingLibrary';
+import {render, screen, userEvent, waitFor} from 'sentry-test/reactTestingLibrary';
 
 import {DEFAULT_SNOOZE_PROMPT_DAYS} from 'sentry/utils/promptIsDismissed';
 import {InviteBanner} from 'sentry/views/settings/organizationMembers/inviteBanner';
@@ -65,7 +65,7 @@ describe('inviteBanner', function () {
       features: [],
     });
 
-    render(
+    const {container} = render(
       <InviteBanner
         onSendInvite={() => {}}
         organization={org}
@@ -74,11 +74,7 @@ describe('inviteBanner', function () {
       />
     );
 
-    expect(
-      screen.queryByRole('heading', {
-        name: 'Bring your full GitHub team on board in Sentry',
-      })
-    ).not.toBeInTheDocument();
+    expect(container).toBeEmptyDOMElement();
   });
 
   it('does not render banner if no option', function () {
@@ -86,7 +82,7 @@ describe('inviteBanner', function () {
       features: ['integrations-gh-invite'],
     });
 
-    render(
+    const {container} = render(
       <InviteBanner
         onSendInvite={() => {}}
         organization={org}
@@ -95,11 +91,7 @@ describe('inviteBanner', function () {
       />
     );
 
-    expect(
-      screen.queryByRole('heading', {
-        name: 'Bring your full GitHub team on board in Sentry',
-      })
-    ).not.toBeInTheDocument();
+    expect(container).toBeEmptyDOMElement();
   });
 
   it('does not render banner if no missing members', async function () {
@@ -108,28 +100,23 @@ describe('inviteBanner', function () {
       githubNudgeInvite: true,
     });
 
-    MockApiClient.addMockResponse({
+    const mock = MockApiClient.addMockResponse({
       url: '/organizations/org-slug/missing-members/',
       method: 'GET',
       body: [noMissingMembers],
     });
 
-    await act(async () => {
-      await render(
-        <InviteBanner
-          onSendInvite={() => {}}
-          organization={org}
-          allowedRoles={[]}
-          onModalClose={() => {}}
-        />
-      );
-    });
+    const {container} = render(
+      <InviteBanner
+        onSendInvite={() => {}}
+        organization={org}
+        allowedRoles={[]}
+        onModalClose={() => {}}
+      />
+    );
 
-    expect(
-      screen.queryByRole('heading', {
-        name: 'Bring your full GitHub team on board in Sentry',
-      })
-    ).not.toBeInTheDocument();
+    await waitFor(() => expect(mock).toHaveBeenCalledTimes(1));
+    expect(container).toBeEmptyDOMElement();
   });
 
   it('does not render banner if no integration', async function () {
@@ -138,53 +125,42 @@ describe('inviteBanner', function () {
       githubNudgeInvite: true,
     });
 
-    MockApiClient.addMockResponse({
+    const mock = MockApiClient.addMockResponse({
       url: '/organizations/org-slug/missing-members/',
       method: 'GET',
       body: [],
     });
 
-    await act(async () => {
-      await render(
-        <InviteBanner
-          onSendInvite={() => {}}
-          organization={org}
-          allowedRoles={[]}
-          onModalClose={() => {}}
-        />
-      );
-    });
+    const {container} = render(
+      <InviteBanner
+        onSendInvite={() => {}}
+        organization={org}
+        allowedRoles={[]}
+        onModalClose={() => {}}
+      />
+    );
 
-    expect(
-      screen.queryByRole('heading', {
-        name: 'Bring your full GitHub team on board in Sentry',
-      })
-    ).not.toBeInTheDocument();
+    await waitFor(() => expect(mock).toHaveBeenCalledTimes(1));
+    expect(container).toBeEmptyDOMElement();
   });
 
-  it('does not render banner if lacking org:write', async function () {
+  it('does not render banner if lacking org:write', function () {
     const org = OrganizationFixture({
       features: ['integrations-gh-invite'],
       access: [],
       githubNudgeInvite: true,
     });
 
-    await act(async () => {
-      await render(
-        <InviteBanner
-          onSendInvite={() => {}}
-          organization={org}
-          allowedRoles={[]}
-          onModalClose={() => {}}
-        />
-      );
-    });
+    const {container} = render(
+      <InviteBanner
+        onSendInvite={() => {}}
+        organization={org}
+        allowedRoles={[]}
+        onModalClose={() => {}}
+      />
+    );
 
-    expect(
-      screen.queryByRole('heading', {
-        name: 'Bring your full GitHub team on board in Sentry',
-      })
-    ).not.toBeInTheDocument();
+    expect(container).toBeEmptyDOMElement();
   });
 
   it('renders banner if snoozed_ts days is longer than threshold', async function () {
@@ -239,23 +215,17 @@ describe('inviteBanner', function () {
       body: {data: promptResponse},
     });
 
-    await act(async () => {
-      await render(
-        <InviteBanner
-          onSendInvite={() => {}}
-          organization={org}
-          allowedRoles={[]}
-          onModalClose={() => {}}
-        />
-      );
-    });
+    const {container} = render(
+      <InviteBanner
+        onSendInvite={() => {}}
+        organization={org}
+        allowedRoles={[]}
+        onModalClose={() => {}}
+      />
+    );
 
-    expect(mockPrompt).toHaveBeenCalled();
-    expect(
-      screen.queryByRole('heading', {
-        name: 'Bring your full GitHub team on board in Sentry',
-      })
-    ).not.toBeInTheDocument();
+    await waitFor(() => expect(mockPrompt).toHaveBeenCalled());
+    expect(container).toBeEmptyDOMElement();
   });
 
   it('invites member from banner', async function () {

static/app/views/settings/organizationTeams/teamMembers.spec.tsx

@@ -323,7 +323,7 @@ describe('TeamMembers', function () {
     expect(deleteMock).toHaveBeenCalled();
   });
 
-  it('renders team-level roles without flag', async function () {
+  it('renders team-level roles without flag', function () {
     const owner = MemberFixture({
       id: '123',
       email: 'foo@example.com',
@@ -336,7 +336,7 @@ describe('TeamMembers', function () {
       body: [...members, owner],
     });
 
-    await render(
+    render(
       <TeamMembers
         {...routerProps}
         params={{teamId: team.slug}}
@@ -351,7 +351,7 @@ describe('TeamMembers', function () {
     expect(contributors).toHaveLength(2);
   });
 
-  it('renders team-level roles with flag', async function () {
+  it('renders team-level roles with flag', function () {
     const manager = MemberFixture({
       id: '123',
       email: 'foo@example.com',
@@ -366,7 +366,7 @@ describe('TeamMembers', function () {
 
     const orgWithTeamRoles = OrganizationFixture({features: ['team-roles']});
 
-    await render(
+    render(
       <TeamMembers
         {...routerProps}
         params={{teamId: team.slug}}

static/app/views/settings/projectGeneralSettings/index.spec.tsx

@@ -8,7 +8,6 @@ import {RouterContextFixture} from 'sentry-fixture/routerContextFixture';
 import {RouterFixture} from 'sentry-fixture/routerFixture';
 
 import {
-  act,
   fireEvent,
   render,
   renderGlobalModal,
@@ -386,17 +385,18 @@ describe('projectGeneralSettings', function () {
 
       // Click "Save"
       await userEvent.click(screen.getByRole('button', {name: 'Save'}));
-      await act(tick);
 
       // API endpoint should have been called
-      expect(putMock).toHaveBeenCalledWith(
-        expect.anything(),
-        expect.objectContaining({
-          data: {
-            resolveAge: 12,
-          },
-        })
-      );
+      await waitFor(() => {
+        expect(putMock).toHaveBeenCalledWith(
+          expect.anything(),
+          expect.objectContaining({
+            data: {
+              resolveAge: 12,
+            },
+          })
+        );
+      });
 
       expect(screen.queryByRole('button', {name: 'Save'})).not.toBeInTheDocument();
     });