Convert ReactLegacyContextDisabled-test.internal to createRoot (#28093)
Convert ReactLegacyContextDisabled-test.internal to createRoot
Jan Kassens committed
Jan 25, 2024 at 16:02 UTC
c7e735f625450d11438a87bb6ff6af15b3958a8f
1 file changed
+66
-57
packages/react-dom/src/__tests__/ReactLegacyContextDisabled-test.internal.js
+66
-57
@@ -10,19 +10,21 @@
10
'use strict';
11
12
let React;
13
-let ReactDOM;
13
+let ReactDOMClient;
14
let ReactDOMServer;
15
let ReactFeatureFlags;
16
+let act;
17
18
describe('ReactLegacyContextDisabled', () => {
19
beforeEach(() => {
20
jest.resetModules();
21
22
React = require('react');
22
- ReactDOM = require('react-dom');
23
+ ReactDOMClient = require('react-dom/client');
24
ReactDOMServer = require('react-dom/server');
25
ReactFeatureFlags = require('shared/ReactFeatureFlags');
26
ReactFeatureFlags.disableLegacyContext = true;
27
+ act = require('internal-test-utils').act;
28
});
29
30
function formatValue(val) {
@@ -38,7 +40,7 @@ describe('ReactLegacyContextDisabled', () => {
40
return JSON.stringify(val);
41
}
42
41
- it('warns for legacy context', () => {
43
+ it('warns for legacy context', async () => {
44
class LegacyProvider extends React.Component {
45
static childContextTypes = {
46
foo() {},
@@ -81,17 +83,19 @@ describe('ReactLegacyContextDisabled', () => {
83
}
84
85
const container = document.createElement('div');
84
- expect(() => {
85
- ReactDOM.render(
86
- <LegacyProvider>
87
- <span>
88
- <LegacyClsConsumer />
89
- <LegacyFnConsumer />
90
- <RegularFn />
91
- </span>
92
- </LegacyProvider>,
93
- container,
94
- );
86
+ const root = ReactDOMClient.createRoot(container);
87
+ await expect(async () => {
88
+ await act(() => {
89
+ root.render(
90
+ <LegacyProvider>
91
+ <span>
92
+ <LegacyClsConsumer />
93
+ <LegacyFnConsumer />
94
+ <RegularFn />
95
+ </span>
96
+ </LegacyProvider>,
97
+ );
98
+ });
99
}).toErrorDev([
100
'LegacyProvider uses the legacy childContextTypes API which is no longer supported. ' +
101
'Use React.createContext() instead.',
@@ -104,19 +108,20 @@ describe('ReactLegacyContextDisabled', () => {
108
expect(lifecycleContextLog).toEqual([]);
109
110
// Test update path.
107
- ReactDOM.render(
108
- <LegacyProvider>
109
- <span>
110
- <LegacyClsConsumer />
111
- <LegacyFnConsumer />
112
- <RegularFn />
113
- </span>
114
- </LegacyProvider>,
115
- container,
116
- );
111
+ await act(() => {
112
+ root.render(
113
+ <LegacyProvider>
114
+ <span>
115
+ <LegacyClsConsumer />
116
+ <LegacyFnConsumer />
117
+ <RegularFn />
118
+ </span>
119
+ </LegacyProvider>,
120
+ );
121
+ });
122
expect(container.textContent).toBe('{}undefinedundefined');
123
expect(lifecycleContextLog).toEqual([{}, {}, {}]);
119
- ReactDOM.unmountComponentAtNode(container);
124
+ root.unmount();
125
126
// test server path.
127
let text;
@@ -143,7 +148,7 @@ describe('ReactLegacyContextDisabled', () => {
148
expect(lifecycleContextLog).toEqual([{}, {}, {}]);
149
});
150
146
- it('renders a tree with modern context', () => {
151
+ it('renders a tree with modern context', async () => {
152
const Ctx = React.createContext();
153
154
class Provider extends React.Component {
@@ -185,44 +190,48 @@ describe('ReactLegacyContextDisabled', () => {
190
}
191
192
const container = document.createElement('div');
188
- ReactDOM.render(
189
- <Provider value="a">
190
- <span>
191
- <RenderPropConsumer />
192
- <ContextTypeConsumer />
193
- <FnConsumer />
194
- </span>
195
- </Provider>,
196
- container,
197
- );
193
+ const root = ReactDOMClient.createRoot(container);
194
+ await act(() => {
195
+ root.render(
196
+ <Provider value="a">
197
+ <span>
198
+ <RenderPropConsumer />
199
+ <ContextTypeConsumer />
200
+ <FnConsumer />
201
+ </span>
202
+ </Provider>,
203
+ );
204
+ });
205
expect(container.textContent).toBe('aaa');
206
expect(lifecycleContextLog).toEqual([]);
207
208
// Test update path
202
- ReactDOM.render(
203
- <Provider value="a">
204
- <span>
205
- <RenderPropConsumer />
206
- <ContextTypeConsumer />
207
- <FnConsumer />
208
- </span>
209
- </Provider>,
210
- container,
211
- );
209
+ await act(() => {
210
+ root.render(
211
+ <Provider value="a">
212
+ <span>
213
+ <RenderPropConsumer />
214
+ <ContextTypeConsumer />
215
+ <FnConsumer />
216
+ </span>
217
+ </Provider>,
218
+ );
219
+ });
220
expect(container.textContent).toBe('aaa');
221
expect(lifecycleContextLog).toEqual(['a', 'a', 'a']);
222
lifecycleContextLog.length = 0;
223
216
- ReactDOM.render(
217
- <Provider value="b">
218
- <span>
219
- <RenderPropConsumer />
220
- <ContextTypeConsumer />
221
- <FnConsumer />
222
- </span>
223
- </Provider>,
224
- container,
225
- );
224
+ await act(() => {
225
+ root.render(
226
+ <Provider value="b">
227
+ <span>
228
+ <RenderPropConsumer />
229
+ <ContextTypeConsumer />
230
+ <FnConsumer />
231
+ </span>
232
+ </Provider>,
233
+ );
234
+ });
235
expect(container.textContent).toBe('bbb');
236
if (gate(flags => flags.enableLazyContextPropagation)) {
237
// In the lazy propagation implementation, we don't check if context
@@ -233,6 +242,6 @@ describe('ReactLegacyContextDisabled', () => {
242
// changed, so we skipped sCU.
243
expect(lifecycleContextLog).toEqual(['b', 'b']);
244
}
236
- ReactDOM.unmountComponentAtNode(container);
245
+ root.unmount();
246
});
247
});