Convert ReactDOMOption to createRoot (#28002)
Sebastian Silbermann committed
Jan 22, 2024 at 09:21 UTC
206934f0270d248b9eec186e2f70b0c7a4f99e1d
2 files changed
+45
-15
packages/react-dom/src/__tests__/ReactDOMOption-test.js
+43
-14
@@ -11,16 +11,18 @@
11
12
describe('ReactDOMOption', () => {
13
let React;
14
- let ReactDOM;
14
+ let ReactDOMClient;
15
let ReactDOMServer;
16
let ReactTestUtils;
17
+ let act;
18
19
beforeEach(() => {
20
jest.resetModules();
21
React = require('react');
21
- ReactDOM = require('react-dom');
22
+ ReactDOMClient = require('react-dom/client');
23
ReactDOMServer = require('react-dom/server');
24
ReactTestUtils = require('react-dom/test-utils');
25
+ act = require('internal-test-utils').act;
26
});
27
28
it('should flatten children to a string', () => {
@@ -182,19 +184,28 @@ describe('ReactDOMOption', () => {
184
expect(node.innerHTML).toBe('foobar');
185
});
186
185
- it('should set attribute for empty value', () => {
187
+ it('should set attribute for empty value', async () => {
188
const container = document.createElement('div');
187
- const option = ReactDOM.render(<option value="" />, container);
189
+ const root = ReactDOMClient.createRoot(container);
190
+ let option;
191
+ await act(() => {
192
+ root.render(<option value="" />);
193
+ });
194
+ option = container.firstChild;
195
expect(option.hasAttribute('value')).toBe(true);
196
expect(option.getAttribute('value')).toBe('');
197
191
- ReactDOM.render(<option value="lava" />, container);
198
+ await act(() => {
199
+ root.render(<option value="lava" />);
200
+ });
201
+ option = container.firstChild;
202
expect(option.hasAttribute('value')).toBe(true);
203
expect(option.getAttribute('value')).toBe('lava');
204
});
205
196
- it('should allow ignoring `value` on option', () => {
206
+ it('should allow ignoring `value` on option', async () => {
207
const a = 'a';
208
+ let node;
209
const stub = (
210
<select value="giraffe" onChange={() => {}}>
211
<option>monkey</option>
@@ -204,15 +215,22 @@ describe('ReactDOMOption', () => {
215
);
216
const options = stub.props.children;
217
const container = document.createElement('div');
207
- const node = ReactDOM.render(stub, container);
218
+ const root = ReactDOMClient.createRoot(container);
219
+ await act(() => {
220
+ root.render(stub);
221
+ });
222
+ node = container.firstChild;
223
224
expect(node.selectedIndex).toBe(1);
225
211
- ReactDOM.render(<select value="gorilla">{options}</select>, container);
226
+ await act(() => {
227
+ root.render(<select value="gorilla">{options}</select>);
228
+ });
229
+ node = container.firstChild;
230
expect(node.selectedIndex).toEqual(2);
231
});
232
215
- it('generates a warning and hydration error when an invalid nested tag is used as a child', () => {
233
+ it('generates a warning and hydration error when an invalid nested tag is used as a child', async () => {
234
const ref = React.createRef();
235
const children = (
236
<select readOnly={true} value="bar">
@@ -229,16 +247,27 @@ describe('ReactDOMOption', () => {
247
expect(container.firstChild.getAttribute('value')).toBe(null);
248
expect(container.firstChild.getAttribute('defaultValue')).toBe(null);
249
232
- const option = container.firstChild.firstChild;
250
+ let option = container.firstChild.firstChild;
251
expect(option.nodeName).toBe('OPTION');
252
253
expect(option.textContent).toBe('BarFooBaz');
254
expect(option.selected).toBe(true);
255
238
- expect(() => ReactDOM.hydrate(children, container)).toErrorDev([
239
- 'Text content did not match. Server: "FooBaz" Client: "Foo"',
240
- 'validateDOMNesting(...): <div> cannot appear as a child of <option>.',
241
- ]);
256
+ await expect(async () => {
257
+ await act(async () => {
258
+ ReactDOMClient.hydrateRoot(container, children, {
259
+ onRecoverableError: () => {},
260
+ });
261
+ });
262
+ }).toErrorDev(
263
+ [
264
+ 'Warning: Text content did not match. Server: "FooBaz" Client: "Foo"',
265
+ 'Warning: An error occurred during hydration. The server HTML was replaced with client content in <div>',
266
+ 'Warning: validateDOMNesting(...): <div> cannot appear as a child of <option>',
267
+ ],
268
+ {withoutStack: 1},
269
+ );
270
+ option = container.firstChild.firstChild;
271
272
expect(option.textContent).toBe('BarFooBaz');
273
expect(option.selected).toBe(true);
scripts/jest/matchers/toWarnDev.js
+2
-1
@@ -86,7 +86,8 @@ const createMatcherFor = (consoleMethod, matcherName) =>
86
// doesn't match the number of arguments.
87
// We'll fail the test if it happens.
88
let argIndex = 0;
89
- format.replace(/%s/g, () => argIndex++);
89
+ // console.* could have been called with a non-string e.g. `console.error(new Error())`
90
+ String(format).replace(/%s/g, () => argIndex++);
91
if (argIndex !== args.length) {
92
lastWarningWithMismatchingFormat = {
93
format,