1010'use strict' ;
1111
1212let React ;
13- let ReactDOM ;
13+ let ReactDOMClient ;
14+
15+ let act ;
1416
1517describe ( 'getEventKey' , ( ) => {
1618 let container ;
19+ let root ;
1720
1821 beforeEach ( ( ) => {
1922 React = require ( 'react' ) ;
20- ReactDOM = require ( 'react-dom' ) ;
23+ ReactDOMClient = require ( 'react-dom/client' ) ;
24+
25+ act = require ( 'internal-test-utils' ) . act ;
2126
2227 // The container has to be attached for events to fire.
2328 container = document . createElement ( 'div' ) ;
29+ root = ReactDOMClient . createRoot ( container ) ;
2430 document . body . appendChild ( container ) ;
2531 } ) ;
2632
2733 afterEach ( ( ) => {
2834 document . body . removeChild ( container ) ;
2935 container = null ;
36+ root = null ;
3037 } ) ;
3138
3239 describe ( 'when key is implemented in a browser' , ( ) => {
3340 describe ( 'when key is not normalized' , ( ) => {
34- it ( 'returns a normalized value' , ( ) => {
41+ it ( 'returns a normalized value' , async ( ) => {
3542 let key = null ;
3643 class Comp extends React . Component {
3744 render ( ) {
3845 return < input onKeyDown = { e => ( key = e . key ) } /> ;
3946 }
4047 }
4148
42- ReactDOM . render ( < Comp /> , container ) ;
49+ await act ( ( ) => {
50+ root . render ( < Comp /> ) ;
51+ } ) ;
4352
4453 const nativeEvent = new KeyboardEvent ( 'keydown' , {
4554 key : 'Del' ,
@@ -52,15 +61,17 @@ describe('getEventKey', () => {
5261 } ) ;
5362
5463 describe ( 'when key is normalized' , ( ) => {
55- it ( 'returns a key' , ( ) => {
64+ it ( 'returns a key' , async ( ) => {
5665 let key = null ;
5766 class Comp extends React . Component {
5867 render ( ) {
5968 return < input onKeyDown = { e => ( key = e . key ) } /> ;
6069 }
6170 }
6271
63- ReactDOM . render ( < Comp /> , container ) ;
72+ await act ( ( ) => {
73+ root . render ( < Comp /> ) ;
74+ } ) ;
6475
6576 const nativeEvent = new KeyboardEvent ( 'keydown' , {
6677 key : 'f' ,
@@ -76,15 +87,17 @@ describe('getEventKey', () => {
7687 describe ( 'when key is not implemented in a browser' , ( ) => {
7788 describe ( 'when event type is keypress' , ( ) => {
7889 describe ( 'when charCode is 13' , ( ) => {
79- it ( 'returns "Enter"' , ( ) => {
90+ it ( 'returns "Enter"' , async ( ) => {
8091 let key = null ;
8192 class Comp extends React . Component {
8293 render ( ) {
8394 return < input onKeyPress = { e => ( key = e . key ) } /> ;
8495 }
8596 }
8697
87- ReactDOM . render ( < Comp /> , container ) ;
98+ await act ( ( ) => {
99+ root . render ( < Comp /> ) ;
100+ } ) ;
88101
89102 const nativeEvent = new KeyboardEvent ( 'keypress' , {
90103 charCode : 13 ,
@@ -97,15 +110,17 @@ describe('getEventKey', () => {
97110 } ) ;
98111
99112 describe ( 'when charCode is not 13' , ( ) => {
100- it ( 'returns a string from a charCode' , ( ) => {
113+ it ( 'returns a string from a charCode' , async ( ) => {
101114 let key = null ;
102115 class Comp extends React . Component {
103116 render ( ) {
104117 return < input onKeyPress = { e => ( key = e . key ) } /> ;
105118 }
106119 }
107120
108- ReactDOM . render ( < Comp /> , container ) ;
121+ await act ( ( ) => {
122+ root . render ( < Comp /> ) ;
123+ } ) ;
109124
110125 const nativeEvent = new KeyboardEvent ( 'keypress' , {
111126 charCode : 65 ,
@@ -120,15 +135,17 @@ describe('getEventKey', () => {
120135
121136 describe ( 'when event type is keydown or keyup' , ( ) => {
122137 describe ( 'when keyCode is recognized' , ( ) => {
123- it ( 'returns a translated key' , ( ) => {
138+ it ( 'returns a translated key' , async ( ) => {
124139 let key = null ;
125140 class Comp extends React . Component {
126141 render ( ) {
127142 return < input onKeyDown = { e => ( key = e . key ) } /> ;
128143 }
129144 }
130145
131- ReactDOM . render ( < Comp /> , container ) ;
146+ await act ( ( ) => {
147+ root . render ( < Comp /> ) ;
148+ } ) ;
132149
133150 const nativeEvent = new KeyboardEvent ( 'keydown' , {
134151 keyCode : 45 ,
@@ -141,15 +158,17 @@ describe('getEventKey', () => {
141158 } ) ;
142159
143160 describe ( 'when keyCode is not recognized' , ( ) => {
144- it ( 'returns Unidentified' , ( ) => {
161+ it ( 'returns Unidentified' , async ( ) => {
145162 let key = null ;
146163 class Comp extends React . Component {
147164 render ( ) {
148165 return < input onKeyDown = { e => ( key = e . key ) } /> ;
149166 }
150167 }
151168
152- ReactDOM . render ( < Comp /> , container ) ;
169+ await act ( ( ) => {
170+ root . render ( < Comp /> ) ;
171+ } ) ;
153172
154173 const nativeEvent = new KeyboardEvent ( 'keydown' , {
155174 keyCode : 1337 ,
0 commit comments