Use createRoot in ReactART-test (#28060)
Stacked on #28059 ---------
Jack Pope committed
Jan 23, 2024 at 17:25 UTC
6e03d0df82020a77a8c6afff7ef31a4f6d31911e
1 file changed
+53
-36
packages/react-art/src/__tests__/ReactART-test.js
+53
-36
@@ -24,7 +24,7 @@ import Wedge from 'react-art/Wedge';
24
25
// Isolate DOM renderer.
26
jest.resetModules();
27
-const ReactDOM = require('react-dom');
27
+
28
const ReactDOMClient = require('react-dom/client');
29
const act = require('internal-test-utils').act;
30
@@ -178,11 +178,11 @@ describe('ReactART', () => {
178
testDOMNodeStructure(realNode, expectedStructure);
179
});
180
181
- it('should be able to reorder components', () => {
182
- const instance = ReactDOM.render(
183
- <TestComponent flipped={false} />,
184
- container,
185
- );
181
+ it('should be able to reorder components', async () => {
182
+ const root = ReactDOMClient.createRoot(container);
183
+ await act(() => {
184
+ root.render(<TestComponent flipped={false} />);
185
+ });
186
187
const expectedStructure = {
188
nodeName: 'svg',
@@ -200,10 +200,12 @@ describe('ReactART', () => {
200
],
201
};
202
203
- const realNode = ReactDOM.findDOMNode(instance);
203
+ const realNode = container.firstChild;
204
testDOMNodeStructure(realNode, expectedStructure);
205
206
- ReactDOM.render(<TestComponent flipped={true} />, container);
206
+ await act(() => {
207
+ root.render(<TestComponent flipped={true} />);
208
+ });
209
210
const expectedNewStructure = {
211
nodeName: 'svg',
@@ -224,7 +226,7 @@ describe('ReactART', () => {
226
testDOMNodeStructure(realNode, expectedNewStructure);
227
});
228
227
- it('should be able to reorder many components', () => {
229
+ it('should be able to reorder many components', async () => {
230
class Component extends React.Component {
231
render() {
232
const chars = this.props.chars.split('');
@@ -242,14 +244,17 @@ describe('ReactART', () => {
244
const before = 'abcdefghijklmnopqrst';
245
const after = 'mxhpgwfralkeoivcstzy';
246
245
- let instance = ReactDOM.render(<Component chars={before} />, container);
246
- const realNode = ReactDOM.findDOMNode(instance);
247
+ const root = ReactDOMClient.createRoot(container);
248
+ await act(() => {
249
+ root.render(<Component chars={before} />);
250
+ });
251
+ const realNode = container.firstChild;
252
expect(realNode.textContent).toBe(before);
253
249
- instance = ReactDOM.render(<Component chars={after} />, container);
254
+ await act(() => {
255
+ root.render(<Component chars={after} />);
256
+ });
257
expect(realNode.textContent).toBe(after);
251
-
252
- ReactDOM.unmountComponentAtNode(container);
258
});
259
260
it('renders composite with lifecycle inside group', async () => {
@@ -311,7 +316,7 @@ describe('ReactART', () => {
316
expect(ref.constructor).toBe(CustomShape);
317
});
318
314
- it('resolves refs before componentDidUpdate', () => {
319
+ it('resolves refs before componentDidUpdate', async () => {
320
class CustomShape extends React.Component {
321
render() {
322
return <Shape />;
@@ -341,24 +346,34 @@ describe('ReactART', () => {
346
);
347
}
348
}
344
- ReactDOM.render(<Outer />, container);
349
+
350
+ const root = ReactDOMClient.createRoot(container);
351
+ await act(() => {
352
+ root.render(<Outer />);
353
+ });
354
expect(ref).toBe(null);
346
- ReactDOM.render(<Outer mountCustomShape={true} />, container);
355
+
356
+ await act(() => {
357
+ root.render(<Outer mountCustomShape={true} />);
358
+ });
359
expect(ref.constructor).toBe(CustomShape);
360
});
361
350
- it('adds and updates event handlers', () => {
351
- function render(onClick) {
352
- return ReactDOM.render(
353
- <Surface>
354
- <Shape onClick={onClick} />
355
- </Surface>,
356
- container,
357
- );
362
+ it('adds and updates event handlers', async () => {
363
+ const root = ReactDOMClient.createRoot(container);
364
+
365
+ async function render(onClick) {
366
+ await act(() => {
367
+ root.render(
368
+ <Surface>
369
+ <Shape onClick={onClick} />
370
+ </Surface>,
371
+ );
372
+ });
373
}
374
375
function doClick(instance) {
361
- const path = ReactDOM.findDOMNode(instance).querySelector('path');
376
+ const path = container.firstChild.querySelector('path');
377
378
path.dispatchEvent(
379
new MouseEvent('click', {
@@ -368,12 +383,12 @@ describe('ReactART', () => {
383
}
384
385
const onClick1 = jest.fn();
371
- let instance = render(onClick1);
386
+ let instance = await render(onClick1);
387
doClick(instance);
388
expect(onClick1).toBeCalled();
389
390
const onClick2 = jest.fn();
376
- instance = render(onClick2);
391
+ instance = await render(onClick2);
392
doClick(instance);
393
expect(onClick2).toBeCalled();
394
});
@@ -412,15 +427,17 @@ describe('ReactART', () => {
427
428
await waitFor(['A']);
429
415
- ReactDOM.render(
416
- <Surface>
417
- <LogCurrentRenderer />
418
- <CurrentRendererContext.Provider value="ART">
430
+ const root = ReactDOMClient.createRoot(container);
431
+ await act(() => {
432
+ root.render(
433
+ <Surface>
434
<LogCurrentRenderer />
420
- </CurrentRendererContext.Provider>
421
- </Surface>,
422
- container,
423
- );
435
+ <CurrentRendererContext.Provider value="ART">
436
+ <LogCurrentRenderer />
437
+ </CurrentRendererContext.Provider>
438
+ </Surface>,
439
+ );
440
+ });
441
442
expect(ops).toEqual([null, 'ART']);
443