[8.19] Backward compatible testing library changes for switching to createRoot (elastic#213367) (elastic#220500)

# Backport

This will backport the following commits from `main` to `8.19`:
- [[Concurrent React@18] Switch testing library to `createRoot`
(elastic#213367)](elastic#213367), but without
actually enabling concurrent root for tests. Just the backward
compatible unit test fixes

<!--- Backport version: 9.6.6 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sorenlouv/backport)

<!--BACKPORT [{"author":{"name":"Anton
Dosov","email":"[email protected]"},"sourceCommit":{"committedDate":"2025-05-08T11:59:44Z","message":"[Concurrent
React@18] Switch testing library to `createRoot` (elastic#213367)\n\nCloses
elastic#218076. \nPart of the
preparation for migrating Kibana to React’s
createRoot\n([Epic](https://github.com/elastic/kibana-team/issues/1564)).\n\n##
What’s in this PR\n\n- Switch to `createRoot` in tests: Updates
`@testing-library/react` to\nuse `createRoot` by default. All unit tests
using Testing Library now\nrun in concurrent mode. See
commit:\nhttps://github.com/elastic/pull/213367/commits/8e51e07054ab5d0993e9856a851c55716e90190b\n-
Test updates: Most test failures from the switch have been
addressed.\nAbout a dozen tests still explicitly set `legacyRoot: true`.
These will\nneed closer review by the owning teams during app
migrations.\n- Enzyme tests: Enzyme tests continue to use the React 17
adapter and\nrun in legacy mode.
[Current\nplan](https://docs.google.com/document/d/1CXybQiBAtXt3Kay0j_CJxWO7bZ2EYYhaveK4fban2-M/edit?tab=t.kfgvma8ti7q0)\nis
to migrate away from Enzyme before upgrading to React 19.\n\n##
Background\n\nWhen we upgraded to React 18, we also updated
`@testing-library/react`,\nwhich by default uses `createRoot`.\nTo avoid
dealing with concurrent mode failures early, we temporarily\nforced
Testing Library to use `legacyRoot` (`ReactDOM.render`).\n\nThis PR
removes that override and fixes the resulting test issues,\ncompleting
the move to concurrent root for Testing Library tests.\n\n\n### Common
Failures\n\n#### 🔴 `el.click()` \n\nA common testing mistake is using
el.click() and immediately checking\nfor a DOM
update:\n```\nel.click();\nexpect(el).toHaveAttribute('state-updated');\n```\n\nThis
often fails with Concurrent React, because state updates might not\nbe
synchronous anymore.\nDirectly calling `el.click()` doesn't
automatically trigger React’s\nupdate cycle (`act`), so your test can
read outdated DOM.\n\nInstead, you should either manually wrap the
interaction in `act`, or\n(better) use `userEvent.click`, which already
uses `act` internally and\nsimulates real user behavior more
accurately:\n\n```diff\n- el.click();\n+ await
userEvent.click(el);\nexpect(el).toHaveAttribute('state-updated');\n```\n\n\n####
🔴 Wrapping `render` call inside `act` `act(() =>
render(<App/>))`\n\nAnother common mistake is wrapping the render call
inside act:\n\n```\nawait act(async () => {\n render(<MyComponent
/>);\n});\n```\n\nThis is sometimes done to \"mute\" warnings about
Promises resolving\ninside `useEffect`.\nHowever, wrapping `render` in
`act` manually breaks a lot of tests in\nConcurrent React, because the
library (like React Testing Library)\nalready wraps render in act
internally. Manually adding act here can\ncause unexpected behavior,
like missing updates or wrong timing.\n\nThe approach I took was to
remove the manual `act` around `render` in\nplaces where tests started
failing with Concurrent React, even if, in\nsome cases, it means seeing
`act` warnings in the console. This is safer\nfor correctness and allows
the tests to pass reliably.\n\nTo properly mute such warnings, the right
way would be to wrap the\nactual resolved Promises (like those inside
useEffect) in act.However,\nsince doing that depends a lot on the
specific test setup, and could\nvary case-by-case, I chose not to try to
fix it myself. Teams are\nwelcome to follow up if they wish.\n\n### 🟡 In
specific tests we keep `legacyMode: true`\n\nWhen it wasn't immediately
clear to me what caused the failure or when\nthe tests were checking
React internals, like the number of re-renders,\nI decided to keep that
test running in legacy mode by using the option\n`legacyRoot: true` in
`render`.\n\nThe idea behind these in-place overrides is that when we're
ready to\nstart migrating the runtime to concurrent mode, the owning
teams will\nneed to take a closer look at those tests when moving their
apps to the\nconcurrent
root.","sha":"24d4c8aa0b60156e87a614bae5e7d6489c8c5972","branchLabelMapping":{"^v9.1.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","backport:skip","Team:Fleet","Team:SharedUX","ci:project-deploy-observability","Team:obs-ux-infra_services","Team:obs-ux-management","React@18","v9.1.0","v8.19.0"],"title":"[Concurrent
React@18] Switch testing library to `createRoot`
","number":213367,"url":"https://github.com/elastic/kibana/pull/213367","mergeCommit":{"message":"[Concurrent
React@18] Switch testing library to `createRoot` (elastic#213367)\n\nCloses
elastic#218076. \nPart of the
preparation for migrating Kibana to React’s
createRoot\n([Epic](https://github.com/elastic/kibana-team/issues/1564)).\n\n##
What’s in this PR\n\n- Switch to `createRoot` in tests: Updates
`@testing-library/react` to\nuse `createRoot` by default. All unit tests
using Testing Library now\nrun in concurrent mode. See
commit:\nhttps://github.com/elastic/pull/213367/commits/8e51e07054ab5d0993e9856a851c55716e90190b\n-
Test updates: Most test failures from the switch have been
addressed.\nAbout a dozen tests still explicitly set `legacyRoot: true`.
These will\nneed closer review by the owning teams during app
migrations.\n- Enzyme tests: Enzyme tests continue to use the React 17
adapter and\nrun in legacy mode.
[Current\nplan](https://docs.google.com/document/d/1CXybQiBAtXt3Kay0j_CJxWO7bZ2EYYhaveK4fban2-M/edit?tab=t.kfgvma8ti7q0)\nis
to migrate away from Enzyme before upgrading to React 19.\n\n##
Background\n\nWhen we upgraded to React 18, we also updated
`@testing-library/react`,\nwhich by default uses `createRoot`.\nTo avoid
dealing with concurrent mode failures early, we temporarily\nforced
Testing Library to use `legacyRoot` (`ReactDOM.render`).\n\nThis PR
removes that override and fixes the resulting test issues,\ncompleting
the move to concurrent root for Testing Library tests.\n\n\n### Common
Failures\n\n#### 🔴 `el.click()` \n\nA common testing mistake is using
el.click() and immediately checking\nfor a DOM
update:\n```\nel.click();\nexpect(el).toHaveAttribute('state-updated');\n```\n\nThis
often fails with Concurrent React, because state updates might not\nbe
synchronous anymore.\nDirectly calling `el.click()` doesn't
automatically trigger React’s\nupdate cycle (`act`), so your test can
read outdated DOM.\n\nInstead, you should either manually wrap the
interaction in `act`, or\n(better) use `userEvent.click`, which already
uses `act` internally and\nsimulates real user behavior more
accurately:\n\n```diff\n- el.click();\n+ await
userEvent.click(el);\nexpect(el).toHaveAttribute('state-updated');\n```\n\n\n####
🔴 Wrapping `render` call inside `act` `act(() =>
render(<App/>))`\n\nAnother common mistake is wrapping the render call
inside act:\n\n```\nawait act(async () => {\n render(<MyComponent
/>);\n});\n```\n\nThis is sometimes done to \"mute\" warnings about
Promises resolving\ninside `useEffect`.\nHowever, wrapping `render` in
`act` manually breaks a lot of tests in\nConcurrent React, because the
library (like React Testing Library)\nalready wraps render in act
internally. Manually adding act here can\ncause unexpected behavior,
like missing updates or wrong timing.\n\nThe approach I took was to
remove the manual `act` around `render` in\nplaces where tests started
failing with Concurrent React, even if, in\nsome cases, it means seeing
`act` warnings in the console. This is safer\nfor correctness and allows
the tests to pass reliably.\n\nTo properly mute such warnings, the right
way would be to wrap the\nactual resolved Promises (like those inside
useEffect) in act.However,\nsince doing that depends a lot on the
specific test setup, and could\nvary case-by-case, I chose not to try to
fix it myself. Teams are\nwelcome to follow up if they wish.\n\n### 🟡 In
specific tests we keep `legacyMode: true`\n\nWhen it wasn't immediately
clear to me what caused the failure or when\nthe tests were checking
React internals, like the number of re-renders,\nI decided to keep that
test running in legacy mode by using the option\n`legacyRoot: true` in
`render`.\n\nThe idea behind these in-place overrides is that when we're
ready to\nstart migrating the runtime to concurrent mode, the owning
teams will\nneed to take a closer look at those tests when moving their
apps to the\nconcurrent
root.","sha":"24d4c8aa0b60156e87a614bae5e7d6489c8c5972"}},"sourceBranch":"main","suggestedTargetBranches":["8.19"],"targetPullRequestStates":[{"branch":"main","label":"v9.1.0","branchLabelMappingKey":"^v9.1.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/213367","number":213367,"mergeCommit":{"message":"[Concurrent
React@18] Switch testing library to `createRoot` (elastic#213367)\n\nCloses
elastic#218076. \nPart of the
preparation for migrating Kibana to React’s
createRoot\n([Epic](https://github.com/elastic/kibana-team/issues/1564)).\n\n##
What’s in this PR\n\n- Switch to `createRoot` in tests: Updates
`@testing-library/react` to\nuse `createRoot` by default. All unit tests
using Testing Library now\nrun in concurrent mode. See
commit:\nhttps://github.com/elastic/pull/213367/commits/8e51e07054ab5d0993e9856a851c55716e90190b\n-
Test updates: Most test failures from the switch have been
addressed.\nAbout a dozen tests still explicitly set `legacyRoot: true`.
These will\nneed closer review by the owning teams during app
migrations.\n- Enzyme tests: Enzyme tests continue to use the React 17
adapter and\nrun in legacy mode.
[Current\nplan](https://docs.google.com/document/d/1CXybQiBAtXt3Kay0j_CJxWO7bZ2EYYhaveK4fban2-M/edit?tab=t.kfgvma8ti7q0)\nis
to migrate away from Enzyme before upgrading to React 19.\n\n##
Background\n\nWhen we upgraded to React 18, we also updated
`@testing-library/react`,\nwhich by default uses `createRoot`.\nTo avoid
dealing with concurrent mode failures early, we temporarily\nforced
Testing Library to use `legacyRoot` (`ReactDOM.render`).\n\nThis PR
removes that override and fixes the resulting test issues,\ncompleting
the move to concurrent root for Testing Library tests.\n\n\n### Common
Failures\n\n#### 🔴 `el.click()` \n\nA common testing mistake is using
el.click() and immediately checking\nfor a DOM
update:\n```\nel.click();\nexpect(el).toHaveAttribute('state-updated');\n```\n\nThis
often fails with Concurrent React, because state updates might not\nbe
synchronous anymore.\nDirectly calling `el.click()` doesn't
automatically trigger React’s\nupdate cycle (`act`), so your test can
read outdated DOM.\n\nInstead, you should either manually wrap the
interaction in `act`, or\n(better) use `userEvent.click`, which already
uses `act` internally and\nsimulates real user behavior more
accurately:\n\n```diff\n- el.click();\n+ await
userEvent.click(el);\nexpect(el).toHaveAttribute('state-updated');\n```\n\n\n####
🔴 Wrapping `render` call inside `act` `act(() =>
render(<App/>))`\n\nAnother common mistake is wrapping the render call
inside act:\n\n```\nawait act(async () => {\n render(<MyComponent
/>);\n});\n```\n\nThis is sometimes done to \"mute\" warnings about
Promises resolving\ninside `useEffect`.\nHowever, wrapping `render` in
`act` manually breaks a lot of tests in\nConcurrent React, because the
library (like React Testing Library)\nalready wraps render in act
internally. Manually adding act here can\ncause unexpected behavior,
like missing updates or wrong timing.\n\nThe approach I took was to
remove the manual `act` around `render` in\nplaces where tests started
failing with Concurrent React, even if, in\nsome cases, it means seeing
`act` warnings in the console. This is safer\nfor correctness and allows
the tests to pass reliably.\n\nTo properly mute such warnings, the right
way would be to wrap the\nactual resolved Promises (like those inside
useEffect) in act.However,\nsince doing that depends a lot on the
specific test setup, and could\nvary case-by-case, I chose not to try to
fix it myself. Teams are\nwelcome to follow up if they wish.\n\n### 🟡 In
specific tests we keep `legacyMode: true`\n\nWhen it wasn't immediately
clear to me what caused the failure or when\nthe tests were checking
React internals, like the number of re-renders,\nI decided to keep that
test running in legacy mode by using the option\n`legacyRoot: true` in
`render`.\n\nThe idea behind these in-place overrides is that when we're
ready to\nstart migrating the runtime to concurrent mode, the owning
teams will\nneed to take a closer look at those tests when moving their
apps to the\nconcurrent
root.","sha":"24d4c8aa0b60156e87a614bae5e7d6489c8c5972"}},{"branch":"8.19","label":"v8.19.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

Author: Dosant

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,
@@ -141,11 +142,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/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-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

@@ -1518,7 +1518,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');