Convert ReactElement-test to createRoot (#27918)
Convert ReactElement-test to createRoot
Jan Kassens committed
Jan 10, 2024 at 10:16 UTC
344a6675a9974d9e7b14542dd4e8bddb81a235e5
1 file changed
+51
-24
packages/react/src/__tests__/ReactElement-test.js
+51
-24
@@ -9,8 +9,10 @@
9
10
'use strict';
11
12
+let act;
13
+
14
let React;
13
-let ReactDOM;
15
+let ReactDOMClient;
16
let ReactTestUtils;
17
18
describe('ReactElement', () => {
@@ -19,8 +21,10 @@ describe('ReactElement', () => {
21
beforeEach(() => {
22
jest.resetModules();
23
24
+ act = require('internal-test-utils').act;
25
+
26
React = require('react');
23
- ReactDOM = require('react-dom');
27
+ ReactDOMClient = require('react-dom/client');
28
ReactTestUtils = require('react-dom/test-utils');
29
// NOTE: We're explicitly not using JSX here. This is intended to test
30
// classic JS without JSX.
@@ -43,11 +47,10 @@ describe('ReactElement', () => {
47
expect(element.props).toEqual({});
48
});
49
46
- it('should warn when `key` is being accessed on composite element', () => {
47
- const container = document.createElement('div');
50
+ it('should warn when `key` is being accessed on composite element', async () => {
51
class Child extends React.Component {
52
render() {
50
- return <div> {this.props.key} </div>;
53
+ return <div>{this.props.key}</div>;
54
}
55
}
56
class Parent extends React.Component {
@@ -61,7 +64,12 @@ describe('ReactElement', () => {
64
);
65
}
66
}
64
- expect(() => ReactDOM.render(<Parent />, container)).toErrorDev(
67
+ const root = ReactDOMClient.createRoot(document.createElement('div'));
68
+ await expect(async () => {
69
+ await act(() => {
70
+ root.render(<Parent />);
71
+ });
72
+ }).toErrorDev(
73
'Child: `key` is not a prop. Trying to access it will result ' +
74
'in `undefined` being returned. If you need to access the same ' +
75
'value within the child component, you should pass it as a different ' +
@@ -80,8 +88,7 @@ describe('ReactElement', () => {
88
);
89
});
90
83
- it('should warn when `ref` is being accessed', () => {
84
- const container = document.createElement('div');
91
+ it('should warn when `ref` is being accessed', async () => {
92
class Child extends React.Component {
93
render() {
94
return <div> {this.props.ref} </div>;
@@ -96,7 +103,13 @@ describe('ReactElement', () => {
103
);
104
}
105
}
99
- expect(() => ReactDOM.render(<Parent />, container)).toErrorDev(
106
+ const root = ReactDOMClient.createRoot(document.createElement('div'));
107
+
108
+ await expect(async () => {
109
+ await act(() => {
110
+ root.render(<Parent />);
111
+ });
112
+ }).toErrorDev(
113
'Child: `ref` is not a prop. Trying to access it will result ' +
114
'in `undefined` being returned. If you need to access the same ' +
115
'value within the child component, you should pass it as a different ' +
@@ -288,7 +301,7 @@ describe('ReactElement', () => {
301
302
// NOTE: We're explicitly not using JSX here. This is intended to test
303
// classic JS without JSX.
291
- it('should use default prop value when removing a prop', () => {
304
+ it('should use default prop value when removing a prop', async () => {
305
class Component extends React.Component {
306
render() {
307
return React.createElement('span');
@@ -297,13 +310,18 @@ describe('ReactElement', () => {
310
Component.defaultProps = {fruit: 'persimmon'};
311
312
const container = document.createElement('div');
300
- const instance = ReactDOM.render(
301
- React.createElement(Component, {fruit: 'mango'}),
302
- container,
303
- );
313
+ const root = ReactDOMClient.createRoot(container);
314
+
315
+ const ref = React.createRef();
316
+ await act(() => {
317
+ root.render(React.createElement(Component, {ref, fruit: 'mango'}));
318
+ });
319
+ const instance = ref.current;
320
expect(instance.props.fruit).toBe('mango');
321
306
- ReactDOM.render(React.createElement(Component), container);
322
+ await act(() => {
323
+ root.render(React.createElement(Component));
324
+ });
325
expect(instance.props.fruit).toBe('persimmon');
326
});
327
@@ -328,7 +346,7 @@ describe('ReactElement', () => {
346
expect(inst2.props.prop).toBe(null);
347
});
348
331
- it('throws when changing a prop (in dev) after element creation', () => {
349
+ it('throws when changing a prop (in dev) after element creation', async () => {
350
class Outer extends React.Component {
351
render() {
352
const el = <div className="moo" />;
@@ -346,15 +364,21 @@ describe('ReactElement', () => {
364
return el;
365
}
366
}
349
- const outer = ReactTestUtils.renderIntoDocument(<Outer color="orange" />);
367
+
368
+ const container = document.createElement('div');
369
+ const root = ReactDOMClient.createRoot(container);
370
+
371
+ await act(() => {
372
+ root.render(<Outer color="orange" />);
373
+ });
374
if (__DEV__) {
351
- expect(ReactDOM.findDOMNode(outer).className).toBe('moo');
375
+ expect(container.firstChild.className).toBe('moo');
376
} else {
353
- expect(ReactDOM.findDOMNode(outer).className).toBe('quack');
377
+ expect(container.firstChild.className).toBe('quack');
378
}
379
});
380
357
- it('throws when adding a prop (in dev) after element creation', () => {
381
+ it('throws when adding a prop (in dev) after element creation', async () => {
382
const container = document.createElement('div');
383
class Outer extends React.Component {
384
render() {
@@ -374,12 +398,15 @@ describe('ReactElement', () => {
398
}
399
}
400
Outer.defaultProps = {sound: 'meow'};
377
- const outer = ReactDOM.render(<Outer />, container);
378
- expect(ReactDOM.findDOMNode(outer).textContent).toBe('meow');
401
+ const root = ReactDOMClient.createRoot(container);
402
+ await act(() => {
403
+ root.render(<Outer />);
404
+ });
405
+ expect(container.firstChild.textContent).toBe('meow');
406
if (__DEV__) {
380
- expect(ReactDOM.findDOMNode(outer).className).toBe('');
407
+ expect(container.firstChild.className).toBe('');
408
} else {
382
- expect(ReactDOM.findDOMNode(outer).className).toBe('quack');
409
+ expect(container.firstChild.className).toBe('quack');
410
}
411
});
412