Chore: update more unit tests to work with react 18 (#64812)

update more unit tests to work with react 18

packages/grafana-ui/src/components/Graph/Graph.test.tsx

@@ -1,4 +1,4 @@
-import { render, screen } from '@testing-library/react';
+import { act, render, screen } from '@testing-library/react';
 import $ from 'jquery';
 import React from 'react';
 
@@ -136,7 +136,9 @@ describe('Graph', () => {
             series: { seriesIndex: 0 },
           },
         };
+        act(() => {
           $('div.graph-panel__chart').trigger('plothover', [eventArgs.pos, eventArgs.activeItem]);
+        });
         const timestamp = screen.getByLabelText('Timestamp');
         const tooltip = screen.getByTestId('SeriesTableRow').parentElement;
 
@@ -165,7 +167,9 @@ describe('Graph', () => {
           activeItem: null,
         };
         // Then
+        act(() => {
           $('div.graph-panel__chart').trigger('plothover', [eventArgs.pos, eventArgs.activeItem]);
+        });
         const timestamp = screen.getByLabelText('Timestamp');
 
         const tableRows = screen.getAllByTestId('SeriesTableRow');

packages/grafana-ui/src/components/QueryField/QueryField.test.tsx

@@ -1,4 +1,4 @@
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import React from 'react';
 
 import { createTheme } from '@grafana/data';
@@ -29,7 +29,7 @@ describe('<QueryField />', () => {
   });
 
   describe('syntaxLoaded', () => {
-    it('should re-render the editor after syntax has fully loaded', () => {
+    it('should re-render the editor after syntax has fully loaded', async () => {
       const mockOnRichValueChange = jest.fn();
       const { rerender } = render(
         <UnThemedQueryField
@@ -49,9 +49,12 @@ describe('<QueryField />', () => {
         />
       );
       expect(mockOnRichValueChange).toHaveBeenCalled();
+
+      // wait for the query to appear to prevent act warnings
+      await screen.findByText('my query');
     });
 
-    it('should not re-render the editor if syntax is already loaded', () => {
+    it('should not re-render the editor if syntax is already loaded', async () => {
       const mockOnRichValueChange = jest.fn();
       const { rerender } = render(
         <UnThemedQueryField
@@ -72,9 +75,12 @@ describe('<QueryField />', () => {
         />
       );
       expect(mockOnRichValueChange).not.toBeCalled();
+
+      // wait for the query to appear to prevent act warnings
+      await screen.findByText('my query');
     });
 
-    it('should not re-render the editor twice once syntax is fully loaded', () => {
+    it('should not re-render the editor twice once syntax is fully loaded', async () => {
       const mockOnRichValueChange = jest.fn();
       const { rerender } = render(
         <UnThemedQueryField
@@ -103,6 +109,9 @@ describe('<QueryField />', () => {
         />
       );
       expect(mockOnRichValueChange).toBeCalledTimes(1);
+
+      // wait for the query to appear to prevent act warnings
+      await screen.findByText('my query');
     });
   });
 });

packages/grafana-ui/src/components/QueryField/QueryField.tsx

@@ -113,7 +113,6 @@ export class UnThemedQueryField extends PureComponent<QueryFieldProps, QueryFiel
 
   componentDidUpdate(prevProps: QueryFieldProps, prevState: QueryFieldState) {
     const { query, syntax, syntaxLoaded } = this.props;
-
     if (!prevProps.syntaxLoaded && syntaxLoaded && this.editor) {
       // Need a bogus edit to re-render the editor after syntax has fully loaded
       const editor = this.editor.insertText(' ').deleteBackward(1);

public/app/core/components/NavBar/NavBar.test.tsx

@@ -1,4 +1,4 @@
-import { render, screen } from '@testing-library/react';
+import { act, render, screen } from '@testing-library/react';
 import React from 'react';
 
 import { locationService } from '@grafana/runtime';
@@ -26,7 +26,7 @@ const setup = () => {
   );
 };
 
-describe('Render', () => {
+describe('NavBar', () => {
   it('should render component', async () => {
     setup();
     const sidemenu = await screen.findByTestId('sidemenu');
@@ -36,7 +36,7 @@ describe('Render', () => {
   it('should not render when in kiosk mode is tv', async () => {
     setup();
 
-    locationService.partial({ kiosk: 'tv' });
+    act(() => locationService.partial({ kiosk: 'tv' }));
     const sidemenu = screen.queryByTestId('sidemenu');
     expect(sidemenu).not.toBeInTheDocument();
   });
@@ -44,7 +44,7 @@ describe('Render', () => {
   it('should not render when in kiosk mode is full', async () => {
     setup();
 
-    locationService.partial({ kiosk: '1' });
+    act(() => locationService.partial({ kiosk: '1' }));
     const sidemenu = screen.queryByTestId('sidemenu');
     expect(sidemenu).not.toBeInTheDocument();
   });

public/app/features/correlations/CorrelationsPage.test.tsx

@@ -508,9 +508,7 @@ describe('CorrelationsPage', () => {
 
       await userEvent.click(screen.getByRole('button', { name: /save$/i }));
 
-      await waitFor(() => {
-        expect(screen.queryByRole('cell', { name: /edited label$/i })).toBeInTheDocument();
-      });
+      expect(await screen.findByRole('cell', { name: /edited label$/i })).toBeInTheDocument();
 
       expect(mocks.reportInteraction).toHaveBeenLastCalledWith('grafana_correlations_edited');
     });

public/app/features/datasources/pages/EditDataSourcePage.test.tsx

@@ -94,7 +94,7 @@ describe('<EditDataSourcePage>', () => {
     });
   });
 
-  it('should render the edit page without an issue', () => {
+  it('should render the edit page without an issue', async () => {
     setup(uid, store);
 
     expect(screen.queryByText('Loading ...')).not.toBeInTheDocument();
@@ -107,5 +107,8 @@ describe('<EditDataSourcePage>', () => {
     expect(screen.queryByRole('button', { name: /Delete/i })).toBeVisible();
     expect(screen.queryByRole('button', { name: /Save (.*) test/i })).toBeVisible();
     expect(screen.queryByText('Explore')).toBeVisible();
+
+    // wait for the rest of the async processes to finish
+    expect(await screen.findByText(name)).toBeVisible();
   });
 });

public/app/features/explore/Explore.test.tsx

@@ -125,14 +125,22 @@ const setup = (overrideProps?: Partial<Props>) => {
 };
 
 describe('Explore', () => {
-  it('should not render no data with not started loading state', () => {
+  it('should not render no data with not started loading state', async () => {
     setup();
+
+    // Wait for the Explore component to render
+    await screen.findByText('Explore');
+
     expect(screen.queryByTestId('explore-no-data')).not.toBeInTheDocument();
   });
 
   it('should render no data with done loading state', async () => {
     const queryResp = makeEmptyQueryResponse(LoadingState.Done);
     setup({ queryResponse: queryResp });
+
+    // Wait for the Explore component to render
+    await screen.findByText('Explore');
+
     expect(screen.getByTestId('explore-no-data')).toBeInTheDocument();
   });
 });

public/app/plugins/datasource/azuremonitor/components/MetricsQueryEditor/MetricsQueryEditor.test.tsx

@@ -106,15 +106,14 @@ describe('MetricsQueryEditor', () => {
 
     const resourcePickerButton = await screen.findByRole('button', { name: 'web-server' });
     expect(resourcePickerButton).toBeInTheDocument();
-    resourcePickerButton.click();
+    await userEvent.click(resourcePickerButton);
 
-    await waitFor(() => {
+    await waitFor(async () => {
       expect(screen.queryByText('Loading...')).not.toBeInTheDocument();
-    });
-
       const selection = await screen.findAllByLabelText('web-server');
       expect(selection).toHaveLength(2);
     });
+  });
 
   it('should change resource when a resource is selected in the ResourcePicker', async () => {
     const mockDatasource = createMockDatasource({ resourcePickerData: createMockResourcePickerData() });
@@ -138,17 +137,17 @@ describe('MetricsQueryEditor', () => {
     const resourcePickerButton = await screen.findByRole('button', { name: 'Select a resource' });
     expect(resourcePickerButton).toBeInTheDocument();
     expect(screen.queryByRole('button', { name: 'Expand Primary Subscription' })).not.toBeInTheDocument();
-    resourcePickerButton.click();
+    await userEvent.click(resourcePickerButton);
 
     const subscriptionButton = await screen.findByRole('button', { name: 'Expand Primary Subscription' });
     expect(subscriptionButton).toBeInTheDocument();
     expect(screen.queryByRole('button', { name: 'Expand A Great Resource Group' })).not.toBeInTheDocument();
-    subscriptionButton.click();
+    await userEvent.click(subscriptionButton);
 
     const resourceGroupButton = await screen.findByRole('button', { name: 'Expand A Great Resource Group' });
     expect(resourceGroupButton).toBeInTheDocument();
     expect(screen.queryByLabelText('web-server')).not.toBeInTheDocument();
-    resourceGroupButton.click();
+    await userEvent.click(resourceGroupButton);
 
     const checkbox = await screen.findByLabelText('web-server');
     expect(checkbox).toBeInTheDocument();
@@ -194,13 +193,13 @@ describe('MetricsQueryEditor', () => {
     );
 
     const resourcePickerButton = await screen.findByRole('button', { name: 'Select a resource' });
-    resourcePickerButton.click();
+    await userEvent.click(resourcePickerButton);
 
     const subscriptionButton = await screen.findByRole('button', { name: 'Expand Primary Subscription' });
-    subscriptionButton.click();
+    await userEvent.click(subscriptionButton);
 
     const resourceGroupButton = await screen.findByRole('button', { name: 'Expand A Great Resource Group' });
-    resourceGroupButton.click();
+    await userEvent.click(resourceGroupButton);
 
     const checkbox = await screen.findByLabelText('web-server');
     await userEvent.click(checkbox);
@@ -253,13 +252,13 @@ describe('MetricsQueryEditor', () => {
     );
 
     const resourcePickerButton = await screen.findByRole('button', { name: 'Select a resource' });
-    resourcePickerButton.click();
+    await userEvent.click(resourcePickerButton);
 
     const subscriptionButton = await screen.findByRole('button', { name: 'Expand Primary Subscription' });
-    subscriptionButton.click();
+    await userEvent.click(subscriptionButton);
 
     const resourceGroupButton = await screen.findByRole('button', { name: 'Expand A Great Resource Group' });
-    resourceGroupButton.click();
+    await userEvent.click(resourceGroupButton);
 
     const checkbox = await screen.findByLabelText('web-server');
     await userEvent.click(checkbox);
@@ -288,13 +287,13 @@ describe('MetricsQueryEditor', () => {
     );
 
     const resourcePickerButton = await screen.findByRole('button', { name: 'Select a resource' });
-    resourcePickerButton.click();
+    await userEvent.click(resourcePickerButton);
 
     const subscriptionButton = await screen.findByRole('button', { name: 'Expand Primary Subscription' });
-    subscriptionButton.click();
+    await userEvent.click(subscriptionButton);
 
     const resourceGroupButton = await screen.findByRole('button', { name: 'Expand A Great Resource Group' });
-    resourceGroupButton.click();
+    await userEvent.click(resourceGroupButton);
 
     const checkbox = await screen.findByLabelText('web-server');
     await userEvent.click(checkbox);
@@ -397,20 +396,20 @@ describe('MetricsQueryEditor', () => {
     );
 
     const resourcePickerButton = await screen.findByRole('button', { name: 'Select a resource' });
-    resourcePickerButton.click();
+    await userEvent.click(resourcePickerButton);
 
     const subscriptionButton = await screen.findByRole('button', { name: 'Expand Primary Subscription' });
-    subscriptionButton.click();
+    await userEvent.click(subscriptionButton);
 
     const resourceGroupButton = await screen.findByRole('button', { name: 'Expand A Great Resource Group' });
-    resourceGroupButton.click();
+    await userEvent.click(resourceGroupButton);
 
     const checkbox = await screen.findByLabelText('web-server');
     await userEvent.click(checkbox);
     expect(checkbox).toBeChecked();
 
     const advancedSection = screen.getByText('Advanced');
-    advancedSection.click();
+    await userEvent.click(advancedSection);
 
     const advancedInput = await screen.findByLabelText('Subscription');
     await userEvent.type(advancedInput, 'def-123');
@@ -443,10 +442,10 @@ describe('MetricsQueryEditor', () => {
     );
 
     const resourcePickerButton = await screen.findByRole('button', { name: 'Select a resource' });
-    resourcePickerButton.click();
+    await userEvent.click(resourcePickerButton);
 
     const advancedSection = screen.getByText('Advanced');
-    advancedSection.click();
+    await userEvent.click(advancedSection);
 
     const advancedInput = await screen.findByLabelText('Subscription');
     await userEvent.type(advancedInput, 'def-123');
@@ -458,7 +457,7 @@ describe('MetricsQueryEditor', () => {
     await userEvent.type(rnInput, 'rn');
 
     const applyButton = screen.getByRole('button', { name: 'Apply' });
-    applyButton.click();
+    await userEvent.click(applyButton);
 
     expect(onChange).toBeCalledTimes(1);
     expect(onChange).toBeCalledWith(

public/app/plugins/datasource/tempo/QueryEditor/NativeSearch.test.tsx

@@ -24,6 +24,14 @@ const getOptionsV1 = jest.fn().mockImplementation(() => {
   });
 });
 
+// Have to mock CodeEditor else it causes act warnings
+jest.mock('@grafana/ui', () => ({
+  ...jest.requireActual('@grafana/ui'),
+  CodeEditor: function CodeEditor({ value, onSave }: { value: string; onSave: (newQuery: string) => void }) {
+    return <input data-testid="mockeditor" value={value} onChange={(event) => onSave(event.target.value)} />;
+  },
+}));
+
 jest.mock('../language_provider', () => {
   return jest.fn().mockImplementation(() => {
     return { getOptionsV1 };