Skip to content

Commit 03e4ec2

Browse files
rickhanloniirickhanlonii
authored
[assert helpers] react-dom (pt3) (#31983)
moar assert helpers this finishes all of react-dom except the server integration tests which are tricky to convert
1 parent bf883be commit 03e4ec2

28 files changed

+2056
-1461
lines changed

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

Lines changed: 31 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -14,12 +14,15 @@ describe('ReactDOMInvalidARIAHook', () => {
1414
let ReactDOMClient;
1515
let mountComponent;
1616
let act;
17+
let assertConsoleErrorDev;
1718

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

2427
mountComponent = async function (props) {
2528
const container = document.createElement('div');
@@ -35,46 +38,52 @@ describe('ReactDOMInvalidARIAHook', () => {
3538
await mountComponent({'aria-label': 'Bumble bees'});
3639
});
3740
it('should warn for one invalid aria-* prop', async () => {
38-
await expect(() => mountComponent({'aria-badprop': 'maybe'})).toErrorDev(
41+
await mountComponent({'aria-badprop': 'maybe'});
42+
assertConsoleErrorDev([
3943
'Invalid aria prop `aria-badprop` on <div> tag. ' +
40-
'For details, see https://react.dev/link/invalid-aria-props',
41-
);
44+
'For details, see https://react.dev/link/invalid-aria-props\n' +
45+
' in div (at **)',
46+
]);
4247
});
4348
it('should warn for many invalid aria-* props', async () => {
44-
await expect(() =>
45-
mountComponent({
46-
'aria-badprop': 'Very tall trees',
47-
'aria-malprop': 'Turbulent seas',
48-
}),
49-
).toErrorDev(
49+
await mountComponent({
50+
'aria-badprop': 'Very tall trees',
51+
'aria-malprop': 'Turbulent seas',
52+
});
53+
assertConsoleErrorDev([
5054
'Invalid aria props `aria-badprop`, `aria-malprop` on <div> ' +
51-
'tag. For details, see https://react.dev/link/invalid-aria-props',
52-
);
55+
'tag. For details, see https://react.dev/link/invalid-aria-props\n' +
56+
' in div (at **)',
57+
]);
5358
});
5459
it('should warn for an improperly cased aria-* prop', async () => {
5560
// The valid attribute name is aria-haspopup.
56-
await expect(() => mountComponent({'aria-hasPopup': 'true'})).toErrorDev(
61+
await mountComponent({'aria-hasPopup': 'true'});
62+
assertConsoleErrorDev([
5763
'Unknown ARIA attribute `aria-hasPopup`. ' +
58-
'Did you mean `aria-haspopup`?',
59-
);
64+
'Did you mean `aria-haspopup`?\n' +
65+
' in div (at **)',
66+
]);
6067
});
6168

6269
it('should warn for use of recognized camel case aria attributes', async () => {
6370
// The valid attribute name is aria-haspopup.
64-
await expect(() => mountComponent({ariaHasPopup: 'true'})).toErrorDev(
71+
await mountComponent({ariaHasPopup: 'true'});
72+
assertConsoleErrorDev([
6573
'Invalid ARIA attribute `ariaHasPopup`. ' +
66-
'Did you mean `aria-haspopup`?',
67-
);
74+
'Did you mean `aria-haspopup`?\n' +
75+
' in div (at **)',
76+
]);
6877
});
6978

7079
it('should warn for use of unrecognized camel case aria attributes', async () => {
7180
// The valid attribute name is aria-haspopup.
72-
await expect(() =>
73-
mountComponent({ariaSomethingInvalid: 'true'}),
74-
).toErrorDev(
81+
await mountComponent({ariaSomethingInvalid: 'true'});
82+
assertConsoleErrorDev([
7583
'Invalid ARIA attribute `ariaSomethingInvalid`. ARIA ' +
76-
'attributes follow the pattern aria-* and must be lowercase.',
77-
);
84+
'attributes follow the pattern aria-* and must be lowercase.\n' +
85+
' in div (at **)',
86+
]);
7887
});
7988
});
8089
});

‎packages/react-dom/src/__tests__/ReactDOMLegacyComponentTree-test.internal.js‎

