test(ui): Switch tests from enzyme modal to RTL (#41204)

static/app/views/dashboardsV2/create.spec.tsx

@@ -1,6 +1,10 @@
 import {initializeOrg} from 'sentry-test/initializeOrg';
-import {mountGlobalModal} from 'sentry-test/modal';
-import {render, screen, userEvent} from 'sentry-test/reactTestingLibrary';
+import {
+  render,
+  renderGlobalModal,
+  screen,
+  userEvent,
+} from 'sentry-test/reactTestingLibrary';
 
 import ProjectsStore from 'sentry/stores/projectsStore';
 import CreateDashboard from 'sentry/views/dashboardsV2/create';
@@ -71,8 +75,6 @@ describe('Dashboards > Create', function () {
         body: TestStubs.Dashboard([], {id: '1', title: 'Custom Errors'}),
       });
 
-      mountGlobalModal(initialData.routerContext);
-
       render(
         <CreateDashboard
           organization={initialData.organization}
@@ -83,6 +85,7 @@ describe('Dashboards > Create', function () {
         />,
         {context: initialData.routerContext}
       );
+      renderGlobalModal({context: initialData.routerContext});
 
       userEvent.click(await screen.findByTestId('widget-add'));
 

static/app/views/eventsV2/homepage.spec.tsx

@@ -1,8 +1,14 @@
 import {browserHistory} from 'react-router';
 
 import {initializeOrg} from 'sentry-test/initializeOrg';
-import {mountGlobalModal} from 'sentry-test/modal';
-import {act, render, screen, userEvent, waitFor} from 'sentry-test/reactTestingLibrary';
+import {
+  act,
+  render,
+  renderGlobalModal,
+  screen,
+  userEvent,
+  waitFor,
+} from 'sentry-test/reactTestingLibrary';
 
 import * as pageFilterUtils from 'sentry/components/organizations/pageFilters/persistence';
 import ProjectsStore from 'sentry/stores/projectsStore';
@@ -161,10 +167,10 @@ describe('Discover > Homepage', () => {
       />,
       {context: initialData.routerContext, organization: initialData.organization}
     );
+    await act(tick);
+    renderGlobalModal();
+
     userEvent.click(screen.getByText('Columns'));
-    await act(async () => {
-      await mountGlobalModal();
-    });
 
     userEvent.click(screen.getByTestId('label'));
     userEvent.click(screen.getByText('event.type'));
@@ -343,11 +349,9 @@ describe('Discover > Homepage', () => {
       />,
       {context: initialData.routerContext, organization: initialData.organization}
     );
+    renderGlobalModal();
 
     userEvent.click(screen.getByText('Columns'));
-    await act(async () => {
-      await mountGlobalModal();
-    });
 
     userEvent.click(screen.getByTestId('label'));
     userEvent.click(screen.getByText('event.type'));
@@ -408,11 +412,9 @@ describe('Discover > Homepage', () => {
       />,
       {context: initialData.routerContext, organization: initialData.organization}
     );
+    renderGlobalModal();
 
     userEvent.click(screen.getByText('Columns'));
-    await act(async () => {
-      await mountGlobalModal();
-    });
 
     userEvent.click(screen.getByTestId('label'));
     userEvent.click(screen.getByText('event.type'));

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

@@ -1,6 +1,10 @@
 import {initializeOrg} from 'sentry-test/initializeOrg';
-import {mountGlobalModal} from 'sentry-test/modal';
-import {render, screen, userEvent} from 'sentry-test/reactTestingLibrary';
+import {
+  render,
+  renderGlobalModal,
+  screen,
+  userEvent,
+} from 'sentry-test/reactTestingLibrary';
 
 import ProjectDebugFiles from 'sentry/views/settings/projectDebugFiles';
 
@@ -65,12 +69,12 @@ describe('ProjectDebugFiles', function () {
     });
 
     render(<ProjectDebugFiles {...props} />);
+    renderGlobalModal();
 
     // Delete button
     userEvent.click(screen.getByTestId('delete-dif'));
 
     // Confirm Modal
-    mountGlobalModal();
     await screen.findByRole('dialog');
 
     userEvent.click(screen.getByTestId('confirm-button'));

tests/js/sentry-test/modal.jsx

@@ -4,6 +4,9 @@ import GlobalModal from 'sentry/components/globalModal';
 
 const mountedModals = [];
 
+/**
+ * @deprecated only use this with enzyme
+ */
 export async function mountGlobalModal(context) {
   const modal = mountWithTheme(<GlobalModal />, context);
   mountedModals.push(modal);