test: React 18 act() adjustments

package.json

@@ -141,7 +141,6 @@
     "@svgr/core": "8.0.0",
     "@svgr/plugin-jsx": "^8.0.1",
     "@svgr/plugin-svgo": "^8.0.1",
-    "@testing-library/dom": "^8.12.0",
     "@testing-library/jest-dom": "^5.16.3",
     "@testing-library/react": "^14.0.0",
     "@testing-library/react-16-17": "npm:@testing-library/react@^12.1.5",

src/components/accessibility/skip_link/skip_link.test.tsx

@@ -8,7 +8,7 @@
 
 import React from 'react';
 import { mount } from 'enzyme';
-import { fireEvent } from '@testing-library/dom';
+import { fireEvent } from '@testing-library/react';
 import { render } from '../../../test/rtl';
 import { requiredProps } from '../../../test';
 

src/components/button/button_empty/button_empty.test.tsx

@@ -7,7 +7,7 @@
  */
 
 import React from 'react';
-import { fireEvent } from '@testing-library/dom';
+import { fireEvent } from '@testing-library/react';
 import { render } from '../../../test/rtl';
 import { requiredProps } from '../../../test/required_props';
 import { shouldRenderCustomStyles } from '../../../test/internal';

src/components/button/button_icon/button_icon.test.tsx

@@ -7,7 +7,7 @@
  */
 
 import React from 'react';
-import { fireEvent } from '@testing-library/dom';
+import { fireEvent } from '@testing-library/react';
 import { render } from '../../../test/rtl';
 import { requiredProps } from '../../../test/required_props';
 import { shouldRenderCustomStyles } from '../../../test/internal';

src/components/code/code_block.test.tsx

@@ -9,7 +9,7 @@
 import React, { useState, useEffect } from 'react';
 import ReactDOM from 'react-dom';
 import { mount, render, shallow } from 'enzyme';
-import { act } from 'react-dom/test-utils';
+import { act } from '@testing-library/react';
 import { requiredProps } from '../../test/required_props';
 
 import { EuiCodeBlock, FONT_SIZES, PADDING_SIZES } from './code_block';

src/components/code/code_block_annotations.test.tsx

@@ -8,7 +8,7 @@
 
 import React from 'react';
 
-import { fireEvent } from '@testing-library/dom';
+import { fireEvent } from '@testing-library/react';
 import { render, waitForEuiPopoverOpen } from '../../test/rtl';
 import { shouldRenderCustomStyles } from '../../test/internal';
 import { requiredProps } from '../../test';

src/components/color_picker/color_picker.test.tsx

@@ -8,6 +8,7 @@
 
 import React from 'react';
 import { render, mount } from 'enzyme';
+import { act } from '@testing-library/react';
 
 import { EuiColorPicker } from './color_picker';
 import { VISUALIZATION_COLORS, keys } from '../../services';
