Skip to content

Commit

Permalink
[assert helpers] react-dom (pt3) (#31983)
Browse files Browse the repository at this point in the history 
moar assert helpers

this finishes all of react-dom except the server integration tests which
are tricky to convert
  • Loading branch information
@rickhanlonii
rickhanlonii authored Jan 5, 2025
1 parent bf883be commit 03e4ec2
Show file tree
Hide file tree
Showing 28 changed files with 2,056 additions and 1,461 deletions.
53 changes: 31 additions & 22 deletions packages/react-dom/src/__tests__/ReactDOMInvalidARIAHook-test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,12 +14,15 @@ describe('ReactDOMInvalidARIAHook', () => {
let ReactDOMClient;
let mountComponent;
let act;
let assertConsoleErrorDev;

beforeEach(() => {
jest.resetModules();
React = require('react');
ReactDOMClient = require('react-dom/client');
act = require('internal-test-utils').act;
assertConsoleErrorDev =
require('internal-test-utils').assertConsoleErrorDev;

mountComponent = async function (props) {
const container = document.createElement('div');
Expand All @@ -35,46 +38,52 @@ describe('ReactDOMInvalidARIAHook', () => {
await mountComponent({'aria-label': 'Bumble bees'});
});
it('should warn for one invalid aria-* prop', async () => {
await expect(() => mountComponent({'aria-badprop': 'maybe'})).toErrorDev(
await mountComponent({'aria-badprop': 'maybe'});
assertConsoleErrorDev([
'Invalid aria prop `aria-badprop` on <div> tag. ' +
'For details, see https://react.dev/link/invalid-aria-props',
);
'For details, see https://react.dev/link/invalid-aria-props\n' +
' in div (at **)',
]);
});
it('should warn for many invalid aria-* props', async () => {
await expect(() =>
mountComponent({
'aria-badprop': 'Very tall trees',
'aria-malprop': 'Turbulent seas',
}),
).toErrorDev(
await mountComponent({
'aria-badprop': 'Very tall trees',
'aria-malprop': 'Turbulent seas',
});
assertConsoleErrorDev([
'Invalid aria props `aria-badprop`, `aria-malprop` on <div> ' +
'tag. For details, see https://react.dev/link/invalid-aria-props',
);
'tag. For details, see https://react.dev/link/invalid-aria-props\n' +
' in div (at **)',
]);
});
it('should warn for an improperly cased aria-* prop', async () => {
// The valid attribute name is aria-haspopup.
await expect(() => mountComponent({'aria-hasPopup': 'true'})).toErrorDev(
await mountComponent({'aria-hasPopup': 'true'});
assertConsoleErrorDev([
'Unknown ARIA attribute `aria-hasPopup`. ' +
'Did you mean `aria-haspopup`?',
);
'Did you mean `aria-haspopup`?\n' +
' in div (at **)',
]);
});

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

it('should warn for use of unrecognized camel case aria attributes', async () => {
// The valid attribute name is aria-haspopup.
await expect(() =>
mountComponent({ariaSomethingInvalid: 'true'}),
).toErrorDev(
await mountComponent({ariaSomethingInvalid: 'true'});
assertConsoleErrorDev([
'Invalid ARIA attribute `ariaSomethingInvalid`. ARIA ' +
'attributes follow the pattern aria-* and must be lowercase.',
);
'attributes follow the pattern aria-* and must be lowercase.\n' +
' in div (at **)',
]);
});
});
});
29 changes: 19 additions & 10 deletions packages/react-dom/src/__tests__/ReactDOMLegacyComponentTree-test.internal.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,10 +13,13 @@ describe('ReactDOMComponentTree', () => {
let React;
let ReactDOM;
let container;
let assertConsoleErrorDev;

beforeEach(() => {
React = require('react');
ReactDOM = require('react-dom');
assertConsoleErrorDev =
require('internal-test-utils').assertConsoleErrorDev;

container = document.createElement('div');
document.body.appendChild(container);
Expand All @@ -31,11 +34,14 @@ describe('ReactDOMComponentTree', () => {
it('finds instance of node that is attempted to be unmounted', () => {
const component = <div />;
const node = ReactDOM.render(<div>{component}</div>, container);
expect(() => ReactDOM.unmountComponentAtNode(node)).toErrorDev(
"unmountComponentAtNode(): The node you're attempting to unmount " +
'was rendered by React and is not a top-level container. You may ' +
'have accidentally passed in a React root node instead of its ' +
'container.',
ReactDOM.unmountComponentAtNode(node);
assertConsoleErrorDev(
[
"unmountComponentAtNode(): The node you're attempting to unmount " +
'was rendered by React and is not a top-level container. You may ' +
'have accidentally passed in a React root node instead of its ' +
'container.',
],
{withoutStack: true},
);
});
Expand All @@ -49,11 +55,14 @@ describe('ReactDOMComponentTree', () => {
);
const anotherComponent = <div />;
const instance = ReactDOM.render(component, container);
expect(() => ReactDOM.render(anotherComponent, instance)).toErrorDev(
'Replacing React-rendered children with a new root ' +
'component. If you intended to update the children of this node, ' +
'you should instead have the existing children update their state ' +
'and render the new components instead of calling ReactDOM.render.',
ReactDOM.render(anotherComponent, instance);
assertConsoleErrorDev(
[
'Replacing React-rendered children with a new root ' +
'component. If you intended to update the children of this node, ' +
'you should instead have the existing children update their state ' +
'and render the new components instead of calling ReactDOM.render.',
],
{withoutStack: true},
);
});
Expand Down
82 changes: 45 additions & 37 deletions packages/react-dom/src/__tests__/ReactDOMLegacyFiber-test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,11 +13,14 @@ const React = require('react');
const ReactDOM = require('react-dom');
const PropTypes = require('prop-types');
let act;
let assertConsoleErrorDev;
describe('ReactDOMLegacyFiber', () => {
let container;

beforeEach(() => {
act = require('internal-test-utils').act;
assertConsoleErrorDev =
require('internal-test-utils').assertConsoleErrorDev;
container = document.createElement('div');
document.body.appendChild(container);
});
Expand Down Expand Up @@ -786,9 +789,8 @@ describe('ReactDOMLegacyFiber', () => {
}
}

expect(() => {
ReactDOM.render(<Parent />, container);
}).toErrorDev([
ReactDOM.render(<Parent />, container);
assertConsoleErrorDev([
'Parent uses the legacy childContextTypes API which will soon be removed. Use React.createContext() instead.',
'Component uses the legacy contextTypes API which will soon be removed. Use React.createContext() with static contextType instead.',
]);
Expand Down Expand Up @@ -834,10 +836,8 @@ describe('ReactDOMLegacyFiber', () => {
}
}

let instance;
expect(() => {
instance = ReactDOM.render(<Parent />, container);
}).toErrorDev([
const instance = ReactDOM.render(<Parent />, container);
assertConsoleErrorDev([
'Parent uses the legacy childContextTypes API which will soon be removed. Use React.createContext() instead.',
'Component uses the legacy contextTypes API which will soon be removed. Use React.createContext() with static contextType instead.',
]);
Expand Down Expand Up @@ -882,9 +882,8 @@ describe('ReactDOMLegacyFiber', () => {
}
}

expect(() => {
ReactDOM.render(<Parent bar="initial" />, container);
}).toErrorDev([
ReactDOM.render(<Parent bar="initial" />, container);
assertConsoleErrorDev([
'Parent uses the legacy childContextTypes API which will soon be removed. Use React.createContext() instead.',
'Component uses the legacy contextTypes API which will soon be removed. Use React.createContext() with static contextType instead.',
]);
Expand Down Expand Up @@ -1117,11 +1116,12 @@ describe('ReactDOMLegacyFiber', () => {
return <div onClick="woops" />;
}
}
expect(() => ReactDOM.render(<Example />, container)).toErrorDev(
ReactDOM.render(<Example />, container);
assertConsoleErrorDev([
'Expected `onClick` listener to be a function, instead got a value of `string` type.\n' +
' in div (at **)\n' +
' in Example (at **)',
);
]);
});

// @gate !disableLegacyMode
Expand All @@ -1131,13 +1131,14 @@ describe('ReactDOMLegacyFiber', () => {
return <div onClick={false} />;
}
}
expect(() => ReactDOM.render(<Example />, container)).toErrorDev(
ReactDOM.render(<Example />, container);
assertConsoleErrorDev([
'Expected `onClick` listener to be a function, instead got `false`.\n\n' +
'If you used to conditionally omit it with onClick={condition && value}, ' +
'pass onClick={condition ? value : undefined} instead.\n' +
' in div (at **)\n' +
' in Example (at **)',
);
]);
});

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

await expect(async () => {
await expect(async () => {
await act(() => {
ReactDOM.render(<div key="2">baz</div>, container);
});
}).rejects.toThrow('The node to be removed is not a child of this node.');
}).toErrorDev(
'' +
'It looks like the React-rendered content of this container was ' +
'removed without using React. This is not supported and will ' +
'cause errors. Instead, call ReactDOM.unmountComponentAtNode ' +
'to empty a container.',
await act(() => {
ReactDOM.render(<div key="2">baz</div>, container);
});
}).rejects.toThrow('The node to be removed is not a child of this node.');
assertConsoleErrorDev(
[
'' +
'It looks like the React-rendered content of this container was ' +
'removed without using React. This is not supported and will ' +
'cause errors. Instead, call ReactDOM.unmountComponentAtNode ' +
'to empty a container.',
],
{withoutStack: true},
);
});
Expand All @@ -1293,12 +1295,15 @@ describe('ReactDOMLegacyFiber', () => {
expect(container.innerHTML).toBe('<div>bar</div>');
// then we mess with the DOM before an update
container.innerHTML = '<div>MEOW.</div>';
expect(() => ReactDOM.render(<div>baz</div>, container)).toErrorDev(
'' +
'It looks like the React-rendered content of this container was ' +
'removed without using React. This is not supported and will ' +
'cause errors. Instead, call ReactDOM.unmountComponentAtNode ' +
'to empty a container.',
ReactDOM.render(<div>baz</div>, container);
assertConsoleErrorDev(
[
'' +
'It looks like the React-rendered content of this container was ' +
'removed without using React. This is not supported and will ' +
'cause errors. Instead, call ReactDOM.unmountComponentAtNode ' +
'to empty a container.',
],
{withoutStack: true},
);
});
Expand All @@ -1311,12 +1316,15 @@ describe('ReactDOMLegacyFiber', () => {
expect(container.innerHTML).toBe('<div>bar</div>');
// then we mess with the DOM before an update
container.innerHTML = '';
expect(() => ReactDOM.render(<div>baz</div>, container)).toErrorDev(
'' +
'It looks like the React-rendered content of this container was ' +
'removed without using React. This is not supported and will ' +
'cause errors. Instead, call ReactDOM.unmountComponentAtNode ' +
'to empty a container.',
ReactDOM.render(<div>baz</div>, container);
assertConsoleErrorDev(
[
'' +
'It looks like the React-rendered content of this container was ' +
'removed without using React. This is not supported and will ' +
'cause errors. Instead, call ReactDOM.unmountComponentAtNode ' +
'to empty a container.',
],
{withoutStack: true},
);
});
Expand Down
Loading

0 comments on commit 03e4ec2

Please sign in to comment.