Add simulateEventDispatch to test ReactDOMEventListener (#28079)

rickhanlonii · rickhanlonii · commit f655b67ff4db · 2024-02-08T21:10:37.000Z
## Overview For events, the browser will yield to microtasks between calling event handers, allowing time to flush work inbetween. For example, in the browser, this code will log the flushes between events: ```js <body onclick="console.log('body'); Promise.resolve().then(() => console.log('flush body'));"> <div onclick="console.log('div'); Promise.resolve().then(() => console.log('flush div'));"> hi </div> </body> // Logs div flush div body flush body ``` [Sandbox](https://codesandbox.io/s/eloquent-noether-mw2cjg?file=/index.html) The problem is, `dispatchEvent` (either in the browser, or JSDOM) does not yield to microtasks. Which means, this code will log the flushes after the events: ```js const target = document.getElementsByTagName("div")[0]; const nativeEvent = document.createEvent("Event"); nativeEvent.initEvent("click", true, true); target.dispatchEvent(nativeEvent); // Logs div body flush div flush body ``` ## The problem This mostly isn't a problem because React attaches event handler at the root, and calls the event handlers on components via the synthetic event system. We handle flushing between calling event handlers as needed. However, if you're mixing capture and bubbling events, or using multiple roots, then the problem of not flushing microtasks between events can come into play. This was found when converting a test to `createRoot` in #28050 (comment), and that test is an example of where this is an issue with nested roots. Here's a sandox for [discrete](https://codesandbox.io/p/sandbox/red-http-2wg8k5) and [continuous](https://codesandbox.io/p/sandbox/gracious-voice-6r7tsc?file=%2Fsrc%2Findex.js%3A25%2C28) events, showing how the test should behave. The existing test, when switched to `createRoot` matches the browser behavior for continuous events, but not discrete. Continuous events should be batched, and discrete should flush individually. ## The fix This PR implements the fix suggested by @sebmarkbage, to manually traverse the path up from the element and dispatch events, yielding between each call. DiffTrain build for commit cd63ef7.
diff --git a/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react-test-renderer/cjs/ReactTestRenderer-dev.js b/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react-test-renderer/cjs/ReactTestRenderer-dev.js
@@ -25670,7 +25670,7 @@ if (__DEV__) {
       return root;
     }
 
-    var ReactVersion = "18.3.0-canary-04b59928d-20240208";
+    var ReactVersion = "18.3.0-canary-cd63ef792-20240208";
 
     // Might add PROFILE later.
 
diff --git a/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react-test-renderer/cjs/ReactTestRenderer-prod.js b/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react-test-renderer/cjs/ReactTestRenderer-prod.js
@@ -9152,7 +9152,7 @@ var devToolsConfig$jscomp$inline_1011 = {
     throw Error("TestRenderer does not support findFiberByHostInstance()");
   },
   bundleType: 0,
-  version: "18.3.0-canary-04b59928d-20240208",
+  version: "18.3.0-canary-cd63ef792-20240208",
   rendererPackageName: "react-test-renderer"
 };
 var internals$jscomp$inline_1189 = {
@@ -9183,7 +9183,7 @@ var internals$jscomp$inline_1189 = {
   scheduleRoot: null,
   setRefreshHandler: null,
   getCurrentFiber: null,
-  reconcilerVersion: "18.3.0-canary-04b59928d-20240208"
+  reconcilerVersion: "18.3.0-canary-cd63ef792-20240208"
 };
 if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
   var hook$jscomp$inline_1190 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
diff --git a/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react-test-renderer/cjs/ReactTestRenderer-profiling.js b/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react-test-renderer/cjs/ReactTestRenderer-profiling.js
@@ -9580,7 +9580,7 @@ var devToolsConfig$jscomp$inline_1053 = {
     throw Error("TestRenderer does not support findFiberByHostInstance()");
   },
   bundleType: 0,
-  version: "18.3.0-canary-04b59928d-20240208",
+  version: "18.3.0-canary-cd63ef792-20240208",
   rendererPackageName: "react-test-renderer"
 };
 var internals$jscomp$inline_1230 = {
@@ -9611,7 +9611,7 @@ var internals$jscomp$inline_1230 = {
   scheduleRoot: null,
   setRefreshHandler: null,
   getCurrentFiber: null,
-  reconcilerVersion: "18.3.0-canary-04b59928d-20240208"
+  reconcilerVersion: "18.3.0-canary-cd63ef792-20240208"
 };
 if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
   var hook$jscomp$inline_1231 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
diff --git a/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/cjs/React-dev.js b/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/cjs/React-dev.js
@@ -24,7 +24,7 @@ if (__DEV__) {
     ) {
       __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(new Error());
     }
-    var ReactVersion = "18.3.0-canary-04b59928d-20240208";
+    var ReactVersion = "18.3.0-canary-cd63ef792-20240208";
 
     // ATTENTION
     // When adding new symbols to this file,
diff --git a/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/cjs/React-prod.js b/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/cjs/React-prod.js
@@ -543,4 +543,4 @@ exports.useSyncExternalStore = function (
 exports.useTransition = function () {
   return ReactCurrentDispatcher.current.useTransition();
 };
-exports.version = "18.3.0-canary-04b59928d-20240208";
+exports.version = "18.3.0-canary-cd63ef792-20240208";
diff --git a/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/cjs/React-profiling.js b/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/cjs/React-profiling.js
@@ -539,7 +539,7 @@ exports.useSyncExternalStore = function (
 exports.useTransition = function () {
   return ReactCurrentDispatcher.current.useTransition();
 };
-exports.version = "18.3.0-canary-04b59928d-20240208";
+exports.version = "18.3.0-canary-cd63ef792-20240208";
 "undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
   "function" ===
     typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop &&
diff --git a/compiled-rn/facebook-fbsource/xplat/js/react-native-github/Libraries/Renderer/REVISION b/compiled-rn/facebook-fbsource/xplat/js/react-native-github/Libraries/Renderer/REVISION
@@ -1 +1 @@
-04b59928d867dae1639f12f19700347d8f5d4cac
+cd63ef79218a1d53c8739da75b154014f3b7cc73

Original file line number	Diff line number	Diff line change
`@@ -25670,7 +25670,7 @@ if (__DEV__) {`
`25670`	`25670`	`return root;`
`25671`	`25671`	`}`
`25672`	`25672`
`25673`		`- var ReactVersion = "18.3.0-canary-04b59928d-20240208";`
	`25673`	`+ var ReactVersion = "18.3.0-canary-cd63ef792-20240208";`
`25674`	`25674`
`25675`	`25675`	`// Might add PROFILE later.`
`25676`	`25676`
Original file line number	Diff line number	Diff line change
`@@ -24,7 +24,7 @@ if (__DEV__) {`
`24`	`24`	`) {`
`25`	`25`	`__REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(new Error());`
`26`	`26`	`}`
`27`		`- var ReactVersion = "18.3.0-canary-04b59928d-20240208";`
	`27`	`+ var ReactVersion = "18.3.0-canary-cd63ef792-20240208";`
`28`	`28`
`29`	`29`	`// ATTENTION`
`30`	`30`	`// When adding new symbols to this file,`
Original file line number	Diff line number	Diff line change
`@@ -1 +1 @@`
`1`		`-04b59928d867dae1639f12f19700347d8f5d4cac`
	`1`	`+cd63ef79218a1d53c8739da75b154014f3b7cc73`