Convert ReactChildReconciler to createRoot (#28192)
Sebastian Silbermann committed
Feb 2, 2024 at 09:15 UTC
3cfe0cc0c2916352b8f18d14251be27f6d484eac
1 file changed
+48
-18
packages/react-dom/src/__tests__/ReactChildReconciler-test.js
+48
-18
@@ -13,14 +13,16 @@
13
'use strict';
14
15
let React;
16
-let ReactTestUtils;
16
+let ReactDOMClient;
17
+let act;
18
19
describe('ReactChildReconciler', () => {
20
beforeEach(() => {
21
jest.resetModules();
22
23
React = require('react');
23
- ReactTestUtils = require('react-dom/test-utils');
24
+ ReactDOMClient = require('react-dom/client');
25
+ act = require('internal-test-utils').act;
26
});
27
28
function createIterable(array) {
@@ -55,29 +57,39 @@ describe('ReactChildReconciler', () => {
57
return fn;
58
}
59
58
- it('does not treat functions as iterables', () => {
59
- let node;
60
+ it('does not treat functions as iterables', async () => {
61
const iterableFunction = makeIterableFunction('foo');
62
62
- expect(() => {
63
- node = ReactTestUtils.renderIntoDocument(
64
- <div>
65
- <h1>{iterableFunction}</h1>
66
- </div>,
67
- );
63
+ const container = document.createElement('div');
64
+ const root = ReactDOMClient.createRoot(container);
65
+ await expect(async () => {
66
+ await act(() => {
67
+ root.render(
68
+ <div>
69
+ <h1>{iterableFunction}</h1>
70
+ </div>,
71
+ );
72
+ });
73
}).toErrorDev('Functions are not valid as a React child');
74
+ const node = container.firstChild;
75
76
expect(node.innerHTML).toContain(''); // h1
77
});
78
73
- it('warns for duplicated array keys', () => {
79
+ it('warns for duplicated array keys', async () => {
80
class Component extends React.Component {
81
render() {
82
return <div>{[<div key="1" />, <div key="1" />]}</div>;
83
}
84
}
85
80
- expect(() => ReactTestUtils.renderIntoDocument(<Component />)).toErrorDev(
86
+ const container = document.createElement('div');
87
+ const root = ReactDOMClient.createRoot(container);
88
+ await expect(async () => {
89
+ await act(() => {
90
+ root.render(<Component />);
91
+ });
92
+ }).toErrorDev(
93
'Keys should be unique so that components maintain their identity ' +
94
'across updates. Non-unique keys may cause children to be ' +
95
'duplicated and/or omitted — the behavior is unsupported and ' +
@@ -85,7 +97,7 @@ describe('ReactChildReconciler', () => {
97
);
98
});
99
88
- it('warns for duplicated array keys with component stack info', () => {
100
+ it('warns for duplicated array keys with component stack info', async () => {
101
class Component extends React.Component {
102
render() {
103
return <div>{[<div key="1" />, <div key="1" />]}</div>;
@@ -104,7 +116,13 @@ describe('ReactChildReconciler', () => {
116
}
117
}
118
107
- expect(() => ReactTestUtils.renderIntoDocument(<GrandParent />)).toErrorDev(
119
+ const container = document.createElement('div');
120
+ const root = ReactDOMClient.createRoot(container);
121
+ await expect(async () => {
122
+ await act(() => {
123
+ root.render(<GrandParent />);
124
+ });
125
+ }).toErrorDev(
126
'Encountered two children with the same key, `1`. ' +
127
'Keys should be unique so that components maintain their identity ' +
128
'across updates. Non-unique keys may cause children to be ' +
@@ -117,14 +135,20 @@ describe('ReactChildReconciler', () => {
135
);
136
});
137
120
- it('warns for duplicated iterable keys', () => {
138
+ it('warns for duplicated iterable keys', async () => {
139
class Component extends React.Component {
140
render() {
141
return <div>{createIterable([<div key="1" />, <div key="1" />])}</div>;
142
}
143
}
144
127
- expect(() => ReactTestUtils.renderIntoDocument(<Component />)).toErrorDev(
145
+ const container = document.createElement('div');
146
+ const root = ReactDOMClient.createRoot(container);
147
+ await expect(async () => {
148
+ await act(() => {
149
+ root.render(<Component />);
150
+ });
151
+ }).toErrorDev(
152
'Keys should be unique so that components maintain their identity ' +
153
'across updates. Non-unique keys may cause children to be ' +
154
'duplicated and/or omitted — the behavior is unsupported and ' +
@@ -132,7 +156,7 @@ describe('ReactChildReconciler', () => {
156
);
157
});
158
135
- it('warns for duplicated iterable keys with component stack info', () => {
159
+ it('warns for duplicated iterable keys with component stack info', async () => {
160
class Component extends React.Component {
161
render() {
162
return <div>{createIterable([<div key="1" />, <div key="1" />])}</div>;
@@ -151,7 +175,13 @@ describe('ReactChildReconciler', () => {
175
}
176
}
177
154
- expect(() => ReactTestUtils.renderIntoDocument(<GrandParent />)).toErrorDev(
178
+ const container = document.createElement('div');
179
+ const root = ReactDOMClient.createRoot(container);
180
+ await expect(async () => {
181
+ await act(() => {
182
+ root.render(<GrandParent />);
183
+ });
184
+ }).toErrorDev(
185
'Encountered two children with the same key, `1`. ' +
186
'Keys should be unique so that components maintain their identity ' +
187
'across updates. Non-unique keys may cause children to be ' +