From afe33517b9733ff10f74cb18a4d612bdc8bafec9 Mon Sep 17 00:00:00 2001
From: Jack Pope <jackpope@meta.com>
Date: Mon, 22 Jan 2024 16:58:13 -0500
Subject: [PATCH 1/3] Use createRoot in ReactEventIndependence-test

---
 .../__tests__/ReactEventIndependence-test.js  | 64 +++++++------------
 1 file changed, 23 insertions(+), 41 deletions(-)

diff --git a/packages/react-dom/src/__tests__/ReactEventIndependence-test.js b/packages/react-dom/src/__tests__/ReactEventIndependence-test.js
index 71974fbdd57b7..b33e7291261cb 100644
--- a/packages/react-dom/src/__tests__/ReactEventIndependence-test.js
+++ b/packages/react-dom/src/__tests__/ReactEventIndependence-test.js
@@ -10,74 +10,56 @@
 'use strict';
 
 let React;
-let ReactDOM;
+let ReactDOMClient;
+let act;
 
 describe('ReactEventIndependence', () => {
   beforeEach(() => {
     jest.resetModules();
 
     React = require('react');
-    ReactDOM = require('react-dom');
+    ReactDOMClient = require('react-dom/client');
+    act = require('internal-test-utils').act;
   });
 
-  it('does not crash with other react inside', () => {
+  it('does not crash with other react inside', async () => {
     let clicks = 0;
     const container = document.createElement('div');
     document.body.appendChild(container);
+    const root = ReactDOMClient.createRoot(container);
     try {
-      const div = ReactDOM.render(
-        <div
-          onClick={() => clicks++}
-          dangerouslySetInnerHTML={{
-            __html: '<button data-reactid=".z">click me</div>',
-          }}
-        />,
-        container,
-      );
+      await act(() => {
+        root.render(
+          <div
+            onClick={() => clicks++}
+            dangerouslySetInnerHTML={{
+              __html: '<button data-reactid=".z">click me</div>',
+            }}
+          />,
+        );
+      });
 
-      div.firstChild.click();
+      container.firstElementChild.click();
       expect(clicks).toBe(1);
     } finally {
       document.body.removeChild(container);
     }
   });
 
-  it('does not crash with other react outside', () => {
+  it('does not crash with other react outside', async () => {
     let clicks = 0;
     const outer = document.createElement('div');
     document.body.appendChild(outer);
+    const root = ReactDOMClient.createRoot(outer);
     try {
       outer.setAttribute('data-reactid', '.z');
-      const inner = ReactDOM.render(
-        <button onClick={() => clicks++}>click me</button>,
-        outer,
-      );
-      inner.click();
+      await act(() => {
+        root.render(<button onClick={() => clicks++}>click me</button>);
+      });
+      outer.firstElementChild.click();
       expect(clicks).toBe(1);
     } finally {
       document.body.removeChild(outer);
     }
   });
-
-  it('does not when event fired on unmounted tree', () => {
-    let clicks = 0;
-    const container = document.createElement('div');
-    document.body.appendChild(container);
-    try {
-      const button = ReactDOM.render(
-        <button onClick={() => clicks++}>click me</button>,
-        container,
-      );
-
-      // Now we unmount the component, as if caused by a non-React event handler
-      // for the same click we're about to simulate, like closing a layer:
-      ReactDOM.unmountComponentAtNode(container);
-      button.click();
-
-      // Since the tree is unmounted, we don't dispatch the click event.
-      expect(clicks).toBe(0);
-    } finally {
-      document.body.removeChild(container);
-    }
-  });
 });

From 5145a9eaef8694fc7ecdd8c7d409792a8990d7b4 Mon Sep 17 00:00:00 2001
From: Jack Pope <jackpope@meta.com>
Date: Tue, 23 Jan 2024 11:55:47 -0500
Subject: [PATCH 2/3] Add unmounted tree test case back in

---
 .../__tests__/ReactEventIndependence-test.js  | 27 +++++++++++++++++++
 1 file changed, 27 insertions(+)

diff --git a/packages/react-dom/src/__tests__/ReactEventIndependence-test.js b/packages/react-dom/src/__tests__/ReactEventIndependence-test.js
index b33e7291261cb..5838339f867e7 100644
--- a/packages/react-dom/src/__tests__/ReactEventIndependence-test.js
+++ b/packages/react-dom/src/__tests__/ReactEventIndependence-test.js
@@ -12,12 +12,14 @@
 let React;
 let ReactDOMClient;
 let act;
+let ReactDOM;
 
 describe('ReactEventIndependence', () => {
   beforeEach(() => {
     jest.resetModules();
 
     React = require('react');
+    ReactDOM = require('react-dom');
     ReactDOMClient = require('react-dom/client');
     act = require('internal-test-utils').act;
   });
@@ -62,4 +64,29 @@ describe('ReactEventIndependence', () => {
       document.body.removeChild(outer);
     }
   });
+
+  it('does not when event fired on unmounted tree', async () => {
+    let clicks = 0;
+    const container = document.createElement('div');
+    document.body.appendChild(container);
+    try {
+      const root = ReactDOMClient.createRoot(container);
+
+      await act(() => {
+        root.render(<button onClick={() => clicks++}>click me</button>);
+      });
+
+      const button = container.firstChild;
+
+      // Now we unmount the component, as if caused by a non-React event handler
+      // for the same click we're about to simulate, like closing a layer:
+      root.unmount();
+      button.click();
+
+      // Since the tree is unmounted, we don't dispatch the click event.
+      expect(clicks).toBe(0);
+    } finally {
+      document.body.removeChild(container);
+    }
+  });
 });

From a9b85a8d4b8546eb290d881b4cdd6a24f6375a75 Mon Sep 17 00:00:00 2001
From: Jack Pope <jackpope@meta.com>
Date: Tue, 23 Jan 2024 17:09:34 -0500
Subject: [PATCH 3/3] lint fix

---
 packages/react-dom/src/__tests__/ReactEventIndependence-test.js | 2 --
 1 file changed, 2 deletions(-)

diff --git a/packages/react-dom/src/__tests__/ReactEventIndependence-test.js b/packages/react-dom/src/__tests__/ReactEventIndependence-test.js
index 5838339f867e7..05cbca61752f6 100644
--- a/packages/react-dom/src/__tests__/ReactEventIndependence-test.js
+++ b/packages/react-dom/src/__tests__/ReactEventIndependence-test.js
@@ -12,14 +12,12 @@
 let React;
 let ReactDOMClient;
 let act;
-let ReactDOM;
 
 describe('ReactEventIndependence', () => {
   beforeEach(() => {
     jest.resetModules();
 
     React = require('react');
-    ReactDOM = require('react-dom');
     ReactDOMClient = require('react-dom/client');
     act = require('internal-test-utils').act;
   });