Skip to content

Commit a7c898d

Browse files
rickhanloniirickhanlonii
authored
[assert helpers] react-dom (pt 1) (facebook#31897)
Converts ~half of react-dom tests
1 parent c81312e commit a7c898d

13 files changed

+781
-573
lines changed

‎packages/react-dom/src/__tests__/CSSPropertyOperations-test.js‎

Lines changed: 29 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,8 @@ const React = require('react');
1313
const ReactDOMClient = require('react-dom/client');
1414
const ReactDOMServer = require('react-dom/server');
1515
const act = require('internal-test-utils').act;
16+
const assertConsoleErrorDev =
17+
require('internal-test-utils').assertConsoleErrorDev;
1618

1719
describe('CSSPropertyOperations', () => {
1820
it('should automatically append `px` to relevant styles', () => {
@@ -103,15 +105,14 @@ describe('CSSPropertyOperations', () => {
103105

104106
const container = document.createElement('div');
105107
const root = ReactDOMClient.createRoot(container);
106-
await expect(async () => {
107-
await act(() => {
108-
root.render(<Comp />);
109-
});
110-
}).toErrorDev(
108+
await act(() => {
109+
root.render(<Comp />);
110+
});
111+
assertConsoleErrorDev([
111112
'Unsupported style property background-color. Did you mean backgroundColor?' +
112113
'\n in div (at **)' +
113114
'\n in Comp (at **)',
114-
);
115+
]);
115116
});
116117

117118
it('should warn when updating hyphenated style names', async () => {
@@ -132,11 +133,10 @@ describe('CSSPropertyOperations', () => {
132133
await act(() => {
133134
root.render(<Comp />);
134135
});
135-
await expect(async () => {
136-
await act(() => {
137-
root.render(<Comp style={styles} />);
138-
});
139-
}).toErrorDev([
136+
await act(() => {
137+
root.render(<Comp style={styles} />);
138+
});
139+
assertConsoleErrorDev([
140140
'Unsupported style property -ms-transform. Did you mean msTransform?' +
141141
'\n in div (at **)' +
142142
'\n in Comp (at **)',
@@ -165,11 +165,10 @@ describe('CSSPropertyOperations', () => {
165165

166166
const container = document.createElement('div');
167167
const root = ReactDOMClient.createRoot(container);
168-
await expect(async () => {
169-
await act(() => {
170-
root.render(<Comp />);
171-
});
172-
}).toErrorDev([
168+
await act(() => {
169+
root.render(<Comp />);
170+
});
171+
assertConsoleErrorDev([
173172
// msTransform is correct already and shouldn't warn
174173
'Unsupported vendor-prefixed style property oTransform. ' +
175174
'Did you mean OTransform?' +
@@ -202,11 +201,10 @@ describe('CSSPropertyOperations', () => {
202201

203202
const container = document.createElement('div');
204203
const root = ReactDOMClient.createRoot(container);
205-
await expect(async () => {
206-
await act(() => {
207-
root.render(<Comp />);
208-
});
209-
}).toErrorDev([
204+
await act(() => {
205+
root.render(<Comp />);
206+
});
207+
assertConsoleErrorDev([
210208
"Style property values shouldn't contain a semicolon. " +
211209
'Try "backgroundColor: blue" instead.' +
212210
'\n in div (at **)' +
@@ -229,15 +227,14 @@ describe('CSSPropertyOperations', () => {
229227

230228
const container = document.createElement('div');
231229
const root = ReactDOMClient.createRoot(container);
232-
await expect(async () => {
233-
await act(() => {
234-
root.render(<Comp />);
235-
});
236-
}).toErrorDev(
230+
await act(() => {
231+
root.render(<Comp />);
232+
});
233+
assertConsoleErrorDev([
237234
'`NaN` is an invalid value for the `fontSize` css style property.' +
238235
'\n in div (at **)' +
239236
'\n in Comp (at **)',
240-
);
237+
]);
241238
});
242239

243240
it('should not warn when setting CSS custom properties', async () => {
@@ -265,15 +262,14 @@ describe('CSSPropertyOperations', () => {
265262

266263
const container = document.createElement('div');
267264
const root = ReactDOMClient.createRoot(container);
268-
await expect(async () => {
269-
await act(() => {
270-
root.render(<Comp />);
271-
});
272-
}).toErrorDev(
265+
await act(() => {
266+
root.render(<Comp />);
267+
});
268+
assertConsoleErrorDev([
273269
'`Infinity` is an invalid value for the `fontSize` css style property.' +
274270
'\n in div (at **)' +
275271
'\n in Comp (at **)',
276-
);
272+
]);
277273
});
278274

279275
it('should not add units to CSS custom properties', async () => {

‎packages/react-dom/src/__tests__/DOMPropertyOperations-test.js‎

Lines changed: 13 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1333,7 +1333,8 @@ describe('DOMPropertyOperations', () => {
13331333
});
13341334

13351335
assertConsoleErrorDev([
1336-
'The `popoverTarget` prop expects the ID of an Element as a string. Received HTMLDivElement {} instead.',
1336+
'The `popoverTarget` prop expects the ID of an Element as a string. Received HTMLDivElement {} instead.\n' +
1337+
' in button (at **)',
13371338
]);
13381339

13391340
// Dedupe warning
@@ -1375,13 +1376,17 @@ describe('DOMPropertyOperations', () => {
13751376
expect(container.firstChild.getAttribute('value')).toBe('foo');
13761377
}
13771378
expect(container.firstChild.value).toBe('foo');
1378-
await expect(async () => {
1379-
await act(() => {
1380-
root.render(<input type="text" onChange={function () {}} />);
1381-
});
1382-
}).toErrorDev(
1383-
'A component is changing a controlled input to be uncontrolled',
1384-
);
1379+
await act(() => {
1380+
root.render(<input type="text" onChange={function () {}} />);
1381+
});
1382+
assertConsoleErrorDev([
1383+
'A component is changing a controlled input to be uncontrolled. ' +
1384+
'This is likely caused by the value changing from a defined to undefined, ' +
1385+
'which should not happen. Decide between using a controlled or uncontrolled ' +
1386+
'input element for the lifetime of the component. ' +
1387+
'More info: https://react.dev/link/controlled-components\n' +
1388+
' in input (at **)',
1389+
]);
13851390
if (disableInputAttributeSyncing) {
13861391
expect(container.firstChild.hasAttribute('value')).toBe(false);
13871392
} else {

‎packages/react-dom/src/__tests__/InvalidEventListeners-test.js‎

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -15,13 +15,14 @@ describe('InvalidEventListeners', () => {
1515
let React;
1616
let ReactDOMClient;
1717
let act;
18+
let assertConsoleErrorDev;
1819
let container;
1920

2021
beforeEach(() => {
2122
jest.resetModules();
2223
React = require('react');
2324
ReactDOMClient = require('react-dom/client');
24-
act = require('internal-test-utils').act;
25+
({act, assertConsoleErrorDev} = require('internal-test-utils'));
2526

2627
container = document.createElement('div');
2728
document.body.appendChild(container);
@@ -34,13 +35,13 @@ describe('InvalidEventListeners', () => {
3435

3536
it('should prevent non-function listeners, at dispatch', async () => {
3637
const root = ReactDOMClient.createRoot(container);
37-
await expect(async () => {
38-
await act(() => {
39-
root.render(<div onClick="not a function" />);
40-
});
41-
}).toErrorDev(
42-
'Expected `onClick` listener to be a function, instead got a value of `string` type.',
43-
);
38+
await act(() => {
39+
root.render(<div onClick="not a function" />);
40+
});
41+
assertConsoleErrorDev([
42+
'Expected `onClick` listener to be a function, instead got a value of `string` type.\n' +
43+
' in div (at **)',
44+
]);
4445
const node = container.firstChild;
4546

4647
console.error = jest.fn();

‎packages/react-dom/src/__tests__/ReactChildReconciler-test.js‎

Lines changed: 50 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -15,14 +15,15 @@
1515
let React;
1616
let ReactDOMClient;
1717
let act;
18+
let assertConsoleErrorDev;
1819

1920
describe('ReactChildReconciler', () => {
2021
beforeEach(() => {
2122
jest.resetModules();
2223

2324
React = require('react');
2425
ReactDOMClient = require('react-dom/client');
25-
act = require('internal-test-utils').act;
26+
({act, assertConsoleErrorDev} = require('internal-test-utils'));
2627
});
2728

2829
function createIterable(array) {
@@ -62,15 +63,21 @@ describe('ReactChildReconciler', () => {
6263

6364
const container = document.createElement('div');
6465
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');
66+
await act(() => {
67+
root.render(
68+
<div>
69+
<h1>{iterableFunction}</h1>
70+
</div>,
71+
);
72+
});
73+
assertConsoleErrorDev([
74+
'Functions are not valid as a React child. ' +
75+
'This may happen if you return fn instead of <fn /> from render. ' +
76+
'Or maybe you meant to call this function rather than return it.\n' +
77+
' <h1>{fn}</h1>\n' +
78+
' in h1 (at **)' +
79+
(gate('enableOwnerStacks') ? '' : '\n in div (at **)'),
80+
]);
7481
const node = container.firstChild;
7582

7683
expect(node.innerHTML).toContain(''); // h1
@@ -85,16 +92,18 @@ describe('ReactChildReconciler', () => {
8592

8693
const container = document.createElement('div');
8794
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 ' +
96-
'could change in a future version.',
97-
);
95+
await act(() => {
96+
root.render(<Component />);
97+
});
98+
assertConsoleErrorDev([
99+
'Encountered two children with the same key, `1`. ' +
100+
'Keys should be unique so that components maintain their identity across updates. ' +
101+
'Non-unique keys may cause children to be duplicated and/or omitted — ' +
102+
'the behavior is unsupported and could change in a future version.\n' +
103+
(gate('enableOwnerStacks') ? '' : ' in div (at **)\n') +
104+
' in div (at **)\n' +
105+
' in Component (at **)',
106+
]);
98107
});
99108

100109
it('warns for duplicated array keys with component stack info', async () => {
@@ -118,11 +127,10 @@ describe('ReactChildReconciler', () => {
118127

119128
const container = document.createElement('div');
120129
const root = ReactDOMClient.createRoot(container);
121-
await expect(async () => {
122-
await act(() => {
123-
root.render(<GrandParent />);
124-
});
125-
}).toErrorDev(
130+
await act(() => {
131+
root.render(<GrandParent />);
132+
});
133+
assertConsoleErrorDev([
126134
'Encountered two children with the same key, `1`. ' +
127135
'Keys should be unique so that components maintain their identity ' +
128136
'across updates. Non-unique keys may cause children to be ' +
@@ -135,7 +143,7 @@ describe('ReactChildReconciler', () => {
135143
? ''
136144
: ' in Parent (at **)\n') +
137145
' in GrandParent (at **)',
138-
);
146+
]);
139147
});
140148

141149
it('warns for duplicated iterable keys', async () => {
@@ -147,16 +155,19 @@ describe('ReactChildReconciler', () => {
147155

148156
const container = document.createElement('div');
149157
const root = ReactDOMClient.createRoot(container);
150-
await expect(async () => {
151-
await act(() => {
152-
root.render(<Component />);
153-
});
154-
}).toErrorDev(
155-
'Keys should be unique so that components maintain their identity ' +
158+
await act(() => {
159+
root.render(<Component />);
160+
});
161+
assertConsoleErrorDev([
162+
'Encountered two children with the same key, `1`. ' +
163+
'Keys should be unique so that components maintain their identity ' +
156164
'across updates. Non-unique keys may cause children to be ' +
157165
'duplicated and/or omitted — the behavior is unsupported and ' +
158-
'could change in a future version.',
159-
);
166+
'could change in a future version.\n' +
167+
' in div (at **)\n' +
168+
(gate(flags => flags.enableOwnerStacks) ? '' : ' in div (at **)\n') +
169+
' in Component (at **)',
170+
]);
160171
});
161172

162173
it('warns for duplicated iterable keys with component stack info', async () => {
@@ -180,11 +191,10 @@ describe('ReactChildReconciler', () => {
180191

181192
const container = document.createElement('div');
182193
const root = ReactDOMClient.createRoot(container);
183-
await expect(async () => {
184-
await act(() => {
185-
root.render(<GrandParent />);
186-
});
187-
}).toErrorDev(
194+
await act(() => {
195+
root.render(<GrandParent />);
196+
});
197+
assertConsoleErrorDev([
188198
'Encountered two children with the same key, `1`. ' +
189199
'Keys should be unique so that components maintain their identity ' +
190200
'across updates. Non-unique keys may cause children to be ' +
@@ -197,6 +207,6 @@ describe('ReactChildReconciler', () => {
197207
? ''
198208
: ' in Parent (at **)\n') +
199209
' in GrandParent (at **)',
200-
);
210+
]);
201211
});
202212
});

0 commit comments

Comments
 (0)