Use createRoot in useFocus-test (#28083)
Jack Pope committed
Jan 25, 2024 at 12:10 UTC
a41ebfc5f64933019a0accb13d147c7361a9c281
1 file changed
+14
-9
packages/react-interactions/events/src/dom/create-event-handle/__tests__/useFocus-test.internal.js
+14
-9
@@ -13,7 +13,7 @@ import {createEventTarget, setPointerEvent} from 'dom-event-testing-library';
13
14
let React;
15
let ReactFeatureFlags;
16
-let ReactDOM;
16
+let ReactDOMClient;
17
let useFocus;
18
let act;
19
@@ -23,7 +23,7 @@ function initializeModules(hasPointerEvents) {
23
ReactFeatureFlags = require('shared/ReactFeatureFlags');
24
ReactFeatureFlags.enableCreateEventHandleAPI = true;
25
React = require('react');
26
- ReactDOM = require('react-dom');
26
+ ReactDOMClient = require('react-dom/client');
27
act = require('internal-test-utils').act;
28
// TODO: This import throws outside of experimental mode. Figure out better
29
// strategy for gated imports.
@@ -45,7 +45,6 @@ describe.each(table)(`useFocus hasPointerEvents=%s`, hasPointerEvents => {
45
});
46
47
afterEach(() => {
48
- ReactDOM.render(null, container);
48
document.body.removeChild(container);
49
container = null;
50
});
@@ -65,8 +64,9 @@ describe.each(table)(`useFocus hasPointerEvents=%s`, hasPointerEvents => {
64
});
65
return <div ref={ref} />;
66
};
67
+ const root = ReactDOMClient.createRoot(container);
68
await act(() => {
69
- ReactDOM.render(<Component />, container);
69
+ root.render(<Component />);
70
});
71
};
72
@@ -93,8 +93,9 @@ describe.each(table)(`useFocus hasPointerEvents=%s`, hasPointerEvents => {
93
});
94
return <div ref={ref} />;
95
};
96
+ const root = ReactDOMClient.createRoot(container);
97
await act(() => {
97
- ReactDOM.render(<Component />, container);
98
+ root.render(<Component />);
99
});
100
};
101
@@ -125,8 +126,9 @@ describe.each(table)(`useFocus hasPointerEvents=%s`, hasPointerEvents => {
126
</div>
127
);
128
};
129
+ const root = ReactDOMClient.createRoot(container);
130
await act(() => {
129
- ReactDOM.render(<Component />, container);
131
+ root.render(<Component />);
132
});
133
};
134
@@ -164,8 +166,9 @@ describe.each(table)(`useFocus hasPointerEvents=%s`, hasPointerEvents => {
166
</div>
167
);
168
};
169
+ const root = ReactDOMClient.createRoot(container);
170
await act(() => {
168
- ReactDOM.render(<Component />, container);
171
+ root.render(<Component />);
172
});
173
};
174
@@ -209,8 +212,9 @@ describe.each(table)(`useFocus hasPointerEvents=%s`, hasPointerEvents => {
212
</div>
213
);
214
};
215
+ const root = ReactDOMClient.createRoot(container);
216
await act(() => {
213
- ReactDOM.render(<Component />, container);
217
+ root.render(<Component />);
218
});
219
};
220
@@ -305,8 +309,9 @@ describe.each(table)(`useFocus hasPointerEvents=%s`, hasPointerEvents => {
309
);
310
};
311
312
+ const root = ReactDOMClient.createRoot(container);
313
await act(() => {
309
- ReactDOM.render(<Outer />, container);
314
+ root.render(<Outer />);
315
});
316
const innerTarget = createEventTarget(innerRef.current);
317
const outerTarget = createEventTarget(outerRef.current);