@@ -122,7 +122,7 @@ describe('ReactDOMServerHydration', () => {
122
122
// We have a polyfill for autoFocus on the client, but we intentionally don't
123
123
// want it to call focus() when hydrating because this can mess up existing
124
124
// focus before the JS has loaded.
125
- it ( 'should emit autofocus on the server but not focus() when hydrating' , ( ) => {
125
+ it ( 'should emit autofocus on the server but not focus() when hydrating' , async ( ) => {
126
126
const element = document . createElement ( 'div' ) ;
127
127
element . innerHTML = ReactDOMServer . renderToString (
128
128
< input autoFocus = { true } /> ,
@@ -131,26 +131,35 @@ describe('ReactDOMServerHydration', () => {
131
131
132
132
// It should not be called on mount.
133
133
element . firstChild . focus = jest . fn ( ) ;
134
- ReactDOM . hydrate ( < input autoFocus = { true } /> , element ) ;
134
+ const root = await act ( ( ) =>
135
+ ReactDOMClient . hydrateRoot ( element , < input autoFocus = { true } /> ) ,
136
+ ) ;
135
137
expect ( element . firstChild . focus ) . not . toHaveBeenCalled ( ) ;
136
138
137
139
// Or during an update.
138
- ReactDOM . render ( < input autoFocus = { true } /> , element ) ;
140
+ await act ( ( ) => {
141
+ root . render ( < input autoFocus = { true } /> ) ;
142
+ } ) ;
139
143
expect ( element . firstChild . focus ) . not . toHaveBeenCalled ( ) ;
140
144
} ) ;
141
145
142
- it ( 'should not focus on either server or client with autofocus={false}' , ( ) => {
146
+ it ( 'should not focus on either server or client with autofocus={false}' , async ( ) => {
143
147
const element = document . createElement ( 'div' ) ;
144
148
element . innerHTML = ReactDOMServer . renderToString (
145
149
< input autoFocus = { false } /> ,
146
150
) ;
147
151
expect ( element . firstChild . autofocus ) . toBe ( false ) ;
148
152
149
153
element . firstChild . focus = jest . fn ( ) ;
150
- ReactDOM . hydrate ( < input autoFocus = { false } /> , element ) ;
154
+ const root = await act ( ( ) =>
155
+ ReactDOMClient . hydrateRoot ( element , < input autoFocus = { false } /> ) ,
156
+ ) ;
157
+
151
158
expect ( element . firstChild . focus ) . not . toHaveBeenCalled ( ) ;
152
159
153
- ReactDOM . render ( < input autoFocus = { false } /> , element ) ;
160
+ await act ( ( ) => {
161
+ root . render ( < input autoFocus = { false } /> ) ;
162
+ } ) ;
154
163
expect ( element . firstChild . focus ) . not . toHaveBeenCalled ( ) ;
155
164
} ) ;
156
165
0 commit comments