Skip to content

Commit

Permalink
Update tests
Browse files Browse the repository at this point in the history
  • Loading branch information
@sebmarkbage
sebmarkbage committed Feb 24, 2024
1 parent 58868bc commit 49533a7
Show file tree
Hide file tree
Showing 5 changed files with 64 additions and 35 deletions.
32 changes: 19 additions & 13 deletions packages/react-dom/src/__tests__/ReactDOMComponent-test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2188,8 +2188,9 @@ describe('ReactDOMComponent', () => {
);
});
}).toErrorDev([
'Warning: <tr> cannot appear as a child of ' +
'<div>.' +
'Warning: In HTML, <tr> cannot be a child of ' +
'<div>.\n' +
'This will cause a hydration error.' +
'\n in tr (at **)' +
'\n in div (at **)',
]);
Expand All @@ -2208,8 +2209,9 @@ describe('ReactDOMComponent', () => {
);
});
}).toErrorDev(
'Warning: <p> cannot appear as a descendant ' +
'of <p>.' +
'Warning: In HTML, <p> cannot be a descendant ' +
'of <p>.\n' +
'This will cause a hydration error.' +
// There is no outer `p` here because root container is not part of the stack.
'\n in p (at **)' +
'\n in span (at **)',
Expand Down Expand Up @@ -2241,22 +2243,25 @@ describe('ReactDOMComponent', () => {
root.render(<Foo />);
});
}).toErrorDev([
'Warning: <tr> cannot appear as a child of ' +
'Warning: In HTML, <tr> cannot be a child of ' +
'<table>. Add a <tbody>, <thead> or <tfoot> to your code to match the DOM tree generated ' +
'by the browser.' +
'by the browser.\n' +
'This will cause a hydration error.' +
'\n in tr (at **)' +
'\n in Row (at **)' +
'\n in table (at **)' +
'\n in Foo (at **)',
'Warning: Text nodes cannot appear as a ' +
'child of <tr>.' +
'Warning: In HTML, text nodes cannot be a ' +
'child of <tr>.\n' +
'This will cause a hydration error.' +
'\n in tr (at **)' +
'\n in Row (at **)' +
'\n in table (at **)' +
'\n in Foo (at **)',
'Warning: Whitespace text nodes cannot ' +
'Warning: In HTML, whitespace text nodes cannot ' +
"appear as a child of <table>. Make sure you don't have any extra " +
'whitespace between tags on each line of your source code.' +
'whitespace between tags on each line of your source code.\n' +
'This will cause a hydration error.' +
'\n in table (at **)' +
'\n in Foo (at **)',
]);
Expand All @@ -2283,7 +2288,7 @@ describe('ReactDOMComponent', () => {
root.render(<Foo> </Foo>);
});
}).toErrorDev([
'Warning: Whitespace text nodes cannot ' +
'Warning: In HTML, whitespace text nodes cannot ' +
"appear as a child of <table>. Make sure you don't have any extra " +
'whitespace between tags on each line of your source code.' +
'\n in table (at **)' +
Expand Down Expand Up @@ -2311,8 +2316,9 @@ describe('ReactDOMComponent', () => {
);
});
}).toErrorDev([
'Warning: Text nodes cannot appear as a ' +
'child of <tr>.' +
'Warning: Text nodes cannot be a ' +
'child of <tr>.\n' +
'This will cause a hydration error.' +
'\n in tr (at **)' +
'\n in Row (at **)' +
'\n in tbody (at **)' +
Expand Down
20 changes: 10 additions & 10 deletions packages/react-dom/src/__tests__/ReactDOMFloat-test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -523,7 +523,7 @@ describe('ReactDOMFloat', () => {
}).toErrorDev(
[
'Cannot render <noscript> outside the main document. Try moving it into the root <head> tag.',
'Warning: <noscript> cannot appear as a child of <#document>.',
'Warning: In HTML, <noscript> cannot be a child of <#document>.',
],
{withoutStack: 1},
);
Expand All @@ -538,7 +538,7 @@ describe('ReactDOMFloat', () => {
await waitForAll([]);
}).toErrorDev([
'Cannot render <template> outside the main document. Try moving it into the root <head> tag.',
'Warning: <template> cannot appear as a child of <html>.',
'Warning: In HTML, <template> cannot be a child of <html>.',
]);

await expect(async () => {
Expand All @@ -551,7 +551,7 @@ describe('ReactDOMFloat', () => {
await waitForAll([]);
}).toErrorDev([
'Cannot render a <style> outside the main document without knowing its precedence and a unique href key. React can hoist and deduplicate <style> tags if you provide a `precedence` prop along with an `href` prop that does not conflic with the `href` values used in any other hoisted <style> or <link rel="stylesheet" ...> tags. Note that hoisting <style> tags is considered an advanced feature that most will not use directly. Consider moving the <style> tag to the <head> or consider adding a `precedence="default"` and `href="some unique resource identifier"`, or move the <style> to the <style> tag.',
'Warning: <style> cannot appear as a child of <html>.',
'Warning: In HTML, <style> cannot be a child of <html>.',
]);

await expect(async () => {
Expand All @@ -574,7 +574,7 @@ describe('ReactDOMFloat', () => {
}).toErrorDev(
[
'Cannot render a <link rel="stylesheet" /> outside the main document without knowing its precedence. Consider adding precedence="default" or moving it into the root <head> tag.',
'Warning: <link> cannot appear as a child of <#document>.',
'Warning: In HTML, <link> cannot be a child of <#document>.',
],
{withoutStack: 1},
);
Expand All @@ -591,7 +591,7 @@ describe('ReactDOMFloat', () => {
await waitForAll([]);
}).toErrorDev([
'Cannot render a sync or defer <script> outside the main document without knowing its order. Try adding async="" or moving it into the root <head> tag.',
'Warning: <script> cannot appear as a child of <html>.',
'Warning: In HTML, <script> cannot be a child of <html>.',
]);

await expect(async () => {
Expand Down Expand Up @@ -2552,11 +2552,11 @@ body {
'Cannot render a <style> outside the main document if it has an `itemProp` prop. `itemProp` suggests the tag belongs to an `itemScope` which can appear anywhere in the DOM. If you were intending for React to hoist this <style> remove the `itemProp` prop. Otherwise, try moving this tag into the <head> or <body> of the Document.',
'Cannot render a <link> outside the main document if it has an `itemProp` prop. `itemProp` suggests the tag belongs to an `itemScope` which can appear anywhere in the DOM. If you were intending for React to hoist this <link> remove the `itemProp` prop. Otherwise, try moving this tag into the <head> or <body> of the Document.',
'Cannot render a <script> outside the main document if it has an `itemProp` prop. `itemProp` suggests the tag belongs to an `itemScope` which can appear anywhere in the DOM. If you were intending for React to hoist this <script> remove the `itemProp` prop. Otherwise, try moving this tag into the <head> or <body> of the Document.',
'<meta> cannot appear as a child of <html>',
'<title> cannot appear as a child of <html>',
'<style> cannot appear as a child of <html>',
'<link> cannot appear as a child of <html>',
'<script> cannot appear as a child of <html>',
'In HTML, <meta> cannot be a child of <html>',
'In HTML, <title> cannot be a child of <html>',
'In HTML, <style> cannot be a child of <html>',
'In HTML, <link> cannot be a child of <html>',
'In HTML, <script> cannot be a child of <html>',
]);
});

Expand Down
3 changes: 2 additions & 1 deletion packages/react-dom/src/__tests__/ReactDOMForm-test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -381,7 +381,8 @@ describe('ReactDOMForm', () => {
);
});
}).toErrorDev([
'Warning: <form> cannot appear as a descendant of <form>.' +
'Warning: In HTML, <form> cannot be a descendant of <form>.\n' +
'This will cause a hydration error.' +
'\n in form (at **)' +
'\n in form (at **)',
]);
Expand Down
7 changes: 4 additions & 3 deletions packages/react-dom/src/__tests__/ReactDOMOption-test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,8 +46,9 @@ describe('ReactDOMOption', () => {
expect(() => {
node = ReactTestUtils.renderIntoDocument(el);
}).toErrorDev(
'<div> cannot appear as a child of <option>.\n' +
' in div (at **)\n' +
'In HTML, <div> cannot be a child of <option>.\n' +
'This will cause a hydration error.\n' +
' in div (at **)\n' +
' in option (at **)',
);
expect(node.innerHTML).toBe('1 <div></div> 2');
Expand Down Expand Up @@ -263,7 +264,7 @@ describe('ReactDOMOption', () => {
[
'Warning: Text content did not match. Server: "FooBaz" Client: "Foo"',
'Warning: An error occurred during hydration. The server HTML was replaced with client content in <div>',
'Warning: <div> cannot appear as a child of <option>',
'Warning: In HTML, <div> cannot be a child of <option>',
],
{withoutStack: 1},
);
Expand Down
37 changes: 29 additions & 8 deletions packages/react-dom/src/__tests__/validateDOMNesting-test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,31 +60,42 @@ describe('validateDOMNesting', () => {
it('prevents problematic nestings', () => {
expectWarnings(
['a', 'a'],
['<a> cannot appear as a descendant of <a>.\n' + ' in a (at **)'],
[
'In HTML, <a> cannot be a descendant of <a>.\n' +
'This will cause a hydration error.\n' +
' in a (at **)',
],
);
expectWarnings(
['form', 'form'],
[
'<form> cannot appear as a descendant of <form>.\n' +
'In HTML, <form> cannot be a descendant of <form>.\n' +
'This will cause a hydration error.\n' +
' in form (at **)',
],
);
expectWarnings(
['p', 'p'],
['<p> cannot appear as a descendant of <p>.\n' + ' in p (at **)'],
[
'In HTML, <p> cannot be a descendant of <p>.\n' +
'This will cause a hydration error.\n' +
' in p (at **)',
],
);
expectWarnings(
['table', 'tr'],
[
'<tr> cannot appear as a child of <table>. ' +
'In HTML, <tr> cannot be a child of <table>. ' +
'Add a <tbody>, <thead> or <tfoot> to your code to match the DOM tree generated by the browser.\n' +
'This will cause a hydration error.\n' +
' in tr (at **)',
],
);
expectWarnings(
['div', 'ul', 'li', 'div', 'li'],
[
'<li> cannot appear as a descendant of <li>.\n' +
'In HTML, <li> cannot be a descendant of <li>.\n' +
'This will cause a hydration error.\n' +
' in li (at **)\n' +
' in div (at **)\n' +
' in li (at **)\n' +
Expand All @@ -93,16 +104,26 @@ describe('validateDOMNesting', () => {
);
expectWarnings(
['div', 'html'],
['<html> cannot appear as a child of <div>.\n' + ' in html (at **)'],
[
'In HTML, <html> cannot be a child of <div>.\n' +
'This will cause a hydration error.\n' +
' in html (at **)',
],
);
expectWarnings(
['body', 'body'],
['<body> cannot appear as a child of <body>.\n' + ' in body (at **)'],
[
'In HTML, <body> cannot be a child of <body>.\n' +
'This will cause a hydration error.\n' +
' in body (at **)',
],
);
expectWarnings(
['svg', 'foreignObject', 'body', 'p'],
[
'<body> cannot appear as a child of <foreignObject>.\n' +
// TODO, this should say "In SVG",
'In HTML, <body> cannot be a child of <foreignObject>.\n' +
'This will cause a hydration error.' +
' in body (at **)\n' +
' in foreignObject (at **)',
'Warning: You are mounting a new body component when a previous one has not first unmounted. It is an error to render more than one body component at a time and attributes and children of these components will likely fail in unpredictable ways. Please only render a single instance of <body> and if you need to mount a new one, ensure any previous ones have unmounted first.\n' +
Expand Down

0 comments on commit 49533a7

Please sign in to comment.