[React 18] Fix cross-version compatibility and unit test errors

cypress/support/setup/mount.tsx

@@ -7,7 +7,7 @@
  */
 
 import React, { ReactNode } from 'react';
-import { EuiProvider } from '../../../src';
+import { EuiProvider, EuiProviderProps } from '../../../src';
 import type { mount } from '@cypress/react18';
 
 // Pick cypress mount function based on which React version is currently being
@@ -20,8 +20,16 @@ if (process.env.REACT_VERSION === '18') {
   cypressMount = require('@cypress/react').mount;
 }
 
-const mountCommand = (children: ReactNode): ReturnType<typeof mount> => {
-  return cypressMount(<EuiProvider>{children}</EuiProvider>);
+export interface MountOptions {
+  providerProps?: Partial<EuiProviderProps<any>>;
+}
+
+const mountCommand = (
+  children: ReactNode,
+  options: MountOptions = {}
+): ReturnType<typeof mount> => {
+  const { providerProps } = options;
+  return cypressMount(<EuiProvider {...providerProps}>{children}</EuiProvider>);
 };
 
 // Export only the type to not confuse code-completion tools

scripts/jest/config.js

@@ -61,6 +61,7 @@ if (['16', '17'].includes(reactVersion)) {
     '^@testing-library/react((\\\\/.*)?)$'
   ] = `@testing-library/react-16-17$1`;
   config.moduleNameMapper['^react((\\/.*)?)$'] = `react-${reactVersion}$1`;
+
   config.moduleNameMapper[
     '^react-dom((\\/.*)?)$'
   ] = `react-dom-${reactVersion}$1`;

src-docs/src/views/datagrid/advanced/custom_renderer.tsx

@@ -169,15 +169,22 @@ export default () => {
 
   // Pagination
   const [pagination, setPagination] = useState({ pageIndex: 0, pageSize: 10 });
-  const onChangePage = useCallback<EuiDataGridPaginationProps['onChangePage']>((pageIndex) => {
-    setPagination((pagination) => ({ ...pagination, pageIndex }));
-  }, []);
-  const onChangePageSize = useCallback<EuiDataGridPaginationProps['onChangeItemsPerPage']>((pageSize) => {
+  const onChangePage = useCallback<EuiDataGridPaginationProps['onChangePage']>(
+    (pageIndex) => {
+      setPagination((pagination) => ({ ...pagination, pageIndex }));
+    },
+    []
+  );
+  const onChangePageSize = useCallback<
+    EuiDataGridPaginationProps['onChangeItemsPerPage']
+  >((pageSize) => {
     setPagination((pagination) => ({ ...pagination, pageSize }));
   }, []);
 
   // Sorting
-  const [sortingColumns, setSortingColumns] = useState<EuiDataGridColumnSortingConfig[]>([]);
+  const [sortingColumns, setSortingColumns] = useState<
+    EuiDataGridColumnSortingConfig[]
+  >([]);
   const onSort = useCallback<EuiDataGridSorting['onSort']>((sortingColumns) => {
     setSortingColumns(sortingColumns);
   }, []);

src-docs/src/views/datagrid/styling/row_height_fixed.tsx

@@ -149,15 +149,19 @@ export default () => {
   const [pagination, setPagination] = useState({ pageIndex: 0, pageSize: 50 });
 
   // Sorting
-  const [sortingColumns, setSortingColumns] = useState<EuiDataGridColumnSortingConfig[]>([]);
+  const [sortingColumns, setSortingColumns] = useState<
+    EuiDataGridColumnSortingConfig[]
+  >([]);
   const onSort = useCallback<EuiDataGridSorting['onSort']>(
     (sortingColumns) => {
       setSortingColumns(sortingColumns);
     },
     [setSortingColumns]
   );
 
-  const onChangeItemsPerPage = useCallback<EuiDataGridPaginationProps['onChangeItemsPerPage']>(
+  const onChangeItemsPerPage = useCallback<
+    EuiDataGridPaginationProps['onChangeItemsPerPage']
+  >(
     (pageSize) =>
       setPagination((pagination) => ({
         ...pagination,

src-docs/src/views/theme/color_mode/inverse.tsx

@@ -1,8 +1,4 @@
-import React, {
-  useState,
-  FC,
-  PropsWithChildren,
-} from 'react';
+import React, { useState, FC, PropsWithChildren } from 'react';
 import {
   EuiThemeProvider,
   useEuiTheme,

src-docs/src/views/theme/typography/_typography_js.tsx

@@ -218,7 +218,7 @@ export const FontScaleJS = () => {
 };
 
 interface FontScaleDetails {
-  id: typeof EuiThemeFontScales[number];
+  id: (typeof EuiThemeFontScales)[number];
   value: string;
   size: string;
   lineHeight: string;

src-docs/src/views/theme/typography/_typography_sass.tsx

@@ -166,7 +166,7 @@ export const FontWeightSass: FunctionComponent<ThemeRowType> = ({
 };
 
 interface FontWeightDetails {
-  id: typeof euiFontWeights[number];
+  id: (typeof euiFontWeights)[number];
   token: string;
   value: number;
 }
@@ -250,7 +250,7 @@ export const FontScaleSass = () => {
 };
 
 interface FontSizesDetails {
-  id: typeof euiFontSizes[number];
+  id: (typeof euiFontSizes)[number];
   token: string;
   mixin: string;
   value: string;

src/components/breadcrumbs/breadcrumb.tsx

@@ -58,7 +58,8 @@ export type EuiBreadcrumbProps = Omit<
   };
 
 // Used internally only by the parent EuiBreadcrumbs
-type _EuiBreadcrumbProps = PropsWithChildren & Pick<EuiBreadcrumbProps, 'truncate'> & {
+type _EuiBreadcrumbProps = PropsWithChildren &
+  Pick<EuiBreadcrumbProps, 'truncate'> & {
     type: 'page' | 'application';
     isFirstBreadcrumb?: boolean;
     isLastBreadcrumb?: boolean;

src/components/code/utils.test.tsx

@@ -8,7 +8,7 @@
 
 import React from 'react';
 import { shallow } from 'enzyme';
-import { renderHook } from '@testing-library/react-hooks';
+import { renderHook } from '../../test/rtl';
 import { useEuiTheme } from '../../services';
 
 import {

src/components/combo_box/combo_box.test.tsx

@@ -7,10 +7,9 @@
  */
 
 import React, { ReactNode } from 'react';
-import { fireEvent } from '@testing-library/react';
+import { act, fireEvent } from '@testing-library/react';
 import { shallow, mount } from 'enzyme';
 import { render } from '../../test/rtl';
-import { act } from '@testing-library/react';
 import {
   requiredProps,
   findTestSubject,
@@ -139,7 +138,10 @@ describe('props', () => {
 
     test('renders in the options dropdown', () => {
       const component = mount(<EuiComboBox options={options} />);
-      component.setState({ isListOpen: true });
+
+      act(() => {
+        component.setState({ isListOpen: true });
+      });
 
       const dropdown = component.find(
         'div[data-test-subj="comboBoxOptionsList"]'

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

@@ -7,7 +7,7 @@
  */
 
 import React from 'react';
-import { renderHook, act } from '@testing-library/react-hooks';
+import { renderHook, renderHookAct } from '../../../test/rtl';
 import { shallow } from 'enzyme';
 
 import { keys } from '../../../services';
@@ -21,7 +21,7 @@ describe('useCellPopover', () => {
       const { result } = renderHook(useCellPopover);
       expect(result.current.cellPopoverContext.popoverIsOpen).toEqual(false);
 
-      act(() =>
+      renderHookAct(() =>
         result.current.cellPopoverContext.openCellPopover({
           rowIndex: 0,
           colIndex: 0,
@@ -34,7 +34,7 @@ describe('useCellPopover', () => {
       const { result } = renderHook(useCellPopover);
       expect(result.current.cellPopover).toBeFalsy();
 
-      act(() => {
+      renderHookAct(() => {
         result.current.cellPopoverContext.openCellPopover({
           rowIndex: 0,
           colIndex: 0,
@@ -45,7 +45,7 @@ describe('useCellPopover', () => {
       });
       expect(result.current.cellPopover).not.toBeFalsy();
 
-      act(() => {
+      renderHookAct(() => {
         result.current.cellPopoverContext.openCellPopover({
           rowIndex: 0,
           colIndex: 0,
@@ -59,15 +59,15 @@ describe('useCellPopover', () => {
     it('sets popoverIsOpen state to false', () => {
       const { result } = renderHook(useCellPopover);
 
-      act(() =>
+      renderHookAct(() =>
         result.current.cellPopoverContext.openCellPopover({
           rowIndex: 0,
           colIndex: 0,
         })
       );
       expect(result.current.cellPopoverContext.popoverIsOpen).toEqual(true);
 
-      act(() => result.current.cellPopoverContext.closeCellPopover());
+      renderHookAct(() => result.current.cellPopoverContext.closeCellPopover());
       expect(result.current.cellPopoverContext.popoverIsOpen).toEqual(false);
     });
   });
@@ -80,7 +80,7 @@ describe('useCellPopover', () => {
     const populateCellPopover = (
       cellPopoverContext: DataGridCellPopoverContextShape
     ) => {
-      act(() => {
+      renderHookAct(() => {
         cellPopoverContext.openCellPopover({ colIndex: 0, rowIndex: 0 });
         cellPopoverContext.setPopoverAnchor(mockPopoverAnchor);
         cellPopoverContext.setPopoverContent(mockPopoverContent);
@@ -149,7 +149,7 @@ describe('useCellPopover', () => {
           preventDefault: jest.fn(),
           stopPropagation: jest.fn(),
         };
-        act(() => {
+        renderHookAct(() => {
           component.find('EuiWrappingPopover').simulate('keyDown', event);
         });
         expect(event.preventDefault).toHaveBeenCalled();
@@ -168,7 +168,7 @@ describe('useCellPopover', () => {
           preventDefault: jest.fn(),
           stopPropagation: jest.fn(),
         };
-        act(() => {
+        renderHookAct(() => {
           component.find('EuiWrappingPopover').simulate('keyDown', event);
         });
         expect(event.preventDefault).toHaveBeenCalled();
@@ -187,7 +187,7 @@ describe('useCellPopover', () => {
           preventDefault: jest.fn(),
           stopPropagation: jest.fn(),
         };
-        act(() => {
+        renderHookAct(() => {
           component.find('EuiWrappingPopover').simulate('keyDown', event);
         });
         expect(event.preventDefault).not.toHaveBeenCalled();