Skip to content

fix(useHoverOverlay): Prevent React 19 act() console.error in tests - #120676

Draft
sentry[bot] wants to merge 2 commits into
masterfrom
seer/fix/use-hover-overlay-act-warning-0owRCi
Draft

fix(useHoverOverlay): Prevent React 19 act() console.error in tests#120676
sentry[bot] wants to merge 2 commits into
masterfrom
seer/fix/use-hover-overlay-act-warning-0owRCi

Conversation

@sentry

@sentry sentry Bot commented Jul 27, 2026

Copy link
Copy Markdown
Contributor

The issue JEST-2Y29 manifested as Error: Expected test not to call console.error(), specifically complaining about "An update to Tooltip inside a test was not wrapped in act(...)". This occurred because the useHoverOverlay hook's setTriggerElementRef callback directly called setTriggerElement (a useState setter) when the component was unmounted during test teardown. In React 19, state updates during unmount that happen outside act() boundaries trigger a console.error, which jest-fail-on-console then converts into a test failure.

The solution refactors how the triggerElement is managed:

  1. A new useRef, triggerElementRef, is introduced to store the DOM element directly within the setTriggerElementRef callback.
  2. A useLayoutEffect is added to synchronize the value from triggerElementRef.current to the triggerElement state. This useLayoutEffect runs during React's commit phase, which is always within an act() boundary in tests, thus preventing the console.error.
  3. The useLayoutEffect intentionally has no dependency array to ensure it runs after every render, allowing it to catch ref updates. An internal guard (if (triggerElement !== triggerElementRef.current)) prevents infinite loops, and an eslint-disable-next-line comment is added to clarify this.

This change ensures that state updates related to the trigger element only occur within act() boundaries, resolving the test failures.

Legal Boilerplate

Look, I get it. The entity doing business as "Sentry" was incorporated in the State of Delaware in 2015 as Functional Software, Inc. and is gonna need some rights from me in order to utilize my contributions in this here PR. So here's the deal: I retain all rights, title and interest in and to my contributions, and by keeping this boilerplate intact I confirm that Sentry can use, modify, copy, and redistribute my contributions, under Sentry's choice of terms.

Fixes JEST-2Y29

Comment @sentry <feedback> on this PR to have Autofix iterate on the changes.

@github-actions github-actions Bot added the Scope: Frontend Automatically applied to PRs that change frontend components label Jul 27, 2026
@ryan953

ryan953 commented Jul 27, 2026

Copy link
Copy Markdown
Member

duplicate of #120675

@sentry sentry Bot changed the title fix(useHoverOverlay): Prevent console.error from state update outside act() in tests fix(useHoverOverlay): Prevent React 19 act() console.error in tests Jul 27, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Scope: Frontend Automatically applied to PRs that change frontend components

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant