[Concurrent React@18] Switch testing library to createRoot

[Dosant]

Closes #218076.
Part of the preparation for migrating Kibana to React’s createRoot (Epic).

What’s in this PR

• Switch to createRoot in tests: Updates @testing-library/react to use createRoot by default. All unit tests using Testing Library now run in concurrent mode. See commit: 8e51e07
• Test updates: Most test failures from the switch have been addressed. About a dozen tests still explicitly set legacyRoot: true. These will need closer review by the owning teams during app migrations.
• Enzyme tests: Enzyme tests continue to use the React 17 adapter and run in legacy mode. Current plan is to migrate away from Enzyme before upgrading to React 19.

Background

When we upgraded to React 18, we also updated @testing-library/react, which by default uses createRoot.
To avoid dealing with concurrent mode failures early, we temporarily forced Testing Library to use legacyRoot (ReactDOM.render).

This PR removes that override and fixes the resulting test issues, completing the move to concurrent root for Testing Library tests.

Common Failures

🔴 el.click()

A common testing mistake is using el.click() and immediately checking for a DOM update:

el.click();
expect(el).toHaveAttribute('state-updated');

This often fails with Concurrent React, because state updates might not be synchronous anymore.
Directly calling el.click() doesn't automatically trigger React’s update cycle (act), so your test can read outdated DOM.

Instead, you should either manually wrap the interaction in act, or (better) use userEvent.click, which already uses act internally and simulates real user behavior more accurately:

- el.click();
+ await userEvent.click(el);
expect(el).toHaveAttribute('state-updated');

🔴 Wrapping render call inside act act(() => render(<App/>))

Another common mistake is wrapping the render call inside act:

await act(async () => {
  render(<MyComponent />);
});

This is sometimes done to "mute" warnings about Promises resolving inside useEffect.
However, wrapping render in act manually breaks a lot of tests in Concurrent React, because the library (like React Testing Library) already wraps render in act internally. Manually adding act here can cause unexpected behavior, like missing updates or wrong timing.

The approach I took was to remove the manual act around render in places where tests started failing with Concurrent React, even if, in some cases, it means seeing act warnings in the console. This is safer for correctness and allows the tests to pass reliably.

To properly mute such warnings, the right way would be to wrap the actual resolved Promises (like those inside useEffect) in act.However, since doing that depends a lot on the specific test setup, and could vary case-by-case, I chose not to try to fix it myself. Teams are welcome to follow up if they wish.

🟡 In specific tests we keep legacyMode: true

When it wasn't immediately clear to me what caused the failure or when the tests were checking React internals, like the number of re-renders, I decided to keep that test running in legacy mode by using the option legacyRoot: true in render.

The idea behind these in-place overrides is that when we're ready to start migrating the runtime to concurrent mode, the owning teams will need to take a closer look at those tests when moving their apps to the concurrent root.

[jkelas]

Rule management changes look good:

pr-files-by-owner 213367 
### elastic/security-detection-rule-management

* x-pack/solutions/security/plugins/security_solution/public/detection_engine/rule_management/logic/use_dissasociate_exception_list.test.ts
* x-pack/solutions/security/plugins/security_solution/public/detection_engine/rule_management_ui/pages/coverage_overview/filter_panel.test.tsx
* x-pack/solutions/security/plugins/security_solution/public/detection_engine/rule_management_ui/pages/rule_management/__integration_tests__/rules_upgrade/test_utils/rule_upgrade_flyout.tsx

Tests PASS:

 PASS  x-pack/solutions/security/plugins/security_solution/public/detection_engine/rule_management/logic/use_dissasociate_exception_list.test.ts (5.833 s)
  useDisassociateExceptionList
    ✓ initializes hook (8 ms)

 PASS  x-pack/solutions/security/plugins/security_solution/public/detection_engine/rule_management_ui/pages/coverage_overview/filter_panel.test.tsx (44.739 s)
  CoverageOverviewFiltersPanel
    ✓ it correctly populates rule activity filter state (788 ms)
    ✓ it correctly populates rule source filter state (266 ms)
    ✓ it correctly populates search filter state (91 ms)

 PASS  x-pack/solutions/security/plugins/security_solution/public/detection_engine/rule_management_ui/pages/rule_management/__integration_tests__/rules_upgrade/diff_view_options.test.ts (121.43 s)
 PASS  x-pack/solutions/security/plugins/security_solution/public/detection_engine/rule_management_ui/pages/rule_management/__integration_tests__/rules_upgrade/rule_upgrade_button.test.ts (17.974 s)

I only left one minor nit comment, for consideration.

[jkelas]

Nit: It would be a bit nicer to use the setup function and then type 'user.click', like it is done in other places already and also suggested by the documentation of the testing library https://testing-library.com/docs/user-event/intro/#writing-tests-with-userevent.

[eokoneyo]

Using the method directly from userEvent without calling .setup() is also acceptable as long as it's from the default export, this is also mentioned in the link you shared, more on this here see https://testing-library.com/docs/user-event/setup/#direct-apis,

[eokoneyo]

Changes LGTM.

[kapral18]

LGTM for explore

[nickpeihl]

lgtm! thanks for updating the test.

[Dosant]

Backport: Since the 8.19 branch doesn't have React 18 (we're discussing whether it should), I will try to manually backport most of the backward-compatible test changes in this PR.

[elasticmachine]

💛 Build succeeded, but was flaky

• Buildkite Build
• Commit: 2f64d91
• Storybooks Preview
• Kibana Serverless Image: docker.elastic.co/kibana-ci/kibana-serverless:pr-213367-2f64d9112bf0

Failed CI Steps

• FTR Configs #55
• FTR Configs #64
• FTR Configs #95
• FTR Configs #109

Test Failures

• [job] [logs] FTR Configs #95 / Cloud Security Posture Security Network Page - Graph visualization "before all" hook for "expanded flyout - filter by node"
• [job] [logs] FTR Configs #64 / Rules Management - Rule import export API @ess @serverless @skipInServerlessMKI import_rules importing rules with an index @skipInServerless migrate pre-8.0 action connector ids should be imported into the default space should import a default-space 7.16 rule with a connector made in the default space into a non-default space successfully

Metrics [docs]

Page load bundle

Size of the bundles that are downloaded on every page load. Target size is below 100kb

id	before	after	diff
core	437.1KB	437.1KB	+12.0B

History

• 💔 Build #299622 failed b5bf04b
• 💛 Build #299431 was flaky 76e692a
• 💔 Build #299314 failed b85facf
• 💚 Build #299105 succeeded 3696843
• 💔 Build #299042 failed 4e5d628

[Dosant]

💚 All backports created successfully

Status	Branch	Result
✅	8.19

Note: Successful backport PRs will be merged automatically after passing CI.

Questions ?

Please refer to the Backport tool documentation