Convert getEventKey-test to createRoot

facebook · Jan 19, 2024 · 2c32ab1 · 2c32ab1
1 parent feed8f3
commit 2c32ab1
Showing 1 changed file with 37 additions and 15 deletions.
diff --git a/packages/react-dom/src/events/__tests__/getEventKey-test.js b/packages/react-dom/src/events/__tests__/getEventKey-test.js
@@ -10,36 +10,48 @@
 'use strict';
 
 let React;
-let ReactDOM;
+let ReactDOMClient;
+
+let act;
 
 describe('getEventKey', () => {
   let container;
+  let root;
 
   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');
+    root = ReactDOMClient.createRoot(container);
     document.body.appendChild(container);
   });
 
-  afterEach(() => {
+  afterEach(async () => {
+    await act(() => {
+      root.unmount();
+    });
     document.body.removeChild(container);
     container = null;
+    root = null;
   });
 
   describe('when key is implemented in a browser', () => {
     describe('when key is not normalized', () => {
-      it('returns a normalized value', () => {
+      it('returns a normalized value', async () => {
         let key = null;
         class Comp extends React.Component {
           render() {
             return <input onKeyDown={e => (key = e.key)} />;
           }
         }
 
-        ReactDOM.render(<Comp />, container);
+        await act(() => {
+          root.render(<Comp />);
+        });
 
         const nativeEvent = new KeyboardEvent('keydown', {
           key: 'Del',
@@ -52,15 +64,17 @@ describe('getEventKey', () => {
     });
 
     describe('when key is normalized', () => {
-      it('returns a key', () => {
+      it('returns a key', async () => {
         let key = null;
         class Comp extends React.Component {
           render() {
             return <input onKeyDown={e => (key = e.key)} />;
           }
         }
 
-        ReactDOM.render(<Comp />, container);
+        await act(() => {
+          root.render(<Comp />);
+        });
 
         const nativeEvent = new KeyboardEvent('keydown', {
           key: 'f',
@@ -76,15 +90,17 @@ describe('getEventKey', () => {
   describe('when key is not implemented in a browser', () => {
     describe('when event type is keypress', () => {
       describe('when charCode is 13', () => {
-        it('returns "Enter"', () => {
+        it('returns "Enter"', async () => {
           let key = null;
           class Comp extends React.Component {
             render() {
               return <input onKeyPress={e => (key = e.key)} />;
             }
           }
 
-          ReactDOM.render(<Comp />, container);
+          await act(() => {
+            root.render(<Comp />);
+          });
 
           const nativeEvent = new KeyboardEvent('keypress', {
             charCode: 13,
@@ -97,15 +113,17 @@ describe('getEventKey', () => {
       });
 
       describe('when charCode is not 13', () => {
-        it('returns a string from a charCode', () => {
+        it('returns a string from a charCode', async () => {
           let key = null;
           class Comp extends React.Component {
             render() {
               return <input onKeyPress={e => (key = e.key)} />;
             }
           }
 
-          ReactDOM.render(<Comp />, container);
+          await act(() => {
+            root.render(<Comp />);
+          });
 
           const nativeEvent = new KeyboardEvent('keypress', {
             charCode: 65,
@@ -120,15 +138,17 @@ describe('getEventKey', () => {
 
     describe('when event type is keydown or keyup', () => {
       describe('when keyCode is recognized', () => {
-        it('returns a translated key', () => {
+        it('returns a translated key', async () => {
           let key = null;
           class Comp extends React.Component {
             render() {
               return <input onKeyDown={e => (key = e.key)} />;
             }
           }
 
-          ReactDOM.render(<Comp />, container);
+          await act(() => {
+            root.render(<Comp />);
+          });
 
           const nativeEvent = new KeyboardEvent('keydown', {
             keyCode: 45,
@@ -141,15 +161,17 @@ describe('getEventKey', () => {
       });
 
       describe('when keyCode is not recognized', () => {
-        it('returns Unidentified', () => {
+        it('returns Unidentified', async () => {
           let key = null;
           class Comp extends React.Component {
             render() {
               return <input onKeyDown={e => (key = e.key)} />;
             }
           }
 
-          ReactDOM.render(<Comp />, container);
+          await act(() => {
+            root.render(<Comp />);
+          });
 
           const nativeEvent = new KeyboardEvent('keydown', {
             keyCode: 1337,