Skip to content

[pull] main from facebook:main #63

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jan 6, 2025
Merged

[pull] main from facebook:main #63

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
53 changes: 31 additions & 22 deletions packages/react-dom/src/__tests__/ReactDOMInvalidARIAHook-test.js
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Loading