Skip to content

Conversation

@hoxyq
Copy link
Contributor

@hoxyq hoxyq commented Feb 9, 2024

Unblocks #28152 for landing.

While triaging why #28152 breaks some tests for DevTools, I've observed that using act from internal-test-utils is actually fixes the issue. One of the main differences between act from react and act from internal-test-utils is that later awaits for microtasks:

// Call the provided scope function after an async gap. This is an extra
// precaution to ensure that our tests do not accidentally rely on the act
// scope adding work to the queue synchronously. We don't do this in the
// public version of `act`, though we maybe should in the future.
await waitForMicrotasks();

All tests that were failing with modern strict mode enabled, using concurrent mode, but with a synchronous act. Following this, I am assuming that in order to avoid queueing microtask, we should define IS_REACT_ACT_ENVIRONMENT global.

const root = ReactNoop.createRoot();
// First test what happens without wrapping in act. This update would
// normally be queued in a microtask.
global.IS_REACT_ACT_ENVIRONMENT = false;
ReactNoop.unstable_runWithPriority(DiscreteEventPriority, () => {
root.render('A');
});
// Nothing has rendered yet
expect(root).toMatchRenderedOutput(null);
// Flush the microtasks by awaiting
await waitForMicrotasks();
expect(root).toMatchRenderedOutput('A');
// Now do the same thing but wrap the update with `act`. No
// `await` necessary.
global.IS_REACT_ACT_ENVIRONMENT = true;
act(() => {
ReactNoop.unstable_runWithPriority(DiscreteEventPriority, () => {
root.render('B');
});
});
expect(root).toMatchRenderedOutput('B');

Validated with running tests on #28152 with these changes.
Also validated that it works for regression tests for previous versions of React.

@hoxyq hoxyq requested review from acdlite and rickhanlonii February 9, 2024 18:37
@facebook-github-bot facebook-github-bot added CLA Signed React Core Team Opened by a member of the React Core Team labels Feb 9, 2024
Copy link
Member

@rickhanlonii rickhanlonii left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sick! Nice find!

@hoxyq hoxyq merged commit 374fd68 into facebook:main Feb 9, 2024
@hoxyq hoxyq deleted the devtools/use-IS-ACT-ENVIRONMENT-for-tests-with-concurrent-mode branch February 9, 2024 19:03
hoxyq added a commit that referenced this pull request Feb 22, 2024
Full list of changes (not a public CHANGELOG): * feature[REMOVED][devtools]: turn off / hide location based component filters ([hoxyq](https://github.com/hoxyq) in [#28417](#28417)) * Add useSyncExternalStore and useTransition to getPrimitiveStackCache ([jamesbvaughan](https://github.com/jamesbvaughan) in [#28399](#28399)) * chore[devtools]: use react-window from npm and bump react-virtualized-auto-sizer to ^1.0.23 ([hoxyq](https://github.com/hoxyq) in [#28408](#28408)) * Pass ref as normal prop ([acdlite](https://github.com/acdlite) in [#28348](#28348)) * Combine createElement and JSX modules ([acdlite](https://github.com/acdlite) in [#28320](#28320)) * [Debug Tools] Always use includeHooksSource option ([sebmarkbage](https://github.com/sebmarkbage) in [#28309](#28309)) * Revert "[Tests] Reset modules by default" ([acdlite](https://github.com/acdlite) in [#28318](#28318)) * Switch <Context> to mean <Context.Provider> ([gaearon](https://github.com/gaearon) in [#28226](#28226)) * [Debug Tools] Introspect Promises in use() ([sebmarkbage](https://github.com/sebmarkbage) in [#28297](#28297)) * fix[devtools/useModalDismissSignal]: use getRootNode for shadow root case support ([hoxyq](https://github.com/hoxyq) in [#28145](#28145)) * fix: define IS_ACT_ENVIRONMENT global for tests with concurrent mode and synchronous act ([hoxyq](https://github.com/hoxyq) in [#28296](#28296)) * chore: gate legacy apis for react-devtools-shell ([hoxyq](https://github.com/hoxyq) in [#28273](#28273)) * DevTools: Add support for use(Context) ([eps1lon](https://github.com/eps1lon) in [#28233](#28233)) * Remove __self and __source location from elements ([sebmarkbage](https://github.com/sebmarkbage) in [#28265](#28265)) * chore: use versioned render in inspectedElement test ([hoxyq](https://github.com/hoxyq) in [#28246](#28246)) * chore: use versioned render in TimelineProfiler test and gate some for legacy rendering ([hoxyq](https://github.com/hoxyq) in [#28218](#28218)) * [Tests] Reset modules by default ([rickhanlonii](https://github.com/rickhanlonii) in [#28254](#28254)) * chore: use versioned render in preprocessData test and gate some for … ([hoxyq](https://github.com/hoxyq) in [#28219](#28219)) * chore: use versioned render in storeStressSync test and gate them for legacy rendering ([hoxyq](https://github.com/hoxyq) in [#28216](#28216)) * Patch devtools before running useMemo function in strict mode ([gsathya](https://github.com/gsathya) in [#28249](#28249)) * chore: use versioned render in storeComponentFilters test ([hoxyq](https://github.com/hoxyq) in [#28241](#28241)) * chore: use versioned render in profilerContext test ([hoxyq](https://github.com/hoxyq) in [#28243](#28243)) * chore: use versioned render in profilingCommitTreeBuilder test and gate some for legacy rendering ([hoxyq](https://github.com/hoxyq) in [#28236](#28236)) * chore: use versioned render in profilingHostRoot test and gate some for legacy rendering ([hoxyq](https://github.com/hoxyq) in [#28237](#28237)) * chore: use versioned render in profilingCache test ([hoxyq](https://github.com/hoxyq) in [#28242](#28242)) * chore: use versioned render in ownersListContext test ([hoxyq](https://github.com/hoxyq) in [#28240](#28240)) * chore: use versioned render in editing test ([hoxyq](https://github.com/hoxyq) in [#28239](#28239)) * chore: use versioned render in treeContext test ([hoxyq](https://github.com/hoxyq) in [#28245](#28245)) * chore: use versioned render in store test ([hoxyq](https://github.com/hoxyq) in [#28244](#28244)) * chore: use versioned render in profilerStore test ([hoxyq](https://github.com/hoxyq) in [#28238](#28238)) * chore: use versioned render in profilingCharts test ([hoxyq](https://github.com/hoxyq) in [#28235](#28235)) * chore: use versioned render in profilerChangeDescriptions test ([hoxyq](https://github.com/hoxyq) in [#28221](#28221)) * chore: use versioned render in storeOwners test ([hoxyq](https://github.com/hoxyq) in [#28215](#28215)) * chore: use versioned render in componentStacks test ([hoxyq](https://github.com/hoxyq) in [#28214](#28214)) * chore: use versioned render in console test ([hoxyq](https://github.com/hoxyq) in [#28213](#28213)) * chore: use versioned render in useEditableValue test ([hoxyq](https://github.com/hoxyq) in [#28212](#28212)) * chore: use versioned render in FastRefreshDevToolsIntegration test ([hoxyq](https://github.com/hoxyq) in [#28211](#28211)) * chore: add versioned render implementation for DevTools tests ([hoxyq](https://github.com/hoxyq) in [#28210](#28210)) * chore: add single versioned implementation of act for DevTools tests ([hoxyq](https://github.com/hoxyq) in [#28186](#28186)) * DevTools: Add support for useFormState ([eps1lon](https://github.com/eps1lon) in [#28232](#28232)) * DevTools: Add support for useOptimistic Hook ([eps1lon](https://github.com/eps1lon) in [#27982](#27982)) * Add stable React.act export ([acdlite](https://github.com/acdlite) in [#28160](#28160)) * [flow] upgrade to 0.225.1 ([kassens](https://github.com/kassens) in [#27871](#27871)) * fix[devtools/e2e]: add fallback for act in integration tests ([hoxyq](https://github.com/hoxyq) in [#27842](#27842)) * Add stable concurrent option to react-test-renderer ([jackpope](https://github.com/jackpope) in [#27804](#27804)) * Update act references in tests ([gnoff](https://github.com/gnoff) in [#27805](#27805)) * Flow: make more objects exact ([kassens](https://github.com/kassens) in [#27790](#27790))
huozhi added a commit to vercel/next.js that referenced this pull request Feb 23, 2024
### React upstream changes - facebook/react#28333 - facebook/react#28334 - facebook/react#28378 - facebook/react#28377 - facebook/react#28376 - facebook/react#28338 - facebook/react#28331 - facebook/react#28336 - facebook/react#28320 - facebook/react#28317 - facebook/react#28375 - facebook/react#28367 - facebook/react#28380 - facebook/react#28368 - facebook/react#28343 - facebook/react#28355 - facebook/react#28374 - facebook/react#28362 - facebook/react#28344 - facebook/react#28339 - facebook/react#28353 - facebook/react#28346 - facebook/react#25790 - facebook/react#28352 - facebook/react#28326 - facebook/react#27688 - facebook/react#28329 - facebook/react#28332 - facebook/react#28340 - facebook/react#28327 - facebook/react#28325 - facebook/react#28324 - facebook/react#28309 - facebook/react#28310 - facebook/react#28307 - facebook/react#28306 - facebook/react#28315 - facebook/react#28318 - facebook/react#28226 - facebook/react#28308 - facebook/react#27563 - facebook/react#28297 - facebook/react#28286 - facebook/react#28284 - facebook/react#28275 - facebook/react#28145 - facebook/react#28301 - facebook/react#28224 - facebook/react#28152 - facebook/react#28296 - facebook/react#28294 - facebook/react#28279 - facebook/react#28273 - facebook/react#28269 - facebook/react#28376 - facebook/react#28338 - facebook/react#28331 - facebook/react#28336 - facebook/react#28320 - facebook/react#28317 - facebook/react#28375 - facebook/react#28367 - facebook/react#28380 - facebook/react#28368 - facebook/react#28343 - facebook/react#28355 - facebook/react#28374 - facebook/react#28362 - facebook/react#28344 - facebook/react#28339 - facebook/react#28353 - facebook/react#28346 - facebook/react#25790 - facebook/react#28352 - facebook/react#28326 - facebook/react#27688 - facebook/react#28329 - facebook/react#28332 - facebook/react#28340 - facebook/react#28327 - facebook/react#28325 - facebook/react#28324 - facebook/react#28309 - facebook/react#28310 - facebook/react#28307 - facebook/react#28306 - facebook/react#28315 - facebook/react#28318 - facebook/react#28226 - facebook/react#28308 - facebook/react#27563 - facebook/react#28297 - facebook/react#28286 - facebook/react#28284 - facebook/react#28275 - facebook/react#28145 - facebook/react#28301 - facebook/react#28224 - facebook/react#28152 - facebook/react#28296 - facebook/react#28294 - facebook/react#28279 - facebook/react#28273 - facebook/react#28269 Closes NEXT-2542 Disable ppr test for strict mode for now, @acdlite will check it and we'll sync again
EdisonVan pushed a commit to EdisonVan/react that referenced this pull request Apr 15, 2024
EdisonVan pushed a commit to EdisonVan/react that referenced this pull request Apr 15, 2024
Full list of changes (not a public CHANGELOG): * feature[REMOVED][devtools]: turn off / hide location based component filters ([hoxyq](https://github.com/hoxyq) in [facebook#28417](facebook#28417)) * Add useSyncExternalStore and useTransition to getPrimitiveStackCache ([jamesbvaughan](https://github.com/jamesbvaughan) in [facebook#28399](facebook#28399)) * chore[devtools]: use react-window from npm and bump react-virtualized-auto-sizer to ^1.0.23 ([hoxyq](https://github.com/hoxyq) in [facebook#28408](facebook#28408)) * Pass ref as normal prop ([acdlite](https://github.com/acdlite) in [facebook#28348](facebook#28348)) * Combine createElement and JSX modules ([acdlite](https://github.com/acdlite) in [facebook#28320](facebook#28320)) * [Debug Tools] Always use includeHooksSource option ([sebmarkbage](https://github.com/sebmarkbage) in [facebook#28309](facebook#28309)) * Revert "[Tests] Reset modules by default" ([acdlite](https://github.com/acdlite) in [facebook#28318](facebook#28318)) * Switch <Context> to mean <Context.Provider> ([gaearon](https://github.com/gaearon) in [facebook#28226](facebook#28226)) * [Debug Tools] Introspect Promises in use() ([sebmarkbage](https://github.com/sebmarkbage) in [facebook#28297](facebook#28297)) * fix[devtools/useModalDismissSignal]: use getRootNode for shadow root case support ([hoxyq](https://github.com/hoxyq) in [facebook#28145](facebook#28145)) * fix: define IS_ACT_ENVIRONMENT global for tests with concurrent mode and synchronous act ([hoxyq](https://github.com/hoxyq) in [facebook#28296](facebook#28296)) * chore: gate legacy apis for react-devtools-shell ([hoxyq](https://github.com/hoxyq) in [facebook#28273](facebook#28273)) * DevTools: Add support for use(Context) ([eps1lon](https://github.com/eps1lon) in [facebook#28233](facebook#28233)) * Remove __self and __source location from elements ([sebmarkbage](https://github.com/sebmarkbage) in [facebook#28265](facebook#28265)) * chore: use versioned render in inspectedElement test ([hoxyq](https://github.com/hoxyq) in [facebook#28246](facebook#28246)) * chore: use versioned render in TimelineProfiler test and gate some for legacy rendering ([hoxyq](https://github.com/hoxyq) in [facebook#28218](facebook#28218)) * [Tests] Reset modules by default ([rickhanlonii](https://github.com/rickhanlonii) in [facebook#28254](facebook#28254)) * chore: use versioned render in preprocessData test and gate some for … ([hoxyq](https://github.com/hoxyq) in [facebook#28219](facebook#28219)) * chore: use versioned render in storeStressSync test and gate them for legacy rendering ([hoxyq](https://github.com/hoxyq) in [facebook#28216](facebook#28216)) * Patch devtools before running useMemo function in strict mode ([gsathya](https://github.com/gsathya) in [facebook#28249](facebook#28249)) * chore: use versioned render in storeComponentFilters test ([hoxyq](https://github.com/hoxyq) in [facebook#28241](facebook#28241)) * chore: use versioned render in profilerContext test ([hoxyq](https://github.com/hoxyq) in [facebook#28243](facebook#28243)) * chore: use versioned render in profilingCommitTreeBuilder test and gate some for legacy rendering ([hoxyq](https://github.com/hoxyq) in [facebook#28236](facebook#28236)) * chore: use versioned render in profilingHostRoot test and gate some for legacy rendering ([hoxyq](https://github.com/hoxyq) in [facebook#28237](facebook#28237)) * chore: use versioned render in profilingCache test ([hoxyq](https://github.com/hoxyq) in [facebook#28242](facebook#28242)) * chore: use versioned render in ownersListContext test ([hoxyq](https://github.com/hoxyq) in [facebook#28240](facebook#28240)) * chore: use versioned render in editing test ([hoxyq](https://github.com/hoxyq) in [facebook#28239](facebook#28239)) * chore: use versioned render in treeContext test ([hoxyq](https://github.com/hoxyq) in [facebook#28245](facebook#28245)) * chore: use versioned render in store test ([hoxyq](https://github.com/hoxyq) in [facebook#28244](facebook#28244)) * chore: use versioned render in profilerStore test ([hoxyq](https://github.com/hoxyq) in [facebook#28238](facebook#28238)) * chore: use versioned render in profilingCharts test ([hoxyq](https://github.com/hoxyq) in [facebook#28235](facebook#28235)) * chore: use versioned render in profilerChangeDescriptions test ([hoxyq](https://github.com/hoxyq) in [facebook#28221](facebook#28221)) * chore: use versioned render in storeOwners test ([hoxyq](https://github.com/hoxyq) in [facebook#28215](facebook#28215)) * chore: use versioned render in componentStacks test ([hoxyq](https://github.com/hoxyq) in [facebook#28214](facebook#28214)) * chore: use versioned render in console test ([hoxyq](https://github.com/hoxyq) in [facebook#28213](facebook#28213)) * chore: use versioned render in useEditableValue test ([hoxyq](https://github.com/hoxyq) in [facebook#28212](facebook#28212)) * chore: use versioned render in FastRefreshDevToolsIntegration test ([hoxyq](https://github.com/hoxyq) in [facebook#28211](facebook#28211)) * chore: add versioned render implementation for DevTools tests ([hoxyq](https://github.com/hoxyq) in [facebook#28210](facebook#28210)) * chore: add single versioned implementation of act for DevTools tests ([hoxyq](https://github.com/hoxyq) in [facebook#28186](facebook#28186)) * DevTools: Add support for useFormState ([eps1lon](https://github.com/eps1lon) in [facebook#28232](facebook#28232)) * DevTools: Add support for useOptimistic Hook ([eps1lon](https://github.com/eps1lon) in [facebook#27982](facebook#27982)) * Add stable React.act export ([acdlite](https://github.com/acdlite) in [facebook#28160](facebook#28160)) * [flow] upgrade to 0.225.1 ([kassens](https://github.com/kassens) in [facebook#27871](facebook#27871)) * fix[devtools/e2e]: add fallback for act in integration tests ([hoxyq](https://github.com/hoxyq) in [facebook#27842](facebook#27842)) * Add stable concurrent option to react-test-renderer ([jackpope](https://github.com/jackpope) in [facebook#27804](facebook#27804)) * Update act references in tests ([gnoff](https://github.com/gnoff) in [facebook#27805](facebook#27805)) * Flow: make more objects exact ([kassens](https://github.com/kassens) in [facebook#27790](facebook#27790))
bigfootjon pushed a commit that referenced this pull request Apr 18, 2024
Akshato07 pushed a commit to Akshato07/-Luffy that referenced this pull request Feb 20, 2025
Full list of changes (not a public CHANGELOG): * feature[REMOVED][devtools]: turn off / hide location based component filters ([hoxyq](https://github.com/hoxyq) in [#28417](facebook/react#28417)) * Add useSyncExternalStore and useTransition to getPrimitiveStackCache ([jamesbvaughan](https://github.com/jamesbvaughan) in [#28399](facebook/react#28399)) * chore[devtools]: use react-window from npm and bump react-virtualized-auto-sizer to ^1.0.23 ([hoxyq](https://github.com/hoxyq) in [#28408](facebook/react#28408)) * Pass ref as normal prop ([acdlite](https://github.com/acdlite) in [#28348](facebook/react#28348)) * Combine createElement and JSX modules ([acdlite](https://github.com/acdlite) in [#28320](facebook/react#28320)) * [Debug Tools] Always use includeHooksSource option ([sebmarkbage](https://github.com/sebmarkbage) in [#28309](facebook/react#28309)) * Revert "[Tests] Reset modules by default" ([acdlite](https://github.com/acdlite) in [#28318](facebook/react#28318)) * Switch <Context> to mean <Context.Provider> ([gaearon](https://github.com/gaearon) in [#28226](facebook/react#28226)) * [Debug Tools] Introspect Promises in use() ([sebmarkbage](https://github.com/sebmarkbage) in [#28297](facebook/react#28297)) * fix[devtools/useModalDismissSignal]: use getRootNode for shadow root case support ([hoxyq](https://github.com/hoxyq) in [#28145](facebook/react#28145)) * fix: define IS_ACT_ENVIRONMENT global for tests with concurrent mode and synchronous act ([hoxyq](https://github.com/hoxyq) in [#28296](facebook/react#28296)) * chore: gate legacy apis for react-devtools-shell ([hoxyq](https://github.com/hoxyq) in [#28273](facebook/react#28273)) * DevTools: Add support for use(Context) ([eps1lon](https://github.com/eps1lon) in [#28233](facebook/react#28233)) * Remove __self and __source location from elements ([sebmarkbage](https://github.com/sebmarkbage) in [#28265](facebook/react#28265)) * chore: use versioned render in inspectedElement test ([hoxyq](https://github.com/hoxyq) in [#28246](facebook/react#28246)) * chore: use versioned render in TimelineProfiler test and gate some for legacy rendering ([hoxyq](https://github.com/hoxyq) in [#28218](facebook/react#28218)) * [Tests] Reset modules by default ([rickhanlonii](https://github.com/rickhanlonii) in [#28254](facebook/react#28254)) * chore: use versioned render in preprocessData test and gate some for … ([hoxyq](https://github.com/hoxyq) in [#28219](facebook/react#28219)) * chore: use versioned render in storeStressSync test and gate them for legacy rendering ([hoxyq](https://github.com/hoxyq) in [#28216](facebook/react#28216)) * Patch devtools before running useMemo function in strict mode ([gsathya](https://github.com/gsathya) in [#28249](facebook/react#28249)) * chore: use versioned render in storeComponentFilters test ([hoxyq](https://github.com/hoxyq) in [#28241](facebook/react#28241)) * chore: use versioned render in profilerContext test ([hoxyq](https://github.com/hoxyq) in [#28243](facebook/react#28243)) * chore: use versioned render in profilingCommitTreeBuilder test and gate some for legacy rendering ([hoxyq](https://github.com/hoxyq) in [#28236](facebook/react#28236)) * chore: use versioned render in profilingHostRoot test and gate some for legacy rendering ([hoxyq](https://github.com/hoxyq) in [#28237](facebook/react#28237)) * chore: use versioned render in profilingCache test ([hoxyq](https://github.com/hoxyq) in [#28242](facebook/react#28242)) * chore: use versioned render in ownersListContext test ([hoxyq](https://github.com/hoxyq) in [#28240](facebook/react#28240)) * chore: use versioned render in editing test ([hoxyq](https://github.com/hoxyq) in [#28239](facebook/react#28239)) * chore: use versioned render in treeContext test ([hoxyq](https://github.com/hoxyq) in [#28245](facebook/react#28245)) * chore: use versioned render in store test ([hoxyq](https://github.com/hoxyq) in [#28244](facebook/react#28244)) * chore: use versioned render in profilerStore test ([hoxyq](https://github.com/hoxyq) in [#28238](facebook/react#28238)) * chore: use versioned render in profilingCharts test ([hoxyq](https://github.com/hoxyq) in [#28235](facebook/react#28235)) * chore: use versioned render in profilerChangeDescriptions test ([hoxyq](https://github.com/hoxyq) in [#28221](facebook/react#28221)) * chore: use versioned render in storeOwners test ([hoxyq](https://github.com/hoxyq) in [#28215](facebook/react#28215)) * chore: use versioned render in componentStacks test ([hoxyq](https://github.com/hoxyq) in [#28214](facebook/react#28214)) * chore: use versioned render in console test ([hoxyq](https://github.com/hoxyq) in [#28213](facebook/react#28213)) * chore: use versioned render in useEditableValue test ([hoxyq](https://github.com/hoxyq) in [#28212](facebook/react#28212)) * chore: use versioned render in FastRefreshDevToolsIntegration test ([hoxyq](https://github.com/hoxyq) in [#28211](facebook/react#28211)) * chore: add versioned render implementation for DevTools tests ([hoxyq](https://github.com/hoxyq) in [#28210](facebook/react#28210)) * chore: add single versioned implementation of act for DevTools tests ([hoxyq](https://github.com/hoxyq) in [#28186](facebook/react#28186)) * DevTools: Add support for useFormState ([eps1lon](https://github.com/eps1lon) in [#28232](facebook/react#28232)) * DevTools: Add support for useOptimistic Hook ([eps1lon](https://github.com/eps1lon) in [#27982](facebook/react#27982)) * Add stable React.act export ([acdlite](https://github.com/acdlite) in [#28160](facebook/react#28160)) * [flow] upgrade to 0.225.1 ([kassens](https://github.com/kassens) in [#27871](facebook/react#27871)) * fix[devtools/e2e]: add fallback for act in integration tests ([hoxyq](https://github.com/hoxyq) in [#27842](facebook/react#27842)) * Add stable concurrent option to react-test-renderer ([jackpope](https://github.com/jackpope) in [#27804](facebook/react#27804)) * Update act references in tests ([gnoff](https://github.com/gnoff) in [#27805](facebook/react#27805)) * Flow: make more objects exact ([kassens](https://github.com/kassens) in [#27790](facebook/react#27790)) DiffTrain build for commit facebook/react@288cf74.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

CLA Signed React Core Team Opened by a member of the React Core Team

3 participants