test(ui): Fix flake in widget viewer modal (#71845)

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

@@ -79,6 +79,8 @@ async function renderModal({
   if (widget.widgetType === WidgetType.DISCOVER) {
     await waitForMetaToHaveBeenCalled();
   }
+  // Component renders twice
+  await act(tick);
   return rendered;
 }
 
@@ -206,15 +208,17 @@ describe('Modals -> WidgetViewerModal', function () {
       it('renders Edit and Open buttons', async function () {
         mockEvents();
         await renderModal({initialData, widget: mockWidget});
-        expect(screen.getByText('Edit Widget')).toBeInTheDocument();
+        expect(await screen.findByText('Edit Widget')).toBeInTheDocument();
         expect(screen.getByText('Open in Discover')).toBeInTheDocument();
       });
 
       it('renders updated table columns and orderby', async function () {
         const eventsMock = mockEvents();
         await renderModal({initialData, widget: mockWidget});
-        expect(screen.getByText('title')).toBeInTheDocument();
-        expect(screen.getByText('/organizations/:orgId/dashboards/')).toBeInTheDocument();
+        expect(await screen.findByText('title')).toBeInTheDocument();
+        expect(
+          await screen.findByText('/organizations/:orgId/dashboards/')
+        ).toBeInTheDocument();
         expect(eventsMock).toHaveBeenCalledWith(
           '/organizations/org-slug/events/',
           expect.objectContaining({
@@ -230,8 +234,10 @@ describe('Modals -> WidgetViewerModal', function () {
           widget: mockWidget,
           dashboardFilters: {release: ['project-release@1.2.0']},
         });
-        expect(screen.getByText('title')).toBeInTheDocument();
-        expect(screen.getByText('/organizations/:orgId/dashboards/')).toBeInTheDocument();
+        expect(await screen.findByText('title')).toBeInTheDocument();
+        expect(
+          await screen.findByText('/organizations/:orgId/dashboards/')
+        ).toBeInTheDocument();
         expect(eventsMock).toHaveBeenCalledWith(
           '/organizations/org-slug/events/',
           expect.objectContaining({
@@ -247,7 +253,7 @@ describe('Modals -> WidgetViewerModal', function () {
       it('renders area chart', async function () {
         mockEvents();
         await renderModal({initialData, widget: mockWidget});
-        expect(screen.getByText('echarts mock')).toBeInTheDocument();
+        expect(await screen.findByText('echarts mock')).toBeInTheDocument();
       });
 
       it('renders description', async function () {
@@ -256,18 +262,13 @@ describe('Modals -> WidgetViewerModal', function () {
           initialData,
           widget: {...mockWidget, description: 'This is a description'},
         });
-        expect(screen.getByText('This is a description')).toBeInTheDocument();
-      });
-
-      it('renders Discover area chart widget viewer', async function () {
-        mockEvents();
-        await renderModal({initialData, widget: mockWidget});
+        expect(await screen.findByText('This is a description')).toBeInTheDocument();
       });
 
       it('redirects user to Discover when clicking Open in Discover', async function () {
         mockEvents();
         await renderModal({initialData, widget: mockWidget});
-        await userEvent.click(screen.getByText('Open in Discover'));
+        await userEvent.click(await screen.findByText('Open in Discover'));
         expect(initialData.router.push).toHaveBeenCalledWith(
           '/organizations/org-slug/discover/results/?environment=prod&environment=dev&field=count%28%29&name=Test%20Widget&project=1&project=2&query=title%3A%2Forganizations%2F%3AorgId%2Fperformance%2Fsummary%2F&statsPeriod=24h&yAxis=count%28%29'
         );
@@ -304,7 +305,7 @@ describe('Modals -> WidgetViewerModal', function () {
         mockEvents();
         await renderModal({initialData, widget: mockWidget});
         expect(
-          screen.getByText(
+          await screen.findByText(
             'This widget was built with multiple queries. Table data can only be displayed for one query at a time. To edit any of the queries, edit the widget.'
           )
         ).toBeInTheDocument();
@@ -314,7 +315,7 @@ describe('Modals -> WidgetViewerModal', function () {
       it('updates selected query when selected in the query dropdown', async function () {
         mockEvents();
         const {rerender} = await renderModal({initialData, widget: mockWidget});
-        await userEvent.click(screen.getByText('Query Name'));
+        await userEvent.click(await screen.findByText('Query Name'));
         await userEvent.click(screen.getByText('Another Query Name'));
         expect(initialData.router.replace).toHaveBeenCalledWith({
           query: {query: 1},
@@ -367,7 +368,7 @@ describe('Modals -> WidgetViewerModal', function () {
       it('renders total results in footer', async function () {
         mockEvents();
         await renderModal({initialData, widget: mockWidget});
-        expect(screen.getByText('33,323,612')).toBeInTheDocument();
+        expect(await screen.findByText('33,323,612')).toBeInTheDocument();
       });
 
       it('renders highlighted query text and multiple queries in select dropdown', async function () {
@@ -380,7 +381,7 @@ describe('Modals -> WidgetViewerModal', function () {
           },
         });
         await userEvent.click(
-          screen.getByText('/organizations/:orgId/performance/summary/')
+          await screen.findByText('/organizations/:orgId/performance/summary/')
         );
       });
 
@@ -462,7 +463,7 @@ describe('Modals -> WidgetViewerModal', function () {
           },
         ];
         await renderModal({initialData, widget: mockWidget});
-        screen.getByText('transaction');
+        expect(await screen.findByText('transaction')).toBeInTheDocument();
       });
 
       it('includes order by in widget viewer table if not explicitly selected', async function () {
@@ -478,7 +479,7 @@ describe('Modals -> WidgetViewerModal', function () {
           },
         ];
         await renderModal({initialData, widget: mockWidget});
-        screen.getByText('count_unique(user)');
+        expect(await screen.findByText('count_unique(user)')).toBeInTheDocument();
       });
 
       it('includes a custom equation order by in widget viewer table if not explicitly selected', async function () {
@@ -494,7 +495,7 @@ describe('Modals -> WidgetViewerModal', function () {
           },
         ];
         await renderModal({initialData, widget: mockWidget});
-        screen.getByText('count_unique(user) + 1');
+        expect(await screen.findByText('count_unique(user) + 1')).toBeInTheDocument();
       });
 
       it('renders widget chart with y axis formatter using provided seriesResultType', async function () {
@@ -722,17 +723,11 @@ describe('Modals -> WidgetViewerModal', function () {
         });
       });
 
-      it('renders Discover topn chart widget viewer', async function () {
-        mockEventsStats();
-        mockEvents();
-        await renderModal({initialData, widget: mockWidget});
-      });
-
       it('sorts table when a sortable column header is clicked', async function () {
         const eventsStatsMock = mockEventsStats();
         const eventsMock = mockEvents();
         const {rerender} = await renderModal({initialData, widget: mockWidget});
-        await userEvent.click(screen.getByText('count()'));
+        await userEvent.click(await screen.findByText('count()'));
         expect(initialData.router.push).toHaveBeenCalledWith({
           query: {sort: ['-count()']},
         });
@@ -769,7 +764,7 @@ describe('Modals -> WidgetViewerModal', function () {
         mockEventsStats();
         mockEvents();
         await renderModal({initialData, widget: mockWidget});
-        expect(screen.getByRole('button', {name: 'Previous'})).toBeInTheDocument();
+        expect(await screen.findByRole('button', {name: 'Previous'})).toBeInTheDocument();
         expect(screen.getByRole('button', {name: 'Next'})).toBeInTheDocument();
       });
 
@@ -1320,7 +1315,7 @@ describe('Modals -> WidgetViewerModal', function () {
 
     it('renders table header and body', async function () {
       await renderModal({initialData, widget: mockWidget});
-      expect(screen.getByText('release')).toBeInTheDocument();
+      expect(await screen.findByText('release')).toBeInTheDocument();
       expect(await screen.findByText('e102abb2c46e')).toBeInTheDocument();
       expect(screen.getByText('sum(session)')).toBeInTheDocument();
       expect(screen.getByText('6.3k')).toBeInTheDocument();