@@ -190,15 +191,29 @@ test('popover color selector is hidden when the ESC key pressed', async () => {
     />
   );
 
-  findTestSubject(colorPicker, 'euiColorPickerAnchor').simulate('click');
-  await sleep();
-  findTestSubject(colorPicker, 'euiColorPickerAnchor').simulate('keydown', {
-    key: keys.ENTER,
+  await act(
+    async () =>
+      await findTestSubject(colorPicker, 'euiColorPickerAnchor').simulate(
+        'click'
+      )
+  );
+
+  await act(() => sleep());
+
+  act(() => {
+    findTestSubject(colorPicker, 'euiColorPickerAnchor').simulate('keydown', {
+      key: keys.ENTER,
+    });
   });
-  await sleep();
-  findTestSubject(colorPicker, 'euiColorPickerPopover').simulate('keydown', {
-    key: keys.ESCAPE,
+
+  await act(() => sleep());
+
+  act(() => {
+    findTestSubject(colorPicker, 'euiColorPickerPopover').simulate('keydown', {
+      key: keys.ESCAPE,
+    });
   });
+
   // Portal removal not working with Jest. The blur handler is called just before the portal would be removed.
   expect(onBlurHandler).toBeCalled();
 });

src/components/combo_box/combo_box.test.tsx

@@ -8,6 +8,7 @@
 
 import React, { ReactNode } from 'react';
 import { shallow, render, mount } from 'enzyme';
+import { act } from '@testing-library/react';
 import {
   requiredProps,
   findTestSubject,
@@ -89,7 +90,9 @@ describe('props', () => {
       />
     );
 
-    component.setState({ isListOpen: true });
+    act(() => {
+      component.setState({ isListOpen: true });
+    });
     expect(takeMountedSnapshot(component)).toMatchSnapshot();
   });
 
@@ -282,10 +285,16 @@ describe('behavior', () => {
         />
       );
 
-      component.setState({ searchValue: 'foo' });
-      const searchInput = findTestSubject(component, 'comboBoxSearchInput');
-      searchInput.simulate('focus');
-      searchInput.simulate('keyDown', { key: comboBoxKeys.ENTER });
+      act(() => {
+        component.setState({ searchValue: 'foo' });
+      });
+
+      act(() => {
+        const searchInput = findTestSubject(component, 'comboBoxSearchInput');
+        searchInput.simulate('focus');
+        searchInput.simulate('keyDown', { key: comboBoxKeys.ENTER });
+      });
+
       expect(onCreateOptionHandler).toHaveBeenCalledTimes(1);
       expect(onCreateOptionHandler).toHaveBeenNthCalledWith(1, 'foo', options);
     });
@@ -344,15 +353,20 @@ describe('behavior', () => {
         />
       );
 
-      component.setState({ searchValue: 'foo' });
       const searchInput = findTestSubject(component, 'comboBoxSearchInput');
-      searchInput.simulate('focus');
 
-      const searchInputNode = searchInput.getDOMNode();
-      // React doesn't support `focusout` so we have to manually trigger it
-      searchInputNode.dispatchEvent(
-        new FocusEvent('focusout', { bubbles: true })
-      );
+      act(() => {
+        component.setState({ searchValue: 'foo' });
+        searchInput.simulate('focus');
+      });
+
+      act(() => {
+        const searchInputNode = searchInput.getDOMNode();
+        // React doesn't support `focusout` so we have to manually trigger it
+        searchInputNode.dispatchEvent(
+          new FocusEvent('focusout', { bubbles: true })
+        );
+      });
 
       expect(onCreateOptionHandler).toHaveBeenCalledTimes(1);
       expect(onCreateOptionHandler).toHaveBeenNthCalledWith(1, 'foo', options);

src/components/context_menu/context_menu.test.tsx

@@ -7,11 +7,11 @@
  */
 
 import React from 'react';
+import { act } from '@testing-library/react';
 import { render, mount } from 'enzyme';
 import { requiredProps, takeMountedSnapshot } from '../../test';
 
 import { EuiContextMenu, SIZES } from './context_menu';
-import { setTimeout } from 'timers';
 
 const panel3 = {
   id: 3,
@@ -64,9 +64,7 @@ const panel0 = {
 const panels = [panel0, panel1, panel2, panel3];
 
 export const tick = (ms = 0) =>
-  new Promise((resolve) => {
-    setTimeout(resolve, ms);
-  });
+  act(() => new Promise((resolve) => setTimeout(resolve, ms)));
 
 describe('EuiContextMenu', () => {
   test('is rendered', () => {

src/components/datagrid/body/data_grid_body_custom.test.tsx

@@ -7,7 +7,7 @@
  */
 
 import React, { useEffect } from 'react';
-import { fireEvent } from '@testing-library/dom';
+import { fireEvent } from '@testing-library/react';
 import { render } from '../../../test/rtl';
 
 import { EuiDataGridProps } from '../data_grid_types';

src/components/datagrid/body/data_grid_cell.test.tsx

@@ -7,6 +7,7 @@
  */
 
 import React, { useEffect } from 'react';
+import { act } from '@testing-library/react';
 import { mount, render, ReactWrapper } from 'enzyme';
 import { keys } from '../../../services';
 import { RowHeightUtils } from '../utils/__mocks__/row_heights';
@@ -79,7 +80,9 @@ describe('EuiDataGridCell', () => {
         }}
       />
     );
-    component.setState({ enableInteractions: true });
+    act(() => {
+      component.setState({ enableInteractions: true });
+    });
 
     const getCellActions = () => component.find('EuiDataGridCellActions');
     expect(getCellActions()).toHaveLength(1);
@@ -174,19 +177,29 @@ describe('EuiDataGridCell', () => {
 
       describe('when state changes:', () => {
         it('cellProps', () => {
-          component.setState({ cellProps: {} });
+          act(() => {
+            component.setState({ cellProps: {} });
+          });
         });
         it('isEntered', () => {
-          component.setState({ isEntered: true });
+          act(() => {
+            component.setState({ isEntered: true });
+          });
         });
         it('isFocused', () => {
-          component.setState({ isFocused: true });
+          act(() => {
+            component.setState({ isFocused: true });
+          });
         });
         it('enableInteractions', () => {
-          component.setState({ enableInteractions: true });
+          act(() => {
+            component.setState({ enableInteractions: true });
+          });
         });
         it('disableCellTabIndex', () => {
-          component.setState({ disableCellTabIndex: true });
+          act(() => {
+            component.setState({ disableCellTabIndex: true });
+          });
         });
       });
     });

src/components/datagrid/body/header/data_grid_header_cell_wrapper.test.tsx

@@ -7,7 +7,7 @@
  */
 
 import React from 'react';
-import { act } from 'react-dom/test-utils';
+import { act } from '@testing-library/react';
 import { mount } from 'enzyme';
 
 import { keys } from '../../../../services';

src/components/datagrid/body/header/header_is_interactive.test.ts

@@ -6,7 +6,7 @@
  * Side Public License, v 1.
  */
 
-import { act } from 'react-dom/test-utils';
+import { act } from '@testing-library/react';
 import { testCustomHook } from '../../../../test/internal';
 import { useHeaderIsInteractive } from './header_is_interactive';
 

src/components/datagrid/controls/column_selector.test.tsx

@@ -7,7 +7,7 @@
  */
 
 import React from 'react';
-import { act } from 'react-dom/test-utils';
+import { act } from '@testing-library/react';
 import { shallow, mount, ReactWrapper } from 'enzyme';
 import { findTestSubject, testByReactVersion } from '../../../test';
 

src/components/datagrid/controls/column_sorting.test.tsx

@@ -7,7 +7,7 @@
  */
 
 import React from 'react';
-import { act } from 'react-dom/test-utils';
+import { act } from '@testing-library/react';
 import { mount, ReactWrapper } from 'enzyme';
 import { findTestSubject, testByReactVersion } from '../../../test';
 

src/components/datagrid/controls/display_selector.test.tsx

@@ -7,7 +7,7 @@
  */
 
 import React from 'react';
-import { act } from 'react-dom/test-utils';
+import { act } from '@testing-library/react';
 import { shallow, mount, ShallowWrapper, ReactWrapper } from 'enzyme';
 import { testCustomHook } from '../../../test/internal';
 

src/components/datagrid/controls/fullscreen_selector.test.tsx

@@ -7,7 +7,7 @@
  */
 
 import React from 'react';
-import { act } from 'react-dom/test-utils';
+import { act } from '@testing-library/react';
 import { shallow } from 'enzyme';
 import { keys } from '../../../services';
 import { testCustomHook } from '../../../test/internal';