[8.19] Backward compatible testing library changes for switching to createRoot (#213367)#220500
Merged
Dosant merged 7 commits intoelastic:8.19from May 9, 2025
Merged
[8.19] Backward compatible testing library changes for switching to createRoot (#213367)#220500Dosant merged 7 commits intoelastic:8.19from
createRoot (#213367)#220500Dosant merged 7 commits intoelastic:8.19from
Conversation
…#213367) Closes elastic#218076. Part of the preparation for migrating Kibana to React’s createRoot ([Epic](elastic/kibana-team#1564)). ## 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: elastic@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](https://docs.google.com/document/d/1CXybQiBAtXt3Kay0j_CJxWO7bZ2EYYhaveK4fban2-M/edit?tab=t.kfgvma8ti7q0) 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: ```diff - 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. (cherry picked from commit 24d4c8a) # Conflicts: # src/platform/packages/shared/kbn-test/src/jest/setup/react_testing_library.js # src/platform/packages/shared/kbn-unified-tabs/src/components/tab/tab.test.tsx # src/platform/packages/shared/shared-ux/error_boundary/src/ui/error_boundary.test.tsx # src/platform/packages/shared/shared-ux/error_boundary/src/ui/section_error_boundary.test.tsx # src/platform/plugins/shared/home/public/application/components/tutorial/tutorial.test.tsx # src/platform/plugins/shared/unified_doc_viewer/public/components/doc_viewer_table/table_cell_value.test.tsx # x-pack/platform/packages/shared/kbn-elastic-assistant/impl/assistant/api/chat_complete/use_chat_complete.test.ts # x-pack/platform/packages/shared/kbn-elastic-assistant/impl/assistant/settings/settings_context_menu/settings_context_menu.test.tsx # x-pack/platform/plugins/shared/automatic_import/public/components/create_integration/create_automatic_import/flyout/cel_configuration/steps/upload_spec_step/api_definition_input.test.tsx # x-pack/platform/plugins/shared/automatic_import/public/components/create_integration/create_automatic_import/flyout/cel_configuration/steps/upload_spec_step/upload_spec_step.test.tsx # x-pack/platform/plugins/shared/lens/public/editor_frame_service/editor_frame/editor_frame.test.tsx # x-pack/platform/plugins/shared/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel_wrapper.test.tsx # x-pack/platform/plugins/shared/security/public/account_management/user_profile/user_profile.test.tsx # x-pack/platform/plugins/shared/spaces/public/management/edit_space/edit_space_general_tab.test.tsx # x-pack/solutions/observability/plugins/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/waterfall_container.test.tsx # x-pack/solutions/security/plugins/security_solution/public/common/test/eui/super_select.ts # 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 # x-pack/solutions/security/plugins/security_solution/public/detections/components/alert_summary/search_bar/integrations_filter_button.test.tsx # x-pack/solutions/security/plugins/security_solution/public/detections/components/alert_summary/table/more_actions_row_control_column.test.tsx # x-pack/solutions/security/plugins/security_solution/public/detections/pages/alert_summary/alert_summary.test.tsx # x-pack/solutions/security/plugins/security_solution/public/flyout/ai_for_soc/components/settings_menu.test.tsx # x-pack/solutions/security/plugins/security_solution/public/flyout/ai_for_soc/components/take_action_button.test.tsx
botelastic
bot
added
Team:Fleet
Contributor
|
Pinging @elastic/obs-ux-infra_services-team (Team:obs-ux-infra_services) |
Contributor
|
Pinging @elastic/fleet (Team:Fleet) |
Contributor
|
Pinging @elastic/obs-ux-management-team (Team:obs-ux-management) |
Contributor
💔 Build Failed
Failed CI Steps
Test Failures
Metrics [docs]Page load bundle
History
|
Dosant
changed the title
createRoot (#213367)createRoot (#213367)
Dosant
changed the title
createRoot (#213367)createRoot (#213367)
tsullivan
approved these changes
May 9, 2025
Member
tsullivan
left a comment
tsullivan
left a comment
There was a problem hiding this comment.
LGTM
Thank you for this hard work to make future backports easier!
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Backport
This will backport the following commits from
mainto8.19:createRoot(#213367), but without actually enabling concurrent root for tests. Just the backward compatible unit test fixesQuestions ?
Please refer to the Backport tool documentation