10
10
'use strict' ;
11
11
12
12
let React ;
13
- let ReactDOM ;
13
+ let ReactDOMClient ;
14
+
15
+ let act ;
14
16
15
17
describe ( 'getEventKey' , ( ) => {
16
18
let container ;
19
+ let root ;
17
20
18
21
beforeEach ( ( ) => {
19
22
React = require ( 'react' ) ;
20
- ReactDOM = require ( 'react-dom' ) ;
23
+ ReactDOMClient = require ( 'react-dom/client' ) ;
24
+
25
+ act = require ( 'internal-test-utils' ) . act ;
21
26
22
27
// The container has to be attached for events to fire.
23
28
container = document . createElement ( 'div' ) ;
29
+ root = ReactDOMClient . createRoot ( container ) ;
24
30
document . body . appendChild ( container ) ;
25
31
} ) ;
26
32
27
33
afterEach ( ( ) => {
28
34
document . body . removeChild ( container ) ;
29
35
container = null ;
36
+ root = null ;
30
37
} ) ;
31
38
32
39
describe ( 'when key is implemented in a browser' , ( ) => {
33
40
describe ( 'when key is not normalized' , ( ) => {
34
- it ( 'returns a normalized value' , ( ) => {
41
+ it ( 'returns a normalized value' , async ( ) => {
35
42
let key = null ;
36
43
class Comp extends React . Component {
37
44
render ( ) {
38
45
return < input onKeyDown = { e => ( key = e . key ) } /> ;
39
46
}
40
47
}
41
48
42
- ReactDOM . render ( < Comp /> , container ) ;
49
+ await act ( ( ) => {
50
+ root . render ( < Comp /> ) ;
51
+ } ) ;
43
52
44
53
const nativeEvent = new KeyboardEvent ( 'keydown' , {
45
54
key : 'Del' ,
@@ -52,15 +61,17 @@ describe('getEventKey', () => {
52
61
} ) ;
53
62
54
63
describe ( 'when key is normalized' , ( ) => {
55
- it ( 'returns a key' , ( ) => {
64
+ it ( 'returns a key' , async ( ) => {
56
65
let key = null ;
57
66
class Comp extends React . Component {
58
67
render ( ) {
59
68
return < input onKeyDown = { e => ( key = e . key ) } /> ;
60
69
}
61
70
}
62
71
63
- ReactDOM . render ( < Comp /> , container ) ;
72
+ await act ( ( ) => {
73
+ root . render ( < Comp /> ) ;
74
+ } ) ;
64
75
65
76
const nativeEvent = new KeyboardEvent ( 'keydown' , {
66
77
key : 'f' ,
@@ -76,15 +87,17 @@ describe('getEventKey', () => {
76
87
describe ( 'when key is not implemented in a browser' , ( ) => {
77
88
describe ( 'when event type is keypress' , ( ) => {
78
89
describe ( 'when charCode is 13' , ( ) => {
79
- it ( 'returns "Enter"' , ( ) => {
90
+ it ( 'returns "Enter"' , async ( ) => {
80
91
let key = null ;
81
92
class Comp extends React . Component {
82
93
render ( ) {
83
94
return < input onKeyPress = { e => ( key = e . key ) } /> ;
84
95
}
85
96
}
86
97
87
- ReactDOM . render ( < Comp /> , container ) ;
98
+ await act ( ( ) => {
99
+ root . render ( < Comp /> ) ;
100
+ } ) ;
88
101
89
102
const nativeEvent = new KeyboardEvent ( 'keypress' , {
90
103
charCode : 13 ,
@@ -97,15 +110,17 @@ describe('getEventKey', () => {
97
110
} ) ;
98
111
99
112
describe ( 'when charCode is not 13' , ( ) => {
100
- it ( 'returns a string from a charCode' , ( ) => {
113
+ it ( 'returns a string from a charCode' , async ( ) => {
101
114
let key = null ;
102
115
class Comp extends React . Component {
103
116
render ( ) {
104
117
return < input onKeyPress = { e => ( key = e . key ) } /> ;
105
118
}
106
119
}
107
120
108
- ReactDOM . render ( < Comp /> , container ) ;
121
+ await act ( ( ) => {
122
+ root . render ( < Comp /> ) ;
123
+ } ) ;
109
124
110
125
const nativeEvent = new KeyboardEvent ( 'keypress' , {
111
126
charCode : 65 ,
@@ -120,15 +135,17 @@ describe('getEventKey', () => {
120
135
121
136
describe ( 'when event type is keydown or keyup' , ( ) => {
122
137
describe ( 'when keyCode is recognized' , ( ) => {
123
- it ( 'returns a translated key' , ( ) => {
138
+ it ( 'returns a translated key' , async ( ) => {
124
139
let key = null ;
125
140
class Comp extends React . Component {
126
141
render ( ) {
127
142
return < input onKeyDown = { e => ( key = e . key ) } /> ;
128
143
}
129
144
}
130
145
131
- ReactDOM . render ( < Comp /> , container ) ;
146
+ await act ( ( ) => {
147
+ root . render ( < Comp /> ) ;
148
+ } ) ;
132
149
133
150
const nativeEvent = new KeyboardEvent ( 'keydown' , {
134
151
keyCode : 45 ,
@@ -141,15 +158,17 @@ describe('getEventKey', () => {
141
158
} ) ;
142
159
143
160
describe ( 'when keyCode is not recognized' , ( ) => {
144
- it ( 'returns Unidentified' , ( ) => {
161
+ it ( 'returns Unidentified' , async ( ) => {
145
162
let key = null ;
146
163
class Comp extends React . Component {
147
164
render ( ) {
148
165
return < input onKeyDown = { e => ( key = e . key ) } /> ;
149
166
}
150
167
}
151
168
152
- ReactDOM . render ( < Comp /> , container ) ;
169
+ await act ( ( ) => {
170
+ root . render ( < Comp /> ) ;
171
+ } ) ;
153
172
154
173
const nativeEvent = new KeyboardEvent ( 'keydown' , {
155
174
keyCode : 1337 ,
0 commit comments