[Concurrent React@18] Switch testing library to createRoot

src/core/packages/application/browser-internal/integration_tests/application_service.test.tsx

@@ -351,6 +351,9 @@ describe('ApplicationService', () => {
 
       await act(async () => {
         await navigate('/app/app1');
+      });
+
+      await act(async () => {
         await navigateToApp('app2');
       });
 
@@ -422,6 +425,9 @@ describe('ApplicationService', () => {
 
       await act(async () => {
         await navigate('/app/app1');
+      });
+
+      await act(async () => {
         await navigateToApp('app2');
       });
 

src/platform/packages/private/kbn-esql-editor/src/editor_footer/history_starred_queries.test.tsx

@@ -18,6 +18,7 @@ import {
   HistoryAndStarredQueriesTabs,
 } from './history_starred_queries';
 import { of } from 'rxjs';
+import { act } from 'react-dom/test-utils';
 
 jest.mock('../history_local_storage', () => {
   const module = jest.requireActual('../history_local_storage');
@@ -269,7 +270,9 @@ describe('Starred and History queries components', () => {
         </KibanaContextProvider>
       );
       // click the starred queries tab
-      screen.getByTestId('starred-queries-tab').click();
+      act(() => {
+        screen.getByTestId('starred-queries-tab').click();
+      });
 
       expect(screen.getByTestId('ESQLEditor-starredQueries')).toBeInTheDocument();
       expect(screen.getByTestId('ESQLEditor-history-starred-queries-helpText')).toHaveTextContent(

src/platform/packages/private/kbn-react-mute-legacy-root-warning/index.ts

@@ -8,14 +8,14 @@
  */
 
 /* eslint-disable no-console */
-const originalConsoleError = console.error;
 
 /**
  * After we upgrade to React 18, we will see a warning in the console that we are using the legacy ReactDOM.render API.
  * This warning is expected as we are in the process of migrating to the new createRoot API.
  * However, it is very noisy and we want to mute it for now.
  */
 export function muteLegacyRootWarning() {
+  const originalConsoleError = console.error;
   console.error = (message, ...args) => {
     if (
       typeof message === 'string' &&
@@ -28,4 +28,9 @@ export function muteLegacyRootWarning() {
 
     originalConsoleError.call(console, message, ...args);
   };
+
+  /* unmute */
+  return () => {
+    console.error = originalConsoleError;
+  };
 }

src/platform/packages/shared/kbn-discover-contextual-components/src/data_types/logs/components/summary_column/summary_column.test.tsx

@@ -10,6 +10,7 @@
 import React from 'react';
 import { fieldFormatsMock } from '@kbn/field-formats-plugin/common/mocks';
 import { render, screen } from '@testing-library/react';
+import { userEvent } from '@testing-library/user-event';
 import SummaryColumn, {
   AllSummaryColumnProps,
   SummaryCellPopover,
@@ -151,11 +152,13 @@ describe('SummaryColumn', () => {
       expect(screen.queryByText('+2')).not.toBeInTheDocument();
     });
 
-    it('should display a popover with details and actions upon a badge click', () => {
+    it('should display a popover with details and actions upon a badge click', async () => {
       const record = getBaseRecord();
       renderSummary(record);
       // Open badge popover
-      screen.getByTestId(`dataTableCellActionsPopover_${constants.SERVICE_NAME_FIELD}`).click();
+      await userEvent.click(
+        screen.getByTestId(`dataTableCellActionsPopover_${constants.SERVICE_NAME_FIELD}`)
+      );
 
       expect(screen.getByTestId('dataTableCellActionPopoverTitle')).toHaveTextContent(
         'service.name synth-service-2'

src/platform/packages/shared/kbn-field-utils/src/components/field_description/field_description.test.tsx

@@ -10,6 +10,7 @@
 import React from 'react';
 import { FieldDescription } from './field_description';
 import { render, screen } from '@testing-library/react';
+import { userEvent } from '@testing-library/user-event';
 import { FieldsMetadataPublicStart } from '@kbn/fields-metadata-plugin/public';
 import { SHOULD_TRUNCATE_FIELD_DESCRIPTION_LOCALSTORAGE_KEY } from './field_description';
 
@@ -51,12 +52,16 @@ describe('FieldDescription', () => {
     const customDescription = 'test this long desc '.repeat(8).trim();
     render(<FieldDescription field={{ name: 'bytes', type: 'number', customDescription }} />);
     expect(screen.queryByTestId('fieldDescription-bytes')).toHaveTextContent(customDescription);
-    screen.queryByTestId('toggleFieldDescription-bytes')?.click();
+
+    await userEvent.click(screen.getByTestId('toggleFieldDescription-bytes'));
+
     expect(screen.queryByTestId('fieldDescription-bytes')).toHaveTextContent(
       `${customDescription}View less`
     );
     expect(mockSetLocalStorage).toHaveBeenCalledWith(false);
-    screen.queryByTestId('toggleFieldDescription-bytes')?.click();
+
+    await userEvent.click(screen.getByTestId('toggleFieldDescription-bytes'));
+
     expect(screen.queryByTestId('fieldDescription-bytes')).toHaveTextContent(customDescription);
     expect(mockSetLocalStorage).toHaveBeenCalledWith(true);
   });

src/platform/packages/shared/kbn-test/src/jest/resolver.js

@@ -70,13 +70,6 @@ module.exports = (request, options) => {
     });
   }
 
-  // This is a workaround to run tests with React 17 and the latest @testing-library/react
-  // This will be removed once we upgrade to React 18 and start transitioning to the Concurrent Mode
-  // Tracking issue to clean this up https://github.com/elastic/kibana/issues/199100
-  if (request === 'react-dom/client') {
-    return Path.resolve(__dirname, 'mocks/react_dom_client_mock.ts');
-  }
-
   if (request === `elastic-apm-node`) {
     return APM_AGENT_MOCK;
   }

src/platform/packages/shared/kbn-test/src/jest/setup/enzyme.js

@@ -37,5 +37,15 @@ jest.mock('enzyme', () => {
       mockEnsureEmotionStyleTag();
       return actual.render(node, options);
     },
+    mount: (node, options) => {
+      // Since we're using React 17 enzyme adapter, we need to mute the warning about using legacy root API
+      // Otherwise console will be flooded with warnings
+      const unmute = require('@kbn/react-mute-legacy-root-warning').muteLegacyRootWarning();
+      try {
+        return actual.mount(node, options);
+      } finally {
+        unmute();
+      }
+    },
   };
 });

src/platform/packages/shared/kbn-test/src/jest/setup/react_testing_library.js

@@ -16,48 +16,22 @@ import '@testing-library/jest-dom';
  * But since newer versions it has stabilised itself
  */
 import { configure } from '@testing-library/react';
-import { version as REACT_VERSION } from 'react';
-import { muteLegacyRootWarning } from '@kbn/react-mute-legacy-root-warning';
 
 // instead of default 'data-testid', use kibana's 'data-test-subj'
 configure({ testIdAttribute: 'data-test-subj', asyncUtilTimeout: 4500 });
 
 /* eslint-env jest */
 
-// This is a workaround to run tests with React 17 and the latest @testing-library/react
-// Tracking issue to clean this up https://github.com/elastic/kibana/issues/199100
-jest.mock('@testing-library/react', () => {
-  const actual = jest.requireActual('@testing-library/react');
-
-  return {
-    ...actual,
-    render: (ui, options) => actual.render(ui, { ...options, legacyRoot: true }),
-    renderHook: (render, options) => actual.renderHook(render, { ...options, legacyRoot: true }),
-  };
-});
-
 const consoleFilters = [
   /^The above error occurred in the <.*?> component:/, // error boundary output
   /^Error: Uncaught .+/, // jsdom output
 ];
 
-// This is a workaround to run tests with React 17 and the latest @testing-library/react
-// And prevent the act warnings that were supposed to be muted by @testing-library
-// The testing library mutes the act warnings in some cases by setting IS_REACT_ACT_ENVIRONMENT which is React@18 feature https://github.com/testing-library/react-testing-library/pull/1137/
-// Using this console override we're muting the act warnings as well
-// Tracking issue to clean this up https://github.com/elastic/kibana/issues/199100
-// NOTE: we're not muting all the act warnings but only those that testing-library wanted to mute
 const originalConsoleError = console.error;
 console.error = (...args) => {
   const message = args[0]?.toString();
 
-  if (global.IS_REACT_ACT_ENVIRONMENT === false) {
-    if (message.includes('Warning: An update to %s inside a test was not wrapped in act')) {
-      return;
-    }
-  }
-
-  // Additionally this is a restoration of the original console.error suppression
+  // This is a restoration of the original console.error suppression
   // expected by the usage of renderHook from react-hooks-testing-library
   // which has been moved into latest react-testing-library but the suppression
   // of the console.error was not moved with it.
@@ -72,13 +46,3 @@ console.error = (...args) => {
 
   originalConsoleError(...args);
 };
-
-/**
- * After we upgrade to React 18, we will see a warning in the console that we are using the legacy ReactDOM.render API.
- * This warning is expected as we are in the process of migrating to the new createRoot API.
- * However, it is very noisy and we want to mute it for now.
- * Tracking issue to clean this up https://github.com/elastic/kibana/issues/199100
- */
-if (REACT_VERSION.startsWith('18.')) {
-  muteLegacyRootWarning();
-}

src/platform/packages/shared/kbn-unified-data-table/src/components/custom_control_columns/additional_row_control/row_menu_control_column.test.tsx

@@ -14,13 +14,14 @@ import { getRowMenuControlColumn } from './row_menu_control_column';
 import { dataTableContextMock } from '../../../../__mocks__/table_context';
 import { mockRowAdditionalLeadingControls } from '../../../../__mocks__/external_control_columns';
 import { UnifiedDataTableContext } from '../../../table_context';
+import userEvent from '@testing-library/user-event';
 
 describe('getRowMenuControlColumn', () => {
   const contextMock = {
     ...dataTableContextMock,
   };
 
-  it('should render the component', () => {
+  it('should render the component', async () => {
     const mockClick = jest.fn();
     const props = {
       id: 'test_row_menu_control',
@@ -57,15 +58,16 @@ describe('getRowMenuControlColumn', () => {
     const menuButton = screen.getByTestId('unifiedDataTable_test_row_menu_control');
     expect(menuButton).toBeInTheDocument();
 
-    menuButton.click();
+    await userEvent.click(menuButton);
 
     expect(screen.getByTestId('exampleRowControl-visBarVerticalStacked')).toBeInTheDocument();
     expect(screen.getByTestId('exampleRowControl-heart')).toBeInTheDocument();
 
     const button = screen.getByTestId('unifiedDataTable_rowMenu_test_row_menu_control');
     expect(button).toBeInTheDocument();
 
-    button.click();
+    await userEvent.click(button);
+
     expect(mockClick).toHaveBeenCalledWith({ record: contextMock.getRowByIndex(1), rowIndex: 1 });
   });
 });

src/platform/packages/shared/kbn-unified-data-table/src/components/data_table.test.tsx

@@ -1555,7 +1555,7 @@ describe('UnifiedDataTable', () => {
 
         expect(screen.getByTestId(BUTTON_TEST_SUBJ)).toBeInTheDocument();
 
-        screen.getByTestId(BUTTON_TEST_SUBJ).click();
+        await userEvent.click(screen.getByTestId(BUTTON_TEST_SUBJ));
 
         expect(screen.getByTestId(INPUT_TEST_SUBJ)).toBeInTheDocument();
 

src/platform/packages/shared/kbn-unified-data-table/src/components/data_table_document_selection.test.tsx

@@ -27,6 +27,7 @@ import { getDocId } from '@kbn/discover-utils';
 import { render, screen } from '@testing-library/react';
 import { __IntlProvider as IntlProvider } from '@kbn/i18n-react';
 import { servicesMock } from '../../__mocks__/services';
+import userEvent from '@testing-library/user-event';
 
 describe('document selection', () => {
   describe('getDocId', () => {
@@ -409,7 +410,7 @@ describe('document selection', () => {
       return {
         getButton: async () => {
           const menuButton = await screen.findByTestId('unifiedDataTableSelectionBtn');
-          menuButton.click();
+          await userEvent.click(menuButton);
           return screen.queryByRole('button', { name: /Compare/ });
         },
       };

src/platform/packages/shared/kbn-unified-doc-viewer/src/components/doc_viewer/doc_viewer.test.tsx

@@ -9,7 +9,7 @@
 
 import React from 'react';
 import { mount, shallow } from 'enzyme';
-import { render, screen } from '@testing-library/react';
+import { act, render, screen } from '@testing-library/react';
 import { findTestSubject } from '@elastic/eui/lib/test';
 import { buildDataTableRecord } from '@kbn/discover-utils';
 import { DocViewer, INITIAL_TAB } from './doc_viewer';
@@ -88,13 +88,17 @@ describe('<DocViewer />', () => {
     expect(screen.getByTestId('docViewerTab-test1').getAttribute('aria-selected')).toBe('true');
     expect(screen.getByTestId('docViewerTab-test2').getAttribute('aria-selected')).toBe('false');
 
-    screen.getByTestId('docViewerTab-test2').click();
+    act(() => {
+      screen.getByTestId('docViewerTab-test2').click();
+    });
 
     expect(screen.getByTestId('docViewerTab-test1').getAttribute('aria-selected')).toBe('false');
     expect(screen.getByTestId('docViewerTab-test2').getAttribute('aria-selected')).toBe('true');
     expect(mockSetLocalStorage).toHaveBeenCalledWith('kbn_doc_viewer_tab_test2');
 
-    screen.getByTestId('docViewerTab-test1').click();
+    act(() => {
+      screen.getByTestId('docViewerTab-test1').click();
+    });
 
     expect(screen.getByTestId('docViewerTab-test1').getAttribute('aria-selected')).toBe('true');
     expect(screen.getByTestId('docViewerTab-test2').getAttribute('aria-selected')).toBe('false');

src/platform/packages/shared/kbn-unified-tabs/src/components/tab/tab.test.tsx

@@ -8,7 +8,7 @@
  */
 
 import React from 'react';
-import { render, screen, waitFor } from '@testing-library/react';
+import { act, render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { Tab } from './tab';
 import { MAX_TAB_WIDTH, MIN_TAB_WIDTH } from '../../constants';
@@ -96,7 +96,9 @@ describe('Tab', () => {
     );
 
     const tabMenuButton = screen.getByTestId(`unifiedTabs_tabMenuBtn_${tabItem.id}`);
-    tabMenuButton.click();
+    act(() => {
+      tabMenuButton.click();
+    });
 
     expect(getTabMenuItems).toHaveBeenCalledWith(tabItem);
 

src/platform/packages/shared/presentation/presentation_publishing/publishing_subject/publishing_subject.test.tsx

@@ -256,7 +256,7 @@ describe('publishing subject', () => {
           screen.getByText('value1: 1, value2: 1, value3: 1, value4: 1, value5: 1, value6: 1')
         ).toBeInTheDocument();
       });
-      expect(renderCount).toBe(7);
+      expect(renderCount).toBe(2);
     });
   });
 

src/platform/packages/shared/response-ops/alerts-fields-browser/components/categories_selector/categories_selector.test.tsx

@@ -12,6 +12,7 @@ import { render } from '@testing-library/react';
 import { waitForEuiPopoverOpen } from '@elastic/eui/lib/test/rtl';
 import { mockBrowserFields } from '../../mock';
 import { CategoriesSelector } from './categories_selector';
+import userEvent from '@testing-library/user-event';
 
 const mockSetSelectedCategoryIds = jest.fn();
 const defaultProps = {
@@ -70,10 +71,10 @@ describe('CategoriesSelector', () => {
   it('should call setSelectedCategoryIds when category selected', async () => {
     const result = render(<CategoriesSelector {...defaultProps} />);
 
-    result.getByTestId('categories-filter-button').click();
+    await userEvent.click(result.getByTestId('categories-filter-button'));
     await waitForEuiPopoverOpen();
 
-    result.getByTestId(`categories-selector-option-base`).click();
+    await userEvent.click(result.getByTestId(`categories-selector-option-base`));
     expect(mockSetSelectedCategoryIds).toHaveBeenCalledWith(['base']);
   });
 });