fix: renderHook imports

scripts/jest/config.js

@@ -63,6 +63,12 @@ if (['16', '17'].includes(reactVersion)) {
   ] = `@testing-library/react-16-17$1`;
   config.moduleNameMapper['^react((\\/.*)?)$'] = `react-${reactVersion}$1`;
 
+  // This import override is here just to make jest module resolver happy.
+  // The import wouldn't actually work if executed on React <18
+  // since there's no such export as react-dom/client on previous
+  // React versions
+  config.moduleNameMapper['^react-dom/client'] = 'react-dom';
+
   config.moduleNameMapper[
     '^react-dom((\\/.*)?)$'
   ] = `react-dom-${reactVersion}$1`;

src/components/datagrid/body/data_grid_row_manager.test.ts

@@ -6,9 +6,9 @@
  * Side Public License, v 1.
  */
 
-import { renderHook } from '@testing-library/react/pure'; // Pure is important here to preserve state between tests
-
 import { useRowManager } from './data_grid_row_manager';
+import { renderHook } from '../../../test/rtl';
+import { EuiDataGridRowManager } from '../data_grid_types';
 
 describe('row manager', () => {
   const mockGridRef = { current: document.createElement('div') } as any;
@@ -131,45 +131,52 @@ describe('row manager', () => {
 
     const initialRowClasses = { 0: 'hello' };
 
-    const { result, rerender } = renderHook(useRowManager, {
-      initialProps: { ...mockArgs, rowClasses: initialRowClasses },
-    });
+    const render = (props: any = {}) =>
+      renderHook(useRowManager, {
+        initialProps: { ...mockArgs, rowClasses: initialRowClasses, ...props },
+      });
 
-    const getRow = (rowIndex: number) =>
-      result.current.getRow({ ...mockRowArgs, rowIndex });
+    const getRow = (manager: EuiDataGridRowManager, rowIndex: number) =>
+      manager.getRow({ ...mockRowArgs, rowIndex });
 
     it('creates rows with the passed gridStyle.rowClasses', () => {
-      expect(getRow(0).classList.contains('hello')).toBe(true);
+      const { result } = render();
+      expect(getRow(result.current, 0).classList.contains('hello')).toBe(true);
     });
 
     it('updates row classes dynamically when gridStyle.rowClasses updates', () => {
+      const { result, rerender } = render();
       rerender({ ...mockArgs, rowClasses: { 0: 'world' } });
-      const row0 = getRow(0);
+
+      const row0 = getRow(result.current, 0);
 
       expect(row0.classList.contains('hello')).toBe(false);
       expect(row0.classList.contains('world')).toBe(true);
     });
 
     it('allows passing multiple classes', () => {
-      rerender({ ...mockArgs, rowClasses: { 0: 'hello world' } });
-      expect(getRow(0).classList.contains('hello')).toBe(true);
-      expect(getRow(0).classList.contains('world')).toBe(true);
+      const { result } = render({ rowClasses: { 0: 'hello world' } });
+      expect(getRow(result.current, 0).classList.contains('hello')).toBe(true);
+      expect(getRow(result.current, 0).classList.contains('world')).toBe(true);
     });
 
     it('adds/removes row classes correctly when gridStyle.rowClasses updates', () => {
+      const { result, rerender } = render();
       rerender({ ...mockArgs, rowClasses: { 1: 'test' } });
-      const row0 = getRow(0);
-      const row1 = getRow(1);
+
+      const row0 = getRow(result.current, 0);
+      const row1 = getRow(result.current, 1);
 
       expect(row0.classList.contains('hello')).toBe(false);
       expect(row0.classList.contains('world')).toBe(false);
       expect(row1.classList.contains('test')).toBe(true);
     });
 
     it('correctly preserves EUI classes when adding/removing classes dynamically', () => {
+      const { result, rerender } = render();
       rerender({ ...mockArgs, rowClasses: undefined });
 
-      expect(getRow(0).classList.value).toEqual(
+      expect(getRow(result.current, 0).classList.value).toEqual(
         'euiDataGridRow euiDataGridRow--striped'
       );
     });

src/components/datagrid/utils/col_widths.test.ts

@@ -6,7 +6,7 @@
  * Side Public License, v 1.
  */
 
-import { renderHook, act } from '@testing-library/react';
+import { renderHook, renderHookAct } from '../../../test/rtl';
 import {
   useDefaultColumnWidth,
   doesColumnHaveAnInitialWidth,
@@ -116,7 +116,7 @@ describe('useColumnWidths', () => {
     it("sets a single column's width in the columnWidths map", () => {
       const { result } = renderHook(() => useColumnWidths(args));
 
-      act(() => result.current.setColumnWidth('c', 125));
+      renderHookAct(() => result.current.setColumnWidth('c', 125));
       expect(result.current.columnWidths).toEqual({ b: 75, c: 125 });
       expect(args.onColumnResize).toHaveBeenCalledWith({
         columnId: 'c',

src/components/datagrid/utils/ref.test.ts

@@ -6,7 +6,7 @@
  * Side Public License, v 1.
  */
 
-import { renderHook } from '@testing-library/react';
+import { renderHook } from '../../../test/rtl';
 import { useCellLocationCheck, useSortPageCheck } from './ref';
 
 // see ref.spec.tsx for E2E useImperativeGridRef tests

src/components/datagrid/utils/sorting.test.ts

@@ -6,7 +6,7 @@
  * Side Public License, v 1.
  */
 
-import { renderHook } from '@testing-library/react';
+import { renderHook } from '../../../test/rtl';
 import { useSorting, type useSortingArgs } from './sorting';
 
 function getDefaultArgs(): useSortingArgs {

src/components/date_picker/super_date_picker/pretty_interval.test.ts

@@ -6,8 +6,7 @@
  * Side Public License, v 1.
  */
 
-import { renderHook } from '@testing-library/react';
-
+import { renderHook } from '../../../test/rtl';
 import { usePrettyInterval } from './pretty_interval';
 
 const IS_NOT_PAUSED = false;

src/components/markdown_editor/markdown_format.styles.test.ts

@@ -6,8 +6,8 @@
  * Side Public License, v 1.
  */
 
-import { renderHook } from '@testing-library/react';
 import { useEuiTheme } from '../../services';
+import { renderHook } from '../../test/rtl';
 
 import { TEXT_SIZES } from '../text/text';
 import { euiMarkdownFormatStyles } from './markdown_format.styles';

src/components/progress/progress.styles.test.ts

@@ -6,8 +6,8 @@
  * Side Public License, v 1.
  */
 
-import { renderHook } from '@testing-library/react';
 import { useEuiTheme } from '../../services';
+import { renderHook } from '../../test/rtl';
 
 import { POSITIONS, COLORS } from './progress';
 import { euiProgressStyles } from './progress.styles';

src/components/text/text.styles.test.ts

@@ -6,8 +6,8 @@
  * Side Public License, v 1.
  */
 
-import { renderHook } from '@testing-library/react';
 import { useEuiTheme } from '../../services';
+import { renderHook } from '../../test/rtl';
 
 import { TEXT_SIZES } from './text';
 import { euiTextStyles } from './text.styles';

src/components/title/title.styles.test.ts

@@ -6,9 +6,8 @@
  * Side Public License, v 1.
  */
 
-import { renderHook } from '@testing-library/react';
-
 import { useEuiTheme } from '../../services';
+import { renderHook } from '../../test/rtl/render_hook';
 
 import { TITLE_SIZES } from './title';
 import { euiTitle } from './title.styles';

src/global_styling/mixins/_color.test.ts

@@ -6,7 +6,7 @@
  * Side Public License, v 1.
  */
 
-import { renderHook } from '@testing-library/react';
+import { renderHook } from '../../test/rtl';
 import {
   BACKGROUND_COLORS,
   useEuiBackgroundColor,

src/global_styling/mixins/_padding.test.ts

@@ -6,7 +6,7 @@
  * Side Public License, v 1.
  */
 
-import { renderHook } from '@testing-library/react';
+import { renderHook } from '../../test/rtl';
 import { PADDING_SIZES, useEuiPaddingSize, useEuiPaddingCSS } from './_padding';
 import { LOGICAL_SIDES } from '../functions/logicals';
 

src/global_styling/mixins/_responsive.test.ts

@@ -6,7 +6,7 @@
  * Side Public License, v 1.
  */
 
-import { renderHook } from '@testing-library/react';
+import { renderHook } from '../../test/rtl';
 import { EuiThemeBreakpoints, _EuiThemeBreakpoint } from '../variables';
 import {
   useEuiBreakpoint,

src/global_styling/mixins/_states.test.ts

@@ -6,7 +6,7 @@
  * Side Public License, v 1.
  */
 
-import { renderHook } from '@testing-library/react';
+import { renderHook } from '../../test/rtl';
 import { useEuiFocusRing } from './_states';
 
 describe('useEuiFocusRing hook returns a string', () => {

src/global_styling/mixins/_typography.test.ts

@@ -6,7 +6,7 @@
  * Side Public License, v 1.
  */
 
-import { renderHook } from '@testing-library/react';
+import { renderHook } from '../../test/rtl';
 
 import { useEuiTheme } from '../../services';
 import { EuiThemeFontScales, EuiThemeFontUnits } from '../variables/typography';

src/global_styling/utility/utility.test.ts

@@ -6,7 +6,7 @@
  * Side Public License, v 1.
  */
 
-import { renderHook } from '@testing-library/react';
+import { renderHook } from '../../test/rtl';
 import { useEuiTheme } from '../../services';
 import { globalStyles } from './utility';
 

src/services/hooks/useDeepEqual.test.ts

@@ -6,8 +6,7 @@
  * Side Public License, v 1.
  */
 
-import { renderHook } from '@testing-library/react';
-
+import { renderHook } from '../../test/rtl';
 import { useDeepEqual } from './useDeepEqual';
 
 describe('useDeepEqual', () => {

src/themes/amsterdam/global_styling/mixins/button.test.ts

@@ -6,8 +6,7 @@
  * Side Public License, v 1.
  */
 
-import { renderHook } from '@testing-library/react';
-
+import { renderHook } from '../../../../test/rtl';
 import {
   useEuiButtonColorCSS,
   BUTTON_DISPLAYS,