Convert ReactFunctionComponent to createRoot (#27997)
Ricky committed
Jan 18, 2024 at 22:32 UTC
feed8f3f95836a99eeaf5dc64d1c9ed62217c1de
1 file changed
+54
-26
packages/react-dom/src/__tests__/ReactFunctionComponent-test.js
+54
-26
@@ -11,8 +11,9 @@
11
12
let PropTypes;
13
let React;
14
-let ReactDOM;
14
+let ReactDOMClient;
15
let ReactTestUtils;
16
+let act;
17
18
function FunctionComponent(props) {
19
return <div>{props.name}</div>;
@@ -23,18 +24,23 @@ describe('ReactFunctionComponent', () => {
24
jest.resetModules();
25
PropTypes = require('prop-types');
26
React = require('react');
26
- ReactDOM = require('react-dom');
27
+ ReactDOMClient = require('react-dom/client');
28
+ act = require('internal-test-utils').act;
29
ReactTestUtils = require('react-dom/test-utils');
30
});
31
30
- it('should render stateless component', () => {
32
+ it('should render stateless component', async () => {
33
const el = document.createElement('div');
32
- ReactDOM.render(<FunctionComponent name="A" />, el);
34
+
35
+ const root = ReactDOMClient.createRoot(el);
36
+ await act(() => {
37
+ root.render(<FunctionComponent name="A" />);
38
+ });
39
40
expect(el.textContent).toBe('A');
41
});
42
37
- it('should update stateless component', () => {
43
+ it('should update stateless component', async () => {
44
class Parent extends React.Component {
45
render() {
46
return <FunctionComponent {...this.props} />;
@@ -42,25 +48,34 @@ describe('ReactFunctionComponent', () => {
48
}
49
50
const el = document.createElement('div');
45
- ReactDOM.render(<Parent name="A" />, el);
51
+
52
+ const root = ReactDOMClient.createRoot(el);
53
+ await act(() => {
54
+ root.render(<Parent name="A" />);
55
+ });
56
expect(el.textContent).toBe('A');
57
48
- ReactDOM.render(<Parent name="B" />, el);
58
+ await act(() => {
59
+ root.render(<Parent name="B" />);
60
+ });
61
expect(el.textContent).toBe('B');
62
});
63
52
- it('should unmount stateless component', () => {
64
+ it('should unmount stateless component', async () => {
65
const container = document.createElement('div');
66
55
- ReactDOM.render(<FunctionComponent name="A" />, container);
67
+ const root = ReactDOMClient.createRoot(container);
68
+ await act(() => {
69
+ root.render(<FunctionComponent name="A" />);
70
+ });
71
expect(container.textContent).toBe('A');
72
58
- ReactDOM.unmountComponentAtNode(container);
73
+ root.unmount();
74
expect(container.textContent).toBe('');
75
});
76
77
// @gate !disableLegacyContext
63
- it('should pass context thru stateless component', () => {
78
+ it('should pass context thru stateless component', async () => {
79
class Child extends React.Component {
80
static contextTypes = {
81
test: PropTypes.string.isRequired,
@@ -90,16 +105,22 @@ describe('ReactFunctionComponent', () => {
105
}
106
107
const el = document.createElement('div');
93
- ReactDOM.render(<GrandParent test="test" />, el);
108
+
109
+ const root = ReactDOMClient.createRoot(el);
110
+ await act(() => {
111
+ root.render(<GrandParent test="test" />);
112
+ });
113
114
expect(el.textContent).toBe('test');
115
97
- ReactDOM.render(<GrandParent test="mest" />, el);
116
+ await act(() => {
117
+ root.render(<GrandParent test="mest" />);
118
+ });
119
120
expect(el.textContent).toBe('mest');
121
});
122
102
- it('should warn for getDerivedStateFromProps on a function component', () => {
123
+ it('should warn for getDerivedStateFromProps on a function component', async () => {
124
function FunctionComponentWithChildContext() {
125
return null;
126
}
@@ -107,15 +128,18 @@ describe('ReactFunctionComponent', () => {
128
129
const container = document.createElement('div');
130
110
- expect(() =>
111
- ReactDOM.render(<FunctionComponentWithChildContext />, container),
112
- ).toErrorDev(
131
+ await expect(async () => {
132
+ const root = ReactDOMClient.createRoot(container);
133
+ await act(() => {
134
+ root.render(<FunctionComponentWithChildContext />);
135
+ });
136
+ }).toErrorDev(
137
'FunctionComponentWithChildContext: Function ' +
138
'components do not support getDerivedStateFromProps.',
139
);
140
});
141
118
- it('should warn for childContextTypes on a function component', () => {
142
+ it('should warn for childContextTypes on a function component', async () => {
143
function FunctionComponentWithChildContext(props) {
144
return <div>{props.name}</div>;
145
}
@@ -126,12 +150,12 @@ describe('ReactFunctionComponent', () => {
150
151
const container = document.createElement('div');
152
129
- expect(() =>
130
- ReactDOM.render(
131
- <FunctionComponentWithChildContext name="A" />,
132
- container,
133
- ),
134
- ).toErrorDev(
153
+ await expect(async () => {
154
+ const root = ReactDOMClient.createRoot(container);
155
+ await act(() => {
156
+ root.render(<FunctionComponentWithChildContext name="A" />);
157
+ });
158
+ }).toErrorDev(
159
'FunctionComponentWithChildContext(...): childContextTypes cannot ' +
160
'be defined on a function component.',
161
);
@@ -378,7 +402,7 @@ describe('ReactFunctionComponent', () => {
402
});
403
404
// @gate !disableLegacyContext
381
- it('should receive context', () => {
405
+ it('should receive context', async () => {
406
class Parent extends React.Component {
407
static childContextTypes = {
408
lang: PropTypes.string,
@@ -399,7 +423,11 @@ describe('ReactFunctionComponent', () => {
423
Child.contextTypes = {lang: PropTypes.string};
424
425
const el = document.createElement('div');
402
- ReactDOM.render(<Parent />, el);
426
+
427
+ const root = ReactDOMClient.createRoot(el);
428
+ await act(() => {
429
+ root.render(<Parent />);
430
+ });
431
expect(el.textContent).toBe('en');
432
});
433