{"patch":"diff --git a\/packages\/react-dom\/src\/__tests__\/ReactDOMEventPropagation-test.js b\/packages\/react-dom\/src\/__tests__\/ReactDOMEventPropagation-test.js\nindex eb093d389b..b90ca9efdb 100644\n--- a\/packages\/react-dom\/src\/__tests__\/ReactDOMEventPropagation-test.js\n+++ b\/packages\/react-dom\/src\/__tests__\/ReactDOMEventPropagation-test.js\n@@ -9,45 +9,55 @@\n \n describe('ReactDOMEventListener', () => {\n let React;\n- let OuterReactDOM;\n+ let OuterReactDOMClient;\n let InnerReactDOM;\n+ let InnerReactDOMClient;\n+ let act;\n let container;\n+ let root;\n \n beforeEach(() => {\n window.TextEvent = function () {};\n jest.resetModules();\n jest.isolateModules(() => {\n React = require('react');\n- OuterReactDOM = require('react-dom');\n+ act = require('internal-test-utils').act;\n+ OuterReactDOMClient = require('react-dom\/client');\n });\n jest.isolateModules(() => {\n InnerReactDOM = require('react-dom');\n+ InnerReactDOMClient = require('react-dom\/client');\n });\n- expect(OuterReactDOM).not.toBe(InnerReactDOM);\n+ expect(OuterReactDOMClient).not.toBe(InnerReactDOMClient);\n });\n \n- afterEach(() => {\n- cleanup();\n+ afterEach(async () => {\n+ await cleanup();\n });\n \n- function cleanup() {\n+ async function cleanup() {\n if (container) {\n- OuterReactDOM.unmountComponentAtNode(container);\n+ await act(() => {\n+ root.unmount();\n+ });\n document.body.removeChild(container);\n container = null;\n }\n }\n \n- function render(tree) {\n- cleanup();\n+ async function render(tree) {\n+ await cleanup();\n container = document.createElement('div');\n document.body.appendChild(container);\n- OuterReactDOM.render(tree, container);\n+ root = OuterReactDOMClient.createRoot(container);\n+ await act(() => {\n+ root.render(tree);\n+ });\n }\n \n describe('bubbling events', () => {\n- it('onAnimationEnd', () => {\n- testNativeBubblingEvent({\n+ it('onAnimationEnd', async () => {\n+ await testNativeBubblingEvent({\n type: 'div',\n reactEvent: 'onAnimationEnd',\n reactEventType: 'animationend',\n@@ -63,8 +73,8 @@ describe('ReactDOMEventListener', () => {\n });\n });\n \n- it('onAnimationIteration', () => {\n- testNativeBubblingEvent({\n+ it('onAnimationIteration', async () => {\n+ await testNativeBubblingEvent({\n type: 'div',\n reactEvent: 'onAnimationIteration',\n reactEventType: 'animationiteration',\n@@ -80,8 +90,8 @@ describe('ReactDOMEventListener', () => {\n });\n });\n \n- it('onAnimationStart', () => {\n- testNativeBubblingEvent({\n+ it('onAnimationStart', async () => {\n+ await testNativeBubblingEvent({\n type: 'div',\n reactEvent: 'onAnimationStart',\n reactEventType: 'animationstart',\n@@ -97,8 +107,8 @@ describe('ReactDOMEventListener', () => {\n });\n });\n \n- it('onAuxClick', () => {\n- testNativeBubblingEvent({\n+ it('onAuxClick', async () => {\n+ await testNativeBubblingEvent({\n type: 'div',\n reactEvent: 'onAuxClick',\n reactEventType: 'auxclick',\n@@ -114,8 +124,8 @@ describe('ReactDOMEventListener', () => {\n });\n });\n \n- it('onBlur', () => {\n- testNativeBubblingEvent({\n+ it('onBlur', async () => {\n+ await testNativeBubblingEvent({\n type: 'input',\n reactEvent: 'onBlur',\n reactEventType: 'blur',\n@@ -134,8 +144,8 @@ describe('ReactDOMEventListener', () => {\n \/\/ because we emulate the React 16 behavior where\n \/\/ the click handler is attached to the document.\n \/\/ @gate !enableLegacyFBSupport\n- it('onClick', () => {\n- testNativeBubblingEvent({\n+ it('onClick', async () => {\n+ await testNativeBubblingEvent({\n type: 'div',\n reactEvent: 'onClick',\n reactEventType: 'click',\n@@ -146,8 +156,8 @@ describe('ReactDOMEventListener', () => {\n });\n });\n \n- it('onContextMenu', () => {\n- testNativeBubblingEvent({\n+ it('onContextMenu', async () => {\n+ await testNativeBubblingEvent({\n type: 'div',\n reactEvent: 'onContextMenu',\n reactEventType: 'contextmenu',\n@@ -163,8 +173,8 @@ describe('ReactDOMEventListener', () => {\n });\n });\n \n- it('onCopy', () => {\n- testNativeBubblingEvent({\n+ it('onCopy', async () => {\n+ await testNativeBubblingEvent({\n type: 'div',\n reactEvent: 'onCopy',\n reactEventType: 'copy',\n@@ -180,8 +190,8 @@ describe('ReactDOMEventListener', () => {\n });\n });\n \n- it('onCut', () => {\n- testNativeBubblingEvent({\n+ it('onCut', async () => {\n+ await testNativeBubblingEvent({\n type: 'div',\n reactEvent: 'onCut',\n reactEventType: 'cut',\n@@ -197,8 +207,8 @@ describe('ReactDOMEventListener', () => {\n });\n });\n \n- it('onDoubleClick', () => {\n- testNativeBubblingEvent({\n+ it('onDoubleClick', async () => {\n+ await testNativeBubblingEvent({\n type: 'div',\n reactEvent: 'onDoubleClick',\n reactEventType: 'dblclick',\n@@ -214,8 +224,8 @@ describe('ReactDOMEventListener', () => {\n });\n });\n \n- it('onDrag', () => {\n- testNativeBubblingEvent({\n+ it('onDrag', async () => {\n+ await testNativeBubblingEvent({\n type: 'div',\n reactEvent: 'onDrag',\n reactEventType: 'drag',\n@@ -231,8 +241,8 @@ describe('ReactDOMEventListener', () => {\n });\n });\n \n- it('onDragEnd', () => {\n- testNativeBubblingEvent({\n+ it('onDragEnd', async () => {\n+ await testNativeBubblingEvent({\n type: 'div',\n reactEvent: 'onDragEnd',\n reactEventType: 'dragend',\n@@ -248,8 +258,8 @@ describe('ReactDOMEventListener', () => {\n });\n });\n \n- it('onDragEnter', () => {\n- testNativeBubblingEvent({\n+ it('onDragEnter', async () => {\n+ await testNativeBubblingEvent({\n type: 'div',\n reactEvent: 'onDragEnter',\n reactEventType: 'dragenter',\n@@ -265,8 +275,8 @@ describe('ReactDOMEventListener', () => {\n });\n });\n \n- it('onDragExit', () => {\n- testNativeBubblingEvent({\n+ it('onDragExit', async () => {\n+ await testNativeBubblingEvent({\n type: 'div',\n reactEvent: 'onDragExit',\n reactEventType: 'dragexit',\n@@ -282,8 +292,8 @@ describe('ReactDOMEventListener', () => {\n });\n });\n \n- it('onDragLeave', () => {\n- testNativeBubblingEvent({\n+ it('onDragLeave', async () => {\n+ await testNativeBubblingEvent({\n type: 'div',\n reactEvent: 'onDragLeave',\n reactEventType: 'dragleave',\n@@ -299,8 +309,8 @@ describe('ReactDOMEventListener', () => {\n });\n });\n \n- it('onDragOver', () => {\n- testNativeBubblingEvent({\n+ it('onDragOver', async () => {\n+ await testNativeBubblingEvent({\n type: 'div',\n reactEvent: 'onDragOver',\n reactEventType: 'dragover',\n@@ -316,8 +326,8 @@ describe('ReactDOMEventListener', () => {\n });\n });\n \n- it('onDragStart', () => {\n- testNativeBubblingEvent({\n+ it('onDragStart', async () => {\n+ await testNativeBubblingEvent({\n type: 'div',\n reactEvent: 'onDragStart',\n reactEventType: 'dragstart',\n@@ -333,8 +343,8 @@ describe('ReactDOMEventListener', () => {\n });\n });\n \n- it('onDrop', () => {\n- testNativeBubblingEvent({\n+ it('onDrop', async () => {\n+ await testNativeBubblingEvent({\n type: 'div',\n reactEvent: 'onDrop',\n reactEventType: 'drop',\n@@ -350,8 +360,8 @@ describe('ReactDOMEventListener', () => {\n });\n });\n \n- it('onFocus', () => {\n- testNativeBubblingEvent({\n+ it('onFocus', async () => {\n+ await testNativeBubblingEvent({\n type: 'input',\n reactEvent: 'onFocus',\n reactEventType: 'focus',\n@@ -366,8 +376,8 @@ describe('ReactDOMEventListener', () => {\n });\n });\n \n- it('onGotPointerCapture', () => {\n- testNativeBubblingEvent({\n+ it('onGotPointerCapture', async () => {\n+ await testNativeBubblingEvent({\n type: 'div',\n reactEvent: 'onGotPointerCapture',\n reactEventType: 'gotpointercapture',\n@@ -383,8 +393,8 @@ describe('ReactDOMEventListener', () => {\n });\n });\n \n- it('onKeyDown', () => {\n- testNativeBubblingEvent({\n+ it('onKeyDown', async () => {\n+ await testNativeBubblingEvent({\n type: 'input',\n reactEvent: 'onKeyDown',\n reactEventType: 'keydown',\n@@ -400,8 +410,8 @@ describe('ReactDOMEventListener', () => {\n });\n });\n \n- it('onKeyPress', () => {\n- testNativeBubblingEvent({\n+ it('onKeyPress', async () => {\n+ await testNativeBubblingEvent({\n type: 'input',\n reactEvent: 'onKeyPress',\n reactEventType: 'keypress',\n@@ -418,8 +428,8 @@ describe('ReactDOMEventListener', () => {\n });\n });\n \n- it('onKeyUp', () => {\n- testNativeBubblingEvent({\n+ it('onKeyUp', async () => {\n+ await testNativeBubblingEvent({\n type: 'input',\n reactEvent: 'onKeyUp',\n reactEventType: 'keyup',\n@@ -435,8 +445,8 @@ describe('ReactDOMEventListener', () => {\n });\n });\n \n- it('onLostPointerCapture', () => {\n- testNativeBubblingEvent({\n+ it('onLostPointerCapture', async () => {\n+ await testNativeBubblingEvent({\n type: 'div',\n reactEvent: 'onLostPointerCapture',\n reactEventType: 'lostpointercapture',\n@@ -452,8 +462,8 @@ describe('ReactDOMEventListener', () => {\n });\n });\n \n- it('onMouseDown', () => {\n- testNativeBubblingEvent({\n+ it('onMouseDown', async () => {\n+ await testNativeBubblingEvent({\n type: 'div',\n reactEvent: 'onMouseDown',\n reactEventType: 'mousedown',\n@@ -469,8 +479,8 @@ describe('ReactDOMEventListener', () => {\n });\n });\n \n- it('onMouseOut', () => {\n- testNativeBubblingEvent({\n+ it('onMouseOut', async () => {\n+ await testNativeBubblingEvent({\n type: 'div',\n reactEvent: 'onMouseOut',\n reactEventType: 'mouseout',\n@@ -486,8 +496,8 @@ describe('ReactDOMEventListener', () => {\n });\n });\n \n- it('onMouseOver', () => {\n- testNativeBubblingEvent({\n+ it('onMouseOver', async () => {\n+ await testNativeBubblingEvent({\n type: 'div',\n reactEvent: 'onMouseOver',\n reactEventType: 'mouseover',\n@@ -503,8 +513,8 @@ describe('ReactDOMEventListener', () => {\n });\n });\n \n- it('onMouseUp', () => {\n- testNativeBubblingEvent({\n+ it('onMouseUp', async () => {\n+ await testNativeBubblingEvent({\n type: 'div',\n reactEvent: 'onMouseUp',\n reactEventType: 'mouseup',\n@@ -520,8 +530,8 @@ describe('ReactDOMEventListener', () => {\n });\n });\n \n- it('onPaste', () => {\n- testNativeBubblingEvent({\n+ it('onPaste', async () => {\n+ await testNativeBubblingEvent({\n type: 'div',\n reactEvent: 'onPaste',\n reactEventType: 'paste',\n@@ -537,8 +547,8 @@ describe('ReactDOMEventListener', () => {\n });\n });\n \n- it('onPointerCancel', () => {\n- testNativeBubblingEvent({\n+ it('onPointerCancel', async () => {\n+ await testNativeBubblingEvent({\n type: 'div',\n reactEvent: 'onPointerCancel',\n reactEventType: 'pointercancel',\n@@ -554,8 +564,8 @@ describe('ReactDOMEventListener', () => {\n });\n });\n \n- it('onPointerDown', () => {\n- testNativeBubblingEvent({\n+ it('onPointerDown', async () => {\n+ await testNativeBubblingEvent({\n type: 'div',\n reactEvent: 'onPointerDown',\n reactEventType: 'pointerdown',\n@@ -571,8 +581,8 @@ describe('ReactDOMEventListener', () => {\n });\n });\n \n- it('onPointerMove', () => {\n- testNativeBubblingEvent({\n+ it('onPointerMove', async () => {\n+ await testNativeBubblingEvent({\n type: 'div',\n reactEvent: 'onPointerMove',\n reactEventType: 'pointermove',\n@@ -588,8 +598,8 @@ describe('ReactDOMEventListener', () => {\n });\n });\n \n- it('onPointerOut', () => {\n- testNativeBubblingEvent({\n+ it('onPointerOut', async () => {\n+ await testNativeBubblingEvent({\n type: 'div',\n reactEvent: 'onPointerOut',\n reactEventType: 'pointerout',\n@@ -605,8 +615,8 @@ describe('ReactDOMEventListener', () => {\n });\n });\n \n- it('onPointerOver', () => {\n- testNativeBubblingEvent({\n+ it('onPointerOver', async () => {\n+ await testNativeBubblingEvent({\n type: 'div',\n reactEvent: 'onPointerOver',\n reactEventType: 'pointerover',\n@@ -622,8 +632,8 @@ describe('ReactDOMEventListener', () => {\n });\n });\n \n- it('onPointerUp', () => {\n- testNativeBubblingEvent({\n+ it('onPointerUp', async () => {\n+ await testNativeBubblingEvent({\n type: 'div',\n reactEvent: 'onPointerUp',\n reactEventType: 'pointerup',\n@@ -639,8 +649,8 @@ describe('ReactDOMEventListener', () => {\n });\n });\n \n- it('onReset', () => {\n- testNativeBubblingEvent({\n+ it('onReset', async () => {\n+ await testNativeBubblingEvent({\n type: 'form',\n reactEvent: 'onReset',\n reactEventType: 'reset',\n@@ -655,8 +665,8 @@ describe('ReactDOMEventListener', () => {\n });\n });\n \n- it('onSubmit', () => {\n- testNativeBubblingEvent({\n+ it('onSubmit', async () => {\n+ await testNativeBubblingEvent({\n type: 'form',\n reactEvent: 'onSubmit',\n reactEventType: 'submit',\n@@ -671,8 +681,8 @@ describe('ReactDOMEventListener', () => {\n });\n });\n \n- it('onTouchCancel', () => {\n- testNativeBubblingEvent({\n+ it('onTouchCancel', async () => {\n+ await testNativeBubblingEvent({\n type: 'div',\n reactEvent: 'onTouchCancel',\n reactEventType: 'touchcancel',\n@@ -688,8 +698,8 @@ describe('ReactDOMEventListener', () => {\n });\n });\n \n- it('onTouchEnd', () => {\n- testNativeBubblingEvent({\n+ it('onTouchEnd', async () => {\n+ await testNativeBubblingEvent({\n type: 'div',\n reactEvent: 'onTouchEnd',\n reactEventType: 'touchend',\n@@ -705,8 +715,8 @@ describe('ReactDOMEventListener', () => {\n });\n });\n \n- it('onTouchMove', () => {\n- testNativeBubblingEvent({\n+ it('onTouchMove', async () => {\n+ await testNativeBubblingEvent({\n type: 'div',\n reactEvent: 'onTouchMove',\n reactEventType: 'touchmove',\n@@ -722,8 +732,8 @@ describe('ReactDOMEventListener', () => {\n });\n });\n \n- it('onTouchStart', () => {\n- testNativeBubblingEvent({\n+ it('onTouchStart', async () => {\n+ await testNativeBubblingEvent({\n type: 'div',\n reactEvent: 'onTouchStart',\n reactEventType: 'touchstart',\n@@ -739,8 +749,8 @@ describe('ReactDOMEventListener', () => {\n });\n });\n \n- it('onTransitionEnd', () => {\n- testNativeBubblingEvent({\n+ it('onTransitionEnd', async () => {\n+ await testNativeBubblingEvent({\n type: 'div',\n reactEvent: 'onTransitionEnd',\n reactEventType: 'transitionend',\n@@ -756,8 +766,8 @@ describe('ReactDOMEventListener', () => {\n });\n });\n \n- it('onWheel', () => {\n- testNativeBubblingEvent({\n+ it('onWheel', async () => {\n+ await testNativeBubblingEvent({\n type: 'div',\n reactEvent: 'onWheel',\n reactEventType: 'wheel',\n@@ -775,8 +785,8 @@ describe('ReactDOMEventListener', () => {\n });\n \n describe('non-bubbling events that bubble in React', () => {\n- it('onAbort', () => {\n- testEmulatedBubblingEvent({\n+ it('onAbort', async () => {\n+ await testEmulatedBubblingEvent({\n type: 'video',\n reactEvent: 'onAbort',\n reactEventType: 'abort',\n@@ -791,8 +801,8 @@ describe('ReactDOMEventListener', () => {\n });\n });\n \n- it('onCancel', () => {\n- testEmulatedBubblingEvent({\n+ it('onCancel', async () => {\n+ await testEmulatedBubblingEvent({\n type: 'dialog',\n reactEvent: 'onCancel',\n reactEventType: 'cancel',\n@@ -807,8 +817,8 @@ describe('ReactDOMEventListener', () => {\n });\n });\n \n- it('onCanPlay', () => {\n- testEmulatedBubblingEvent({\n+ it('onCanPlay', async () => {\n+ await testEmulatedBubblingEvent({\n type: 'video',\n reactEvent: 'onCanPlay',\n reactEventType: 'canplay',\n@@ -823,8 +833,8 @@ describe('ReactDOMEventListener', () => {\n });\n });\n \n- it('onCanPlayThrough', () => {\n- testEmulatedBubblingEvent({\n+ it('onCanPlayThrough', async () => {\n+ await testEmulatedBubblingEvent({\n type: 'video',\n reactEvent: 'onCanPlayThrough',\n reactEventType: 'canplaythrough',\n@@ -839,8 +849,8 @@ describe('ReactDOMEventListener', () => {\n });\n });\n \n- it('onClose', () => {\n- testEmulatedBubblingEvent({\n+ it('onClose', async () => {\n+ await testEmulatedBubblingEvent({\n type: 'dialog',\n reactEvent: 'onClose',\n reactEventType: 'close',\n@@ -855,8 +865,8 @@ describe('ReactDOMEventListener', () => {\n });\n });\n \n- it('onDurationChange', () => {\n- testEmulatedBubblingEvent({\n+ it('onDurationChange', async () => {\n+ await testEmulatedBubblingEvent({\n type: 'video',\n reactEvent: 'onDurationChange',\n reactEventType: 'durationchange',\n@@ -871,8 +881,8 @@ describe('ReactDOMEventListener', () => {\n });\n });\n \n- it('onEmptied', () => {\n- testEmulatedBubblingEvent({\n+ it('onEmptied', async () => {\n+ await testEmulatedBubblingEvent({\n type: 'video',\n reactEvent: 'onEmptied',\n reactEventType: 'emptied',\n@@ -887,8 +897,8 @@ describe('ReactDOMEventListener', () => {\n });\n });\n \n- it('onEncrypted', () => {\n- testEmulatedBubblingEvent({\n+ it('onEncrypted', async () => {\n+ await testEmulatedBubblingEvent({\n type: 'video',\n reactEvent: 'onEncrypted',\n reactEventType: 'encrypted',\n@@ -903,8 +913,8 @@ describe('ReactDOMEventListener', () => {\n });\n });\n \n- it('onEnded', () => {\n- testEmulatedBubblingEvent({\n+ it('onEnded', async () => {\n+ await testEmulatedBubblingEvent({\n type: 'video',\n reactEvent: 'onEnded',\n reactEventType: 'ended',\n@@ -919,8 +929,8 @@ describe('ReactDOMEventListener', () => {\n });\n });\n \n- it('onError', () => {\n- testEmulatedBubblingEvent({\n+ it('onError', async () => {\n+ await testEmulatedBubblingEvent({\n type: 'img',\n reactEvent: 'onError',\n reactEventType: 'error',\n@@ -935,8 +945,8 @@ describe('ReactDOMEventListener', () => {\n });\n });\n \n- it('onInvalid', () => {\n- testEmulatedBubblingEvent({\n+ it('onInvalid', async () => {\n+ await testEmulatedBubblingEvent({\n type: 'input',\n reactEvent: 'onInvalid',\n reactEventType: 'invalid',\n@@ -951,8 +961,8 @@ describe('ReactDOMEventListener', () => {\n });\n });\n \n- it('onLoad', () => {\n- testEmulatedBubblingEvent({\n+ it('onLoad', async () => {\n+ await testEmulatedBubblingEvent({\n type: 'img',\n reactEvent: 'onLoad',\n reactEventType: 'load',\n@@ -967,8 +977,8 @@ describe('ReactDOMEventListener', () => {\n });\n });\n \n- it('onLoadedData', () => {\n- testEmulatedBubblingEvent({\n+ it('onLoadedData', async () => {\n+ await testEmulatedBubblingEvent({\n type: 'video',\n reactEvent: 'onLoadedData',\n reactEventType: 'loadeddata',\n@@ -983,8 +993,8 @@ describe('ReactDOMEventListener', () => {\n });\n });\n \n- it('onLoadedMetadata', () => {\n- testEmulatedBubblingEvent({\n+ it('onLoadedMetadata', async () => {\n+ await testEmulatedBubblingEvent({\n type: 'video',\n reactEvent: 'onLoadedMetadata',\n reactEventType: 'loadedmetadata',\n@@ -999,8 +1009,8 @@ describe('ReactDOMEventListener', () => {\n });\n });\n \n- it('onLoadStart', () => {\n- testEmulatedBubblingEvent({\n+ it('onLoadStart', async () => {\n+ await testEmulatedBubblingEvent({\n type: 'video',\n reactEvent: 'onLoadStart',\n reactEventType: 'loadstart',\n@@ -1015,8 +1025,8 @@ describe('ReactDOMEventListener', () => {\n });\n });\n \n- it('onPause', () => {\n- testEmulatedBubblingEvent({\n+ it('onPause', async () => {\n+ await testEmulatedBubblingEvent({\n type: 'video',\n reactEvent: 'onPause',\n reactEventType: 'pause',\n@@ -1031,8 +1041,8 @@ describe('ReactDOMEventListener', () => {\n });\n });\n \n- it('onPlay', () => {\n- testEmulatedBubblingEvent({\n+ it('onPlay', async () => {\n+ await testEmulatedBubblingEvent({\n type: 'video',\n reactEvent: 'onPlay',\n reactEventType: 'play',\n@@ -1047,8 +1057,8 @@ describe('ReactDOMEventListener', () => {\n });\n });\n \n- it('onPlaying', () => {\n- testEmulatedBubblingEvent({\n+ it('onPlaying', async () => {\n+ await testEmulatedBubblingEvent({\n type: 'video',\n reactEvent: 'onPlaying',\n reactEventType: 'playing',\n@@ -1063,8 +1073,8 @@ describe('ReactDOMEventListener', () => {\n });\n });\n \n- it('onProgress', () => {\n- testEmulatedBubblingEvent({\n+ it('onProgress', async () => {\n+ await testEmulatedBubblingEvent({\n type: 'video',\n reactEvent: 'onProgress',\n reactEventType: 'progress',\n@@ -1079,8 +1089,8 @@ describe('ReactDOMEventListener', () => {\n });\n });\n \n- it('onRateChange', () => {\n- testEmulatedBubblingEvent({\n+ it('onRateChange', async () => {\n+ await testEmulatedBubblingEvent({\n type: 'video',\n reactEvent: 'onRateChange',\n reactEventType: 'ratechange',\n@@ -1095,8 +1105,8 @@ describe('ReactDOMEventListener', () => {\n });\n });\n \n- it('onResize', () => {\n- testEmulatedBubblingEvent({\n+ it('onResize', async () => {\n+ await testEmulatedBubblingEvent({\n type: 'video',\n reactEvent: 'onResize',\n reactEventType: 'resize',\n@@ -1111,8 +1121,8 @@ describe('ReactDOMEventListener', () => {\n });\n });\n \n- it('onSeeked', () => {\n- testEmulatedBubblingEvent({\n+ it('onSeeked', async () => {\n+ await testEmulatedBubblingEvent({\n type: 'video',\n reactEvent: 'onSeeked',\n reactEventType: 'seeked',\n@@ -1127,8 +1137,8 @@ describe('ReactDOMEventListener', () => {\n });\n });\n \n- it('onSeeking', () => {\n- testEmulatedBubblingEvent({\n+ it('onSeeking', async () => {\n+ await testEmulatedBubblingEvent({\n type: 'video',\n reactEvent: 'onSeeking',\n reactEventType: 'seeking',\n@@ -1143,8 +1153,8 @@ describe('ReactDOMEventListener', () => {\n });\n });\n \n- it('onStalled', () => {\n- testEmulatedBubblingEvent({\n+ it('onStalled', async () => {\n+ await testEmulatedBubblingEvent({\n type: 'video',\n reactEvent: 'onStalled',\n reactEventType: 'stalled',\n@@ -1159,8 +1169,8 @@ describe('ReactDOMEventListener', () => {\n });\n });\n \n- it('onSuspend', () => {\n- testEmulatedBubblingEvent({\n+ it('onSuspend', async () => {\n+ await testEmulatedBubblingEvent({\n type: 'video',\n reactEvent: 'onSuspend',\n reactEventType: 'suspend',\n@@ -1175,8 +1185,8 @@ describe('ReactDOMEventListener', () => {\n });\n });\n \n- it('onTimeUpdate', () => {\n- testEmulatedBubblingEvent({\n+ it('onTimeUpdate', async () => {\n+ await testEmulatedBubblingEvent({\n type: 'video',\n reactEvent: 'onTimeUpdate',\n reactEventType: 'timeupdate',\n@@ -1191,8 +1201,8 @@ describe('ReactDOMEventListener', () => {\n });\n });\n \n- it('onToggle', () => {\n- testEmulatedBubblingEvent({\n+ it('onToggle', async () => {\n+ await testEmulatedBubblingEvent({\n type: 'details',\n reactEvent: 'onToggle',\n reactEventType: 'toggle',\n@@ -1207,8 +1217,8 @@ describe('ReactDOMEventListener', () => {\n });\n });\n \n- it('onVolumeChange', () => {\n- testEmulatedBubblingEvent({\n+ it('onVolumeChange', async () => {\n+ await testEmulatedBubblingEvent({\n type: 'video',\n reactEvent: 'onVolumeChange',\n reactEventType: 'volumechange',\n@@ -1223,8 +1233,8 @@ describe('ReactDOMEventListener', () => {\n });\n });\n \n- it('onWaiting', () => {\n- testEmulatedBubblingEvent({\n+ it('onWaiting', async () => {\n+ await testEmulatedBubblingEvent({\n type: 'video',\n reactEvent: 'onWaiting',\n reactEventType: 'waiting',\n@@ -1241,8 +1251,8 @@ describe('ReactDOMEventListener', () => {\n });\n \n describe('non-bubbling events that do not bubble in React', () => {\n- it('onScroll', () => {\n- testNonBubblingEvent({\n+ it('onScroll', async () => {\n+ await testNonBubblingEvent({\n type: 'div',\n reactEvent: 'onScroll',\n reactEventType: 'scroll',\n@@ -1257,8 +1267,8 @@ describe('ReactDOMEventListener', () => {\n });\n });\n \n- it('onScrollEnd', () => {\n- testNonBubblingEvent({\n+ it('onScrollEnd', async () => {\n+ await testNonBubblingEvent({\n type: 'div',\n reactEvent: 'onScrollEnd',\n reactEventType: 'scrollend',\n@@ -1279,10 +1289,10 @@ describe('ReactDOMEventListener', () => {\n \/\/ work very well across different roots. For now, we'll\n \/\/ just document the current state in these tests.\n describe('enter\/leave events', () => {\n- it('onMouseEnter and onMouseLeave', () => {\n+ it('onMouseEnter and onMouseLeave', async () => {\n const log = [];\n const targetRef = React.createRef();\n- render(\n+ await render(\n {\n `);\n });\n \n- it('onPointerEnter and onPointerLeave', () => {\n+ it('onPointerEnter and onPointerLeave', async () => {\n const log = [];\n const targetRef = React.createRef();\n- render(\n+ await render(\n {\n \/\/ work very well across different roots. For now, we'll\n \/\/ just document the current state in these tests.\n describe('polyfilled events', () => {\n- it('onBeforeInput', () => {\n+ it('onBeforeInput', async () => {\n const log = [];\n const targetRef = React.createRef();\n- render(\n+ await render(\n {\n `);\n });\n \n- it('onChange', () => {\n+ it('onChange', async () => {\n const log = [];\n const targetRef = React.createRef();\n- render(\n+ await render(\n {\n `);\n });\n \n- it('onCompositionStart', () => {\n+ it('onCompositionStart', async () => {\n const log = [];\n const targetRef = React.createRef();\n- render(\n+ await render(\n {\n `);\n });\n \n- it('onCompositionEnd', () => {\n+ it('onCompositionEnd', async () => {\n const log = [];\n const targetRef = React.createRef();\n- render(\n+ await render(\n {\n `);\n });\n \n- it('onCompositionUpdate', () => {\n+ it('onCompositionUpdate', async () => {\n const log = [];\n const targetRef = React.createRef();\n- render(\n+ await render(\n {\n `);\n });\n \n- it('onSelect', () => {\n+ it('onSelect', async () => {\n const log = [];\n const targetRef = React.createRef();\n- render(\n+ await render(\n {\n \n \/\/ Events that bubble in React and in the browser.\n \/\/ React delegates them to the root.\n- function testNativeBubblingEvent(config) {\n- testNativeBubblingEventWithTargetListener(config);\n- testNativeBubblingEventWithoutTargetListener(config);\n- testReactStopPropagationInOuterCapturePhase(config);\n- testReactStopPropagationInInnerCapturePhase(config);\n- testReactStopPropagationInInnerBubblePhase(config);\n- testReactStopPropagationInOuterBubblePhase(config);\n- testNativeStopPropagationInOuterCapturePhase(config);\n- testNativeStopPropagationInInnerCapturePhase(config);\n- testNativeStopPropagationInInnerBubblePhase(config);\n- testNativeStopPropagationInOuterBubblePhase(config);\n+ async function testNativeBubblingEvent(config) {\n+ await testNativeBubblingEventWithTargetListener(config);\n+ await testNativeBubblingEventWithoutTargetListener(config);\n+ await testReactStopPropagationInOuterCapturePhase(config);\n+ await testReactStopPropagationInInnerCapturePhase(config);\n+ await testReactStopPropagationInInnerBubblePhase(config);\n+ await testReactStopPropagationInOuterBubblePhase(config);\n+ await testNativeStopPropagationInOuterCapturePhase(config);\n+ await testNativeStopPropagationInInnerCapturePhase(config);\n+ await testNativeStopPropagationInInnerBubblePhase(config);\n+ await testNativeStopPropagationInOuterBubblePhase(config);\n }\n \n \/\/ Events that bubble in React but not in the browser.\n \/\/ React attaches them to the elements.\n- function testEmulatedBubblingEvent(config) {\n- testEmulatedBubblingEventWithTargetListener(config);\n- testEmulatedBubblingEventWithoutTargetListener(config);\n- testReactStopPropagationInOuterCapturePhase(config);\n- testReactStopPropagationInInnerCapturePhase(config);\n- testReactStopPropagationInInnerBubblePhase(config);\n- testNativeStopPropagationInOuterCapturePhase(config);\n- testNativeStopPropagationInInnerCapturePhase(config);\n- testNativeStopPropagationInInnerEmulatedBubblePhase(config);\n+ async function testEmulatedBubblingEvent(config) {\n+ await testEmulatedBubblingEventWithTargetListener(config);\n+ await testEmulatedBubblingEventWithoutTargetListener(config);\n+ await testReactStopPropagationInOuterCapturePhase(config);\n+ await testReactStopPropagationInInnerCapturePhase(config);\n+ await testReactStopPropagationInInnerBubblePhase(config);\n+ await testNativeStopPropagationInOuterCapturePhase(config);\n+ await testNativeStopPropagationInInnerCapturePhase(config);\n+ await testNativeStopPropagationInInnerEmulatedBubblePhase(config);\n }\n \n \/\/ Events that don't bubble either in React or in the browser.\n- function testNonBubblingEvent(config) {\n- testNonBubblingEventWithTargetListener(config);\n- testNonBubblingEventWithoutTargetListener(config);\n- testReactStopPropagationInOuterCapturePhase(config);\n- testReactStopPropagationInInnerCapturePhase(config);\n- testReactStopPropagationInInnerBubblePhase(config);\n- testNativeStopPropagationInOuterCapturePhase(config);\n- testNativeStopPropagationInInnerCapturePhase(config);\n+ async function testNonBubblingEvent(config) {\n+ await testNonBubblingEventWithTargetListener(config);\n+ await testNonBubblingEventWithoutTargetListener(config);\n+ await testReactStopPropagationInOuterCapturePhase(config);\n+ await testReactStopPropagationInInnerCapturePhase(config);\n+ await testReactStopPropagationInInnerBubblePhase(config);\n+ await testNativeStopPropagationInOuterCapturePhase(config);\n+ await testNativeStopPropagationInInnerCapturePhase(config);\n }\n \n- function testNativeBubblingEventWithTargetListener(eventConfig) {\n+ async function testNativeBubblingEventWithTargetListener(eventConfig) {\n const log = [];\n const targetRef = React.createRef();\n- render(\n+ await render(\n {\n `);\n }\n \n- function testEmulatedBubblingEventWithTargetListener(eventConfig) {\n+ async function testEmulatedBubblingEventWithTargetListener(eventConfig) {\n const log = [];\n const targetRef = React.createRef();\n- render(\n+ await render(\n {\n `);\n }\n \n- function testNonBubblingEventWithTargetListener(eventConfig) {\n+ async function testNonBubblingEventWithTargetListener(eventConfig) {\n const log = [];\n const targetRef = React.createRef();\n- render(\n+ await render(\n {\n `);\n }\n \n- function testNativeBubblingEventWithoutTargetListener(eventConfig) {\n+ async function testNativeBubblingEventWithoutTargetListener(eventConfig) {\n const log = [];\n const targetRef = React.createRef();\n- render(\n+ await render(\n {\n `);\n }\n \n- function testEmulatedBubblingEventWithoutTargetListener(eventConfig) {\n+ async function testEmulatedBubblingEventWithoutTargetListener(eventConfig) {\n const log = [];\n const targetRef = React.createRef();\n- render(\n+ await render(\n {\n `);\n }\n \n- function testNonBubblingEventWithoutTargetListener(eventConfig) {\n+ async function testNonBubblingEventWithoutTargetListener(eventConfig) {\n const log = [];\n const targetRef = React.createRef();\n- render(\n+ await render(\n {\n `);\n }\n \n- function testReactStopPropagationInOuterCapturePhase(eventConfig) {\n+ async function testReactStopPropagationInOuterCapturePhase(eventConfig) {\n const log = [];\n const targetRef = React.createRef();\n- render(\n+ await render(\n {\n@@ -2235,10 +2245,10 @@ describe('ReactDOMEventListener', () => {\n `);\n }\n \n- function testReactStopPropagationInInnerCapturePhase(eventConfig) {\n+ async function testReactStopPropagationInInnerCapturePhase(eventConfig) {\n const log = [];\n const targetRef = React.createRef();\n- render(\n+ await render(\n {\n@@ -2299,10 +2309,10 @@ describe('ReactDOMEventListener', () => {\n `);\n }\n \n- function testReactStopPropagationInInnerBubblePhase(eventConfig) {\n+ async function testReactStopPropagationInInnerBubblePhase(eventConfig) {\n const log = [];\n const targetRef = React.createRef();\n- render(\n+ await render(\n {\n `);\n }\n \n- function testReactStopPropagationInOuterBubblePhase(eventConfig) {\n+ async function testReactStopPropagationInOuterBubblePhase(eventConfig) {\n const log = [];\n const targetRef = React.createRef();\n- render(\n+ await render(\n {\n `);\n }\n \n- function testNativeStopPropagationInOuterCapturePhase(eventConfig) {\n+ async function testNativeStopPropagationInOuterCapturePhase(eventConfig) {\n const log = [];\n const targetRef = React.createRef();\n- render(\n+ await render(\n {\n `);\n }\n \n- function testNativeStopPropagationInInnerCapturePhase(eventConfig) {\n+ async function testNativeStopPropagationInInnerCapturePhase(eventConfig) {\n const log = [];\n const targetRef = React.createRef();\n- render(\n+ await render(\n {\n `);\n }\n \n- function testNativeStopPropagationInInnerBubblePhase(eventConfig) {\n+ async function testNativeStopPropagationInInnerBubblePhase(eventConfig) {\n const log = [];\n const targetRef = React.createRef();\n- render(\n+ await render(\n {\n@@ -2625,10 +2635,12 @@ describe('ReactDOMEventListener', () => {\n `);\n }\n \n- function testNativeStopPropagationInInnerEmulatedBubblePhase(eventConfig) {\n+ async function testNativeStopPropagationInInnerEmulatedBubblePhase(\n+ eventConfig,\n+ ) {\n const log = [];\n const targetRef = React.createRef();\n- render(\n+ await render(\n {\n@@ -2694,10 +2706,10 @@ describe('ReactDOMEventListener', () => {\n `);\n }\n \n- function testNativeStopPropagationInOuterBubblePhase(eventConfig) {\n+ async function testNativeStopPropagationInOuterBubblePhase(eventConfig) {\n const log = [];\n const targetRef = React.createRef();\n- render(\n+ await render(\n {\n const parent = ref.current;\n const innerContainer = document.createElement('div');\n parent.appendChild(innerContainer);\n- InnerReactDOM.render(children, innerContainer);\n+ const innerReactRoot = InnerReactDOMClient.createRoot(innerContainer);\n+ InnerReactDOM.flushSync(() => {\n+ innerReactRoot.render(children);\n+ });\n return () => {\n- InnerReactDOM.unmountComponentAtNode(innerContainer);\n+ innerReactRoot.unmount();\n parent.removeChild(innerContainer);\n };\n }, [children, ref]);\n","body":"","commit":{"authorEmail":"silbermann.sebastian@gmail.com","authoredAt":"2024-02-04T11:29:06+01:00","subject":"Convert ReactDOMEventPropagation to createRoot (#28177)","shortRevision":"f5a3158a78","revision":"f5a3158a784ad9677d071004b37b100f26c6c4e3","authorName":"Sebastian Silbermann"},"files":[{"status":"M","path":"packages\/react-dom\/src\/__tests__\/ReactDOMEventPropagation-test.js"}],"parents":["93a5f40cbf05a6efb63a78748d238605dfe35e0c"]}

dillon1000/react

Files changed