Convert SyntheticClipboardEvent to createRoot (#28174)

Author: eps1lon

packages/react-dom/src/events/__tests__/SyntheticClipboardEvent-test.js

@@ -10,14 +10,16 @@
 'use strict';
 
 let React;
-let ReactDOM;
+let ReactDOMClient;
+let act;
 
 describe('SyntheticClipboardEvent', () => {
   let container;
 
   beforeEach(() => {
     React = require('react');
-    ReactDOM = require('react-dom');
+    ReactDOMClient = require('react-dom/client');
+    act = require('internal-test-utils').act;
 
     // The container has to be attached for events to fire.
     container = document.createElement('div');
@@ -32,7 +34,7 @@ describe('SyntheticClipboardEvent', () => {
   describe('ClipboardEvent interface', () => {
     describe('clipboardData', () => {
       describe('when event has clipboardData', () => {
-        it("returns event's clipboardData", () => {
+        it("returns event's clipboardData", async () => {
           let expectedCount = 0;
 
           // Mock clipboardData since jsdom implementation doesn't have a constructor
@@ -47,30 +49,39 @@ describe('SyntheticClipboardEvent', () => {
             expect(event.clipboardData).toBe(clipboardData);
             expectedCount++;
           };
-          const div = ReactDOM.render(
-            <div
-              onCopy={eventHandler}
-              onCut={eventHandler}
-              onPaste={eventHandler}
-            />,
-            container,
-          );
+          const root = ReactDOMClient.createRoot(container);
+          await act(() => {
+            root.render(
+              <div
+                onCopy={eventHandler}
+                onCut={eventHandler}
+                onPaste={eventHandler}
+              />,
+            );
+          });
+
+          const div = container.firstChild;
 
           let event;
           event = document.createEvent('Event');
           event.initEvent('copy', true, true);
           event.clipboardData = clipboardData;
-          div.dispatchEvent(event);
-
+          await act(() => {
+            div.dispatchEvent(event);
+          });
           event = document.createEvent('Event');
           event.initEvent('cut', true, true);
           event.clipboardData = clipboardData;
-          div.dispatchEvent(event);
+          await act(() => {
+            div.dispatchEvent(event);
+          });
 
           event = document.createEvent('Event');
           event.initEvent('paste', true, true);
           event.clipboardData = clipboardData;
-          div.dispatchEvent(event);
+          await act(() => {
+            div.dispatchEvent(event);
+          });
 
           expect(expectedCount).toBe(3);
         });
@@ -79,7 +90,7 @@ describe('SyntheticClipboardEvent', () => {
   });
 
   describe('EventInterface', () => {
-    it('is able to `preventDefault` and `stopPropagation`', () => {
+    it('is able to `preventDefault` and `stopPropagation`', async () => {
       let expectedCount = 0;
 
       const eventHandler = event => {
@@ -92,14 +103,19 @@ describe('SyntheticClipboardEvent', () => {
         expectedCount++;
       };
 
-      const div = ReactDOM.render(
-        <div
-          onCopy={eventHandler}
-          onCut={eventHandler}
-          onPaste={eventHandler}
-        />,
-        container,
-      );
+      const root = ReactDOMClient.createRoot(container);
+
+      await act(() => {
+        root.render(
+          <div
+            onCopy={eventHandler}
+            onCut={eventHandler}
+            onPaste={eventHandler}
+          />,
+        );
+      });
+
+      const div = container.firstChild;
 
       let event;
       event = document.createEvent('Event');