Lines changed: 19 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -13,10 +13,13 @@ describe('ReactDOMComponentTree', () => {
1313
let React;
1414
let ReactDOM;
1515
let container;
16+
let assertConsoleErrorDev;
1617

1718
beforeEach(() => {
1819
React = require('react');
1920
ReactDOM = require('react-dom');
21+
assertConsoleErrorDev =
22+
require('internal-test-utils').assertConsoleErrorDev;
2023

2124
container = document.createElement('div');
2225
document.body.appendChild(container);
@@ -31,11 +34,14 @@ describe('ReactDOMComponentTree', () => {
3134
it('finds instance of node that is attempted to be unmounted', () => {
3235
const component = <div />;
3336
const node = ReactDOM.render(<div>{component}</div>, container);
34-
expect(() => ReactDOM.unmountComponentAtNode(node)).toErrorDev(
35-
"unmountComponentAtNode(): The node you're attempting to unmount " +
36-
'was rendered by React and is not a top-level container. You may ' +
37-
'have accidentally passed in a React root node instead of its ' +
38-
'container.',
37+
ReactDOM.unmountComponentAtNode(node);
38+
assertConsoleErrorDev(
39+
[
40+
"unmountComponentAtNode(): The node you're attempting to unmount " +
41+
'was rendered by React and is not a top-level container. You may ' +
42+
'have accidentally passed in a React root node instead of its ' +
43+
'container.',
44+
],
3945
{withoutStack: true},
4046
);
4147
});
@@ -49,11 +55,14 @@ describe('ReactDOMComponentTree', () => {
4955
);
5056
const anotherComponent = <div />;
5157
const instance = ReactDOM.render(component, container);
52-
expect(() => ReactDOM.render(anotherComponent, instance)).toErrorDev(
53-
'Replacing React-rendered children with a new root ' +
54-
'component. If you intended to update the children of this node, ' +
55-
'you should instead have the existing children update their state ' +
56-
'and render the new components instead of calling ReactDOM.render.',
58+
ReactDOM.render(anotherComponent, instance);
59+
assertConsoleErrorDev(
60+
[
61+
'Replacing React-rendered children with a new root ' +
62+
'component. If you intended to update the children of this node, ' +
63+
'you should instead have the existing children update their state ' +
64+
'and render the new components instead of calling ReactDOM.render.',
65+
],
5766
{withoutStack: true},
5867
);
5968
});

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

Lines changed: 45 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -13,11 +13,14 @@ const React = require('react');
1313
const ReactDOM = require('react-dom');
1414
const PropTypes = require('prop-types');
1515
let act;
16+
let assertConsoleErrorDev;
1617
describe('ReactDOMLegacyFiber', () => {
1718
let container;
1819

1920
beforeEach(() => {
2021
act = require('internal-test-utils').act;
22+
assertConsoleErrorDev =
23+
require('internal-test-utils').assertConsoleErrorDev;
2124
container = document.createElement('div');
2225
document.body.appendChild(container);
2326
});
@@ -786,9 +789,8 @@ describe('ReactDOMLegacyFiber', () => {
786789
}
787790
}
788791

789-
expect(() => {
790-
ReactDOM.render(<Parent />, container);
791-
}).toErrorDev([
792+
ReactDOM.render(<Parent />, container);
793+
assertConsoleErrorDev([
792794
'Parent uses the legacy childContextTypes API which will soon be removed. Use React.createContext() instead.',
793795
'Component uses the legacy contextTypes API which will soon be removed. Use React.createContext() with static contextType instead.',
794796
]);
@@ -834,10 +836,8 @@ describe('ReactDOMLegacyFiber', () => {
834836
}
835837
}
836838

837-
let instance;
838-
expect(() => {
839-
instance = ReactDOM.render(<Parent />, container);
840-
}).toErrorDev([
839+
const instance = ReactDOM.render(<Parent />, container);
840+
assertConsoleErrorDev([
841841
'Parent uses the legacy childContextTypes API which will soon be removed. Use React.createContext() instead.',
842842
'Component uses the legacy contextTypes API which will soon be removed. Use React.createContext() with static contextType instead.',
843843
]);
@@ -882,9 +882,8 @@ describe('ReactDOMLegacyFiber', () => {
882882
}
883883
}
884884

885-
expect(() => {
886-
ReactDOM.render(<Parent bar="initial" />, container);
887-
}).toErrorDev([
885+
ReactDOM.render(<Parent bar="initial" />, container);
886+
assertConsoleErrorDev([
888887
'Parent uses the legacy childContextTypes API which will soon be removed. Use React.createContext() instead.',
889888
'Component uses the legacy contextTypes API which will soon be removed. Use React.createContext() with static contextType instead.',
890889
]);
@@ -1117,11 +1116,12 @@ describe('ReactDOMLegacyFiber', () => {
11171116
return <div onClick="woops" />;
11181117
}
11191118
}
1120-
expect(() => ReactDOM.render(<Example />, container)).toErrorDev(
1119+
ReactDOM.render(<Example />, container);
1120+
assertConsoleErrorDev([
11211121
'Expected `onClick` listener to be a function, instead got a value of `string` type.\n' +
11221122
' in div (at **)\n' +
11231123
' in Example (at **)',
1124-
);
1124+
]);
11251125
});
11261126

11271127
// @gate !disableLegacyMode
@@ -1131,13 +1131,14 @@ describe('ReactDOMLegacyFiber', () => {
11311131
return <div onClick={false} />;
11321132
}
11331133
}
1134-
expect(() => ReactDOM.render(<Example />, container)).toErrorDev(
1134+
ReactDOM.render(<Example />, container);
1135+
assertConsoleErrorDev([
11351136
'Expected `onClick` listener to be a function, instead got `false`.\n\n' +
11361137
'If you used to conditionally omit it with onClick={condition && value}, ' +
11371138
'pass onClick={condition ? value : undefined} instead.\n' +
11381139
' in div (at **)\n' +
11391140
' in Example (at **)',
1140-
);
1141+
]);
11411142
});
11421143

11431144
// @gate !disableLegacyMode
@@ -1270,17 +1271,18 @@ describe('ReactDOMLegacyFiber', () => {
12701271
container.innerHTML = '<div>MEOW.</div>';
12711272

12721273
await expect(async () => {
1273-
await expect(async () => {
1274-
await act(() => {
1275-
ReactDOM.render(<div key="2">baz</div>, container);
1276-
});
1277-
}).rejects.toThrow('The node to be removed is not a child of this node.');
1278-
}).toErrorDev(
1279-
'' +
1280-
'It looks like the React-rendered content of this container was ' +
1281-
'removed without using React. This is not supported and will ' +
1282-
'cause errors. Instead, call ReactDOM.unmountComponentAtNode ' +
1283-
'to empty a container.',
1274+
await act(() => {
1275+
ReactDOM.render(<div key="2">baz</div>, container);
1276+
});
1277+
}).rejects.toThrow('The node to be removed is not a child of this node.');
1278+
assertConsoleErrorDev(
1279+
[
1280+
'' +
1281+
'It looks like the React-rendered content of this container was ' +
1282+
'removed without using React. This is not supported and will ' +
1283+
'cause errors. Instead, call ReactDOM.unmountComponentAtNode ' +
1284+
'to empty a container.',
1285+
],
12841286
{withoutStack: true},
12851287
);
12861288
});
@@ -1293,12 +1295,15 @@ describe('ReactDOMLegacyFiber', () => {
12931295
expect(container.innerHTML).toBe('<div>bar</div>');
12941296
// then we mess with the DOM before an update
12951297
container.innerHTML = '<div>MEOW.</div>';
1296-
expect(() => ReactDOM.render(<div>baz</div>, container)).toErrorDev(
1297-
'' +
1298-
'It looks like the React-rendered content of this container was ' +
1299-
'removed without using React. This is not supported and will ' +
1300-
'cause errors. Instead, call ReactDOM.unmountComponentAtNode ' +
1301-
'to empty a container.',
1298+
ReactDOM.render(<div>baz</div>, container);
1299+
assertConsoleErrorDev(
1300+
[
1301+
'' +
1302+
'It looks like the React-rendered content of this container was ' +
1303+
'removed without using React. This is not supported and will ' +
1304+
'cause errors. Instead, call ReactDOM.unmountComponentAtNode ' +
1305+
'to empty a container.',
1306+
],
13021307
{withoutStack: true},
13031308
);
13041309
});
@@ -1311,12 +1316,15 @@ describe('ReactDOMLegacyFiber', () => {
13111316
expect(container.innerHTML).toBe('<div>bar</div>');
13121317
// then we mess with the DOM before an update
13131318
container.innerHTML = '';
1314-
expect(() => ReactDOM.render(<div>baz</div>, container)).toErrorDev(
1315-
'' +
1316-
'It looks like the React-rendered content of this container was ' +
1317-
'removed without using React. This is not supported and will ' +
1318-
'cause errors. Instead, call ReactDOM.unmountComponentAtNode ' +
1319-
'to empty a container.',
1319+
ReactDOM.render(<div>baz</div>, container);
1320+
assertConsoleErrorDev(
1321+
[
1322+
'' +
1323+
'It looks like the React-rendered content of this container was ' +
1324+
'removed without using React. This is not supported and will ' +
1325+
'cause errors. Instead, call ReactDOM.unmountComponentAtNode ' +
1326+
'to empty a container.',
1327+
],
13201328
{withoutStack: true},
13211329
);
13221330
});

0 commit comments

Comments
 (0)