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 },
           },
         };
-        $('div.graph-panel__chart').trigger('plothover', [eventArgs.pos, eventArgs.activeItem]);
+        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
-        $('div.graph-panel__chart').trigger('plothover', [eventArgs.pos, eventArgs.activeItem]);
+        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);