Convert createReactClassIntegration to createRoot (#28196)
Sebastian Silbermann committed
Feb 2, 2024 at 09:15 UTC
02946228e1af3744878d964a58ea7cd55b563468
1 file changed
+55
-26
packages/react/src/__tests__/createReactClassIntegration-test.js
+55
-26
@@ -14,7 +14,6 @@ let act;
14
let PropTypes;
15
let React;
16
let ReactDOMClient;
17
-let ReactTestUtils;
17
let createReactClass;
18
19
describe('create-react-class-integration', () => {
@@ -24,7 +23,6 @@ describe('create-react-class-integration', () => {
23
PropTypes = require('prop-types');
24
React = require('react');
25
ReactDOMClient = require('react-dom/client');
27
- ReactTestUtils = require('react-dom/test-utils');
26
createReactClass = require('create-react-class/factory')(
27
React.Component,
28
React.isValidElement,
@@ -231,7 +229,7 @@ describe('create-react-class-integration', () => {
229
]);
230
});
231
234
- it('should support statics', () => {
232
+ it('should support statics', async () => {
233
const Component = createReactClass({
234
statics: {
235
abc: 'def',
@@ -247,8 +245,13 @@ describe('create-react-class-integration', () => {
245
return <span />;
246
},
247
});
250
- let instance = <Component />;
251
- instance = ReactTestUtils.renderIntoDocument(instance);
248
+ const container = document.createElement('div');
249
+ const root = ReactDOMClient.createRoot(container);
250
+ let instance;
251
+ await act(() => {
252
+ root.render(<Component ref={current => (instance = current)} />);
253
+ });
254
+
255
expect(instance.constructor.abc).toBe('def');
256
expect(Component.abc).toBe('def');
257
expect(instance.constructor.def).toBe(0);
@@ -261,7 +264,7 @@ describe('create-react-class-integration', () => {
264
expect(Component.pqr()).toBe(Component);
265
});
266
264
- it('should work with object getInitialState() return values', () => {
267
+ it('should work with object getInitialState() return values', async () => {
268
const Component = createReactClass({
269
getInitialState: function () {
270
return {
@@ -272,12 +275,17 @@ describe('create-react-class-integration', () => {
275
return <span />;
276
},
277
});
275
- let instance = <Component />;
276
- instance = ReactTestUtils.renderIntoDocument(instance);
278
+ const container = document.createElement('div');
279
+ const root = ReactDOMClient.createRoot(container);
280
+ let instance;
281
+ await act(() => {
282
+ root.render(<Component ref={current => (instance = current)} />);
283
+ });
284
+
285
expect(instance.state.occupation).toEqual('clown');
286
});
287
280
- it('should work with getDerivedStateFromProps() return values', () => {
288
+ it('should work with getDerivedStateFromProps() return values', async () => {
289
const Component = createReactClass({
290
getInitialState() {
291
return {};
@@ -289,8 +297,12 @@ describe('create-react-class-integration', () => {
297
Component.getDerivedStateFromProps = () => {
298
return {occupation: 'clown'};
299
};
292
- let instance = <Component />;
293
- instance = ReactTestUtils.renderIntoDocument(instance);
300
+ let instance;
301
+ const container = document.createElement('div');
302
+ const root = ReactDOMClient.createRoot(container);
303
+ await act(() => {
304
+ root.render(<Component ref={current => (instance = current)} />);
305
+ });
306
expect(instance.state.occupation).toEqual('clown');
307
});
308
@@ -328,8 +340,9 @@ describe('create-react-class-integration', () => {
340
expect(container.firstChild.className).toBe('foo');
341
});
342
331
- it('should throw with non-object getInitialState() return values', () => {
332
- [['an array'], 'a string', 1234].forEach(function (state) {
343
+ it('should throw with non-object getInitialState() return values', async () => {
344
+ // eslint-disable-next-line no-for-of-loops/no-for-of-loops
345
+ for (const state of [['an array'], 'a string', 1234]) {
346
const Component = createReactClass({
347
getInitialState: function () {
348
return state;
@@ -338,16 +351,19 @@ describe('create-react-class-integration', () => {
351
return <span />;
352
},
353
});
341
- let instance = <Component />;
342
- expect(function () {
343
- instance = ReactTestUtils.renderIntoDocument(instance);
344
- }).toThrowError(
354
+ const container = document.createElement('div');
355
+ const root = ReactDOMClient.createRoot(container);
356
+ await expect(
357
+ act(() => {
358
+ root.render(<Component />);
359
+ }),
360
+ ).rejects.toThrowError(
361
'Component.getInitialState(): must return an object or null',
362
);
347
- });
363
+ }
364
});
365
350
- it('should work with a null getInitialState() return value', () => {
366
+ it('should work with a null getInitialState() return value', async () => {
367
const Component = createReactClass({
368
getInitialState: function () {
369
return null;
@@ -356,9 +372,13 @@ describe('create-react-class-integration', () => {
372
return <span />;
373
},
374
});
359
- expect(() =>
360
- ReactTestUtils.renderIntoDocument(<Component />),
361
- ).not.toThrow();
375
+ const container = document.createElement('div');
376
+ const root = ReactDOMClient.createRoot(container);
377
+ await expect(
378
+ act(() => {
379
+ root.render(<Component />);
380
+ }),
381
+ ).resolves.not.toThrow();
382
});
383
384
it('should throw when using legacy factories', () => {
@@ -375,7 +395,7 @@ describe('create-react-class-integration', () => {
395
);
396
});
397
378
- it('replaceState and callback works', () => {
398
+ it('replaceState and callback works', async () => {
399
const ops = [];
400
const Component = createReactClass({
401
getInitialState() {
@@ -387,10 +407,19 @@ describe('create-react-class-integration', () => {
407
},
408
});
409
390
- const instance = ReactTestUtils.renderIntoDocument(<Component />);
391
- instance.replaceState({step: 1}, () => {
392
- ops.push('Callback: ' + instance.state.step);
410
+ const container = document.createElement('div');
411
+ const root = ReactDOMClient.createRoot(container);
412
+ let instance;
413
+ await act(() => {
414
+ root.render(<Component ref={current => (instance = current)} />);
415
+ });
416
+
417
+ await act(() => {
418
+ instance.replaceState({step: 1}, () => {
419
+ ops.push('Callback: ' + instance.state.step);
420
+ });
421
});
422
+
423
expect(ops).toEqual(['Render: 0', 'Render: 1', 'Callback: 1']);
424
});
425