Convert ReactDOMFiberAsync to createRoot (#28067)
Ricky committed
Jan 24, 2024 at 10:57 UTC
6480eea157b033996a11264ae34993e2305833e8
1 file changed
+42
-16
packages/react-dom/src/__tests__/ReactDOMFiberAsync-test.js
+42
-16
@@ -50,7 +50,7 @@ describe('ReactDOMFiberAsync', () => {
50
document.body.removeChild(container);
51
});
52
53
- it('renders synchronously by default', () => {
53
+ it('renders synchronously by default in legacy mode', () => {
54
const ops = [];
55
ReactDOM.render(<div>Hi</div>, container, () => {
56
ops.push(container.textContent);
@@ -61,12 +61,16 @@ describe('ReactDOMFiberAsync', () => {
61
expect(ops).toEqual(['Hi', 'Bye']);
62
});
63
64
- it('flushSync batches sync updates and flushes them at the end of the batch', () => {
64
+ it('flushSync batches sync updates and flushes them at the end of the batch', async () => {
65
const ops = [];
66
let instance;
67
68
class Component extends React.Component {
69
state = {text: ''};
70
+ componentDidMount() {
71
+ instance = this;
72
+ }
73
+
74
push(val) {
75
this.setState(state => ({text: state.text + val}));
76
}
@@ -79,9 +83,13 @@ describe('ReactDOMFiberAsync', () => {
83
}
84
}
85
82
- ReactDOM.render(<Component />, container);
86
+ const root = ReactDOMClient.createRoot(container);
87
+ await act(() => root.render(<Component />));
88
+
89
+ await act(() => {
90
+ instance.push('A');
91
+ });
92
84
- instance.push('A');
93
expect(ops).toEqual(['A']);
94
expect(container.textContent).toEqual('A');
95
@@ -92,19 +100,26 @@ describe('ReactDOMFiberAsync', () => {
100
expect(container.textContent).toEqual('A');
101
expect(ops).toEqual(['A']);
102
});
103
+
104
expect(container.textContent).toEqual('ABC');
105
expect(ops).toEqual(['A', 'ABC']);
97
- instance.push('D');
106
+ await act(() => {
107
+ instance.push('D');
108
+ });
109
expect(container.textContent).toEqual('ABCD');
110
expect(ops).toEqual(['A', 'ABC', 'ABCD']);
111
});
112
102
- it('flushSync flushes updates even if nested inside another flushSync', () => {
113
+ it('flushSync flushes updates even if nested inside another flushSync', async () => {
114
const ops = [];
115
let instance;
116
117
class Component extends React.Component {
118
state = {text: ''};
119
+ componentDidMount() {
120
+ instance = this;
121
+ }
122
+
123
push(val) {
124
this.setState(state => ({text: state.text + val}));
125
}
@@ -117,9 +132,12 @@ describe('ReactDOMFiberAsync', () => {
132
}
133
}
134
120
- ReactDOM.render(<Component />, container);
135
+ const root = ReactDOMClient.createRoot(container);
136
+ await act(() => root.render(<Component />));
137
122
- instance.push('A');
138
+ await act(() => {
139
+ instance.push('A');
140
+ });
141
expect(ops).toEqual(['A']);
142
expect(container.textContent).toEqual('A');
143
@@ -141,7 +159,7 @@ describe('ReactDOMFiberAsync', () => {
159
expect(ops).toEqual(['A', 'ABCD']);
160
});
161
144
- it('flushSync logs an error if already performing work', () => {
162
+ it('flushSync logs an error if already performing work', async () => {
163
class Component extends React.Component {
164
componentDidUpdate() {
165
ReactDOM.flushSync();
@@ -152,11 +170,16 @@ describe('ReactDOMFiberAsync', () => {
170
}
171
172
// Initial mount
155
- ReactDOM.render(<Component />, container);
173
+ const root = ReactDOMClient.createRoot(container);
174
+ await act(() => {
175
+ root.render(<Component />);
176
+ });
177
// Update
157
- expect(() => ReactDOM.render(<Component />, container)).toErrorDev(
158
- 'flushSync was called from inside a lifecycle method',
159
- );
178
+ expect(() => {
179
+ ReactDOM.flushSync(() => {
180
+ root.render(<Component />);
181
+ });
182
+ }).toErrorDev('flushSync was called from inside a lifecycle method');
183
});
184
185
describe('concurrent mode', () => {
@@ -492,11 +515,14 @@ describe('ReactDOMFiberAsync', () => {
515
const containerA = document.createElement('div');
516
const containerB = document.createElement('div');
517
const containerC = document.createElement('div');
518
+ const rootA = ReactDOMClient.createRoot(containerA);
519
+ const rootB = ReactDOMClient.createRoot(containerB);
520
+ const rootC = ReactDOMClient.createRoot(containerC);
521
522
await act(() => {
497
- ReactDOM.render(<App label="A" />, containerA);
498
- ReactDOM.render(<App label="B" />, containerB);
499
- ReactDOM.render(<App label="C" />, containerC);
523
+ rootA.render(<App label="A" />);
524
+ rootB.render(<App label="B" />);
525
+ rootC.render(<App label="C" />);
526
});
527
528
expect(containerA.textContent).toEqual('Finished');