@samitouri / QOS-React-1 / commits / dc7578290f

[assert helpers] ReactDOMFloat-test (#31901)

Splitting out ReactDOMFloat to it's own PR because it's huge.

Ricky committed Jan 2, 2025 at 15:53 UTC dc7578290f1bc55c358bee3a7eeb5e5f4551adfd
1 file changed +670 -325
packages/react-dom/src/__tests__/ReactDOMFloat-test.js
+670 -325
@@ -36,6 +36,7 @@ let assertLog;
36 let Scheduler;
37 let clientAct;
38 let streamingContainer;
39 +let assertConsoleErrorDev;
40
41 describe('ReactDOMFloat', () => {
42 beforeEach(() => {
@@ -78,6 +79,7 @@ describe('ReactDOMFloat', () => {
79 waitForThrow = InternalTestUtils.waitForThrow;
80 assertLog = InternalTestUtils.assertLog;
81 clientAct = InternalTestUtils.act;
82 + assertConsoleErrorDev = InternalTestUtils.assertConsoleErrorDev;
83
84 textCache = new Map();
85 loadCache = new Set();
@@ -497,131 +499,166 @@ describe('ReactDOMFloat', () => {
499 it('warns if you render resource-like elements above <head> or <body>', async () => {
500 const root = ReactDOMClient.createRoot(document);
501
500 - await expect(async () => {
501 - root.render(
502 - <>
503 - <noscript>foo</noscript>
504 - <html>
505 - <body>foo</body>
506 - </html>
507 - </>,
508 - );
509 - const aggregateError = await waitForThrow();
510 - expect(aggregateError.errors.length).toBe(2);
511 - expect(aggregateError.errors[0].message).toContain(
512 - 'Invalid insertion of NOSCRIPT',
513 - );
514 - expect(aggregateError.errors[1].message).toContain(
515 - 'The node to be removed is not a child of this node',
516 - );
517 - }).toErrorDev(
502 + root.render(
503 + <>
504 + <noscript>foo</noscript>
505 + <html>
506 + <body>foo</body>
507 + </html>
508 + </>,
509 + );
510 + let aggregateError = await waitForThrow();
511 + expect(aggregateError.errors.length).toBe(2);
512 + expect(aggregateError.errors[0].message).toContain(
513 + 'Invalid insertion of NOSCRIPT',
514 + );
515 + expect(aggregateError.errors[1].message).toContain(
516 + 'The node to be removed is not a child of this node',
517 + );
518 + assertConsoleErrorDev([
519 [
520 'Cannot render <noscript> outside the main document. Try moving it into the root <head> tag.',
520 - 'In HTML, <noscript> cannot be a child of <#document>.',
521 + {withoutStack: true},
522 ],
522 - {withoutStack: 1},
523 + 'In HTML, <noscript> cannot be a child of <#document>.\n' +
524 + 'This will cause a hydration error.\n' +
525 + ' in noscript (at **)',
526 + ]);
527 +
528 + root.render(
529 + <html>
530 + <template>foo</template>
531 + <body>foo</body>
532 + </html>,
533 );
534 + await waitForAll([]);
535 + assertConsoleErrorDev([
536 + 'Cannot render <template> outside the main document. Try moving it into the root <head> tag.\n' +
537 + ' in html (at **)',
538 + 'In HTML, <template> cannot be a child of <html>.\n' +
539 + 'This will cause a hydration error.\n\n' +
540 + '> <html>\n' +
541 + '> <template>\n' +
542 + ' ...\n' +
543 + '\n' +
544 + ' in template (at **)' +
545 + (gate('enableOwnerStacks') ? '' : '\n in html (at **)'),
546 + ]);
547
525 - await expect(async () => {
526 - root.render(
548 + root.render(
549 + <html>
550 + <body>foo</body>
551 + <style>foo</style>
552 + </html>,
553 + );
554 + await waitForAll([]);
555 + assertConsoleErrorDev([
556 + 'Cannot render a <style> outside the main document without knowing its precedence ' +
557 + 'and a unique href key. React can hoist and deduplicate <style> tags if you provide a ' +
558 + '`precedence` prop along with an `href` prop that does not conflict with the `href` ' +
559 + 'values used in any other hoisted <style> or <link rel="stylesheet" ...> tags. ' +
560 + 'Note that hoisting <style> tags is considered an advanced feature that most will not use directly. ' +
561 + 'Consider moving the <style> tag to the <head> or consider adding a `precedence="default"` ' +
562 + 'and `href="some unique resource identifier"`.\n' +
563 + ' in html (at **)',
564 + 'In HTML, <style> cannot be a child of <html>.\n' +
565 + 'This will cause a hydration error.\n\n' +
566 + '> <html>\n' +
567 + ' <body>\n' +
568 + '> <style>\n' +
569 + '\n' +
570 + ' in style (at **)' +
571 + (gate('enableOwnerStacks') ? '' : '\n in html (at **)'),
572 + ]);
573 +
574 + root.render(
575 + <>
576 <html>
528 - <template>foo</template>
577 <body>foo</body>
530 - </html>,
531 - );
532 - await waitForAll([]);
533 - }).toErrorDev([
534 - 'Cannot render <template> outside the main document. Try moving it into the root <head> tag.',
535 - 'In HTML, <template> cannot be a child of <html>.',
578 + </html>
579 + <link rel="stylesheet" href="foo" />
580 + </>,
581 + );
582 + aggregateError = await waitForThrow();
583 + expect(aggregateError.errors.length).toBe(2);
584 + expect(aggregateError.errors[0].message).toContain(
585 + 'Invalid insertion of LINK',
586 + );
587 + expect(aggregateError.errors[1].message).toContain(
588 + 'The node to be removed is not a child of this node',
589 + );
590 + assertConsoleErrorDev([
591 + [
592 + 'Cannot render a <link rel="stylesheet" /> outside the main document without knowing its precedence. ' +
593 + 'Consider adding precedence="default" or moving it into the root <head> tag.',
594 + {withoutStack: true},
595 + ],
596 + 'In HTML, <link> cannot be a child of <#document>.\n' +
597 + 'This will cause a hydration error.\n' +
598 + ' in link (at **)',
599 ]);
600
538 - await expect(async () => {
539 - root.render(
601 + root.render(
602 + <>
603 <html>
604 <body>foo</body>
542 - <style>foo</style>
543 - </html>,
544 - );
545 - await waitForAll([]);
546 - }).toErrorDev([
547 - '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 conflict 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"`.',
548 - 'In HTML, <style> cannot be a child of <html>.',
605 + <script href="foo" />
606 + </html>
607 + </>,
608 + );
609 + await waitForAll([]);
610 + assertConsoleErrorDev([
611 + 'Cannot render a sync or defer <script> outside the main document without knowing its order. ' +
612 + 'Try adding async="" or moving it into the root <head> tag.\n' +
613 + ' in html (at **)',
614 + 'In HTML, <script> cannot be a child of <html>.\n' +
615 + 'This will cause a hydration error.\n' +
616 + '\n' +
617 + '> <html>\n' +
618 + ' <body>\n' +
619 + '> <script href="foo">\n' +
620 + '\n' +
621 + ' in script (at **)' +
622 + (gate('enableOwnerStacks') ? '' : '\n in html (at **)'),
623 ]);
624
551 - await expect(async () => {
552 - root.render(
553 - <>
554 - <html>
555 - <body>foo</body>
556 - </html>
557 - <link rel="stylesheet" href="foo" />
558 - </>,
559 - );
560 - const aggregateError = await waitForThrow();
561 - expect(aggregateError.errors.length).toBe(2);
562 - expect(aggregateError.errors[0].message).toContain(
563 - 'Invalid insertion of LINK',
564 - );
565 - expect(aggregateError.errors[1].message).toContain(
566 - 'The node to be removed is not a child of this node',
567 - );
568 - }).toErrorDev(
569 - [
570 - '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.',
571 - 'In HTML, <link> cannot be a child of <#document>.',
572 - ],
573 - {withoutStack: 1},
625 + root.render(
626 + <html>
627 + <script async={true} onLoad={() => {}} href="bar" />
628 + <body>foo</body>
629 + </html>,
630 );
575 -
576 - await expect(async () => {
577 - root.render(
578 - <>
579 - <html>
580 - <body>foo</body>
581 - <script href="foo" />
582 - </html>
583 - </>,
584 - );
585 - await waitForAll([]);
586 - }).toErrorDev([
587 - '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.',
588 - 'In HTML, <script> cannot be a child of <html>.',
631 + await waitForAll([]);
632 + assertConsoleErrorDev([
633 + 'Cannot render a <script> with onLoad or onError listeners outside the main document. ' +
634 + 'Try removing onLoad={...} and onError={...} or moving it into the root <head> tag or ' +
635 + 'somewhere in the <body>.\n' +
636 + ' in html (at **)',
637 ]);
638
591 - await expect(async () => {
592 - root.render(
639 + root.render(
640 + <>
641 + <link rel="foo" onLoad={() => {}} href="bar" />
642 <html>
594 - <script async={true} onLoad={() => {}} href="bar" />
643 <body>foo</body>
596 - </html>,
597 - );
598 - await waitForAll([]);
599 - }).toErrorDev([
600 - 'Cannot render a <script> with onLoad or onError listeners outside the main document. Try removing onLoad={...} and onError={...} or moving it into the root <head> tag or somewhere in the <body>.',
601 - ]);
602 -
603 - await expect(async () => {
604 - root.render(
605 - <>
606 - <link rel="foo" onLoad={() => {}} href="bar" />
607 - <html>
608 - <body>foo</body>
609 - </html>
610 - </>,
611 - );
612 - const aggregateError = await waitForThrow();
613 - expect(aggregateError.errors.length).toBe(2);
614 - expect(aggregateError.errors[0].message).toContain(
615 - 'Invalid insertion of LINK',
616 - );
617 - expect(aggregateError.errors[1].message).toContain(
618 - 'The node to be removed is not a child of this node',
619 - );
620 - }).toErrorDev(
644 + </html>
645 + </>,
646 + );
647 + aggregateError = await waitForThrow();
648 + expect(aggregateError.errors.length).toBe(2);
649 + expect(aggregateError.errors[0].message).toContain(
650 + 'Invalid insertion of LINK',
651 + );
652 + expect(aggregateError.errors[1].message).toContain(
653 + 'The node to be removed is not a child of this node',
654 + );
655 + assertConsoleErrorDev(
656 [
622 - 'Cannot render a <link> with onLoad or onError listeners outside the main document. Try removing onLoad={...} and onError={...} or moving it into the root <head> tag or somewhere in the <body>.',
657 + 'Cannot render a <link> with onLoad or onError listeners outside the main document. ' +
658 + 'Try removing onLoad={...} and onError={...} or moving it into the root <head> tag or ' +
659 + 'somewhere in the <body>.',
660 ],
624 - {withoutStack: 1},
661 + {withoutStack: true},
662 );
663 });
664
@@ -2222,40 +2259,53 @@ body {
2259 </html>
2260 );
2261 }
2225 - await expect(async () => {
2226 - await act(() => {
2227 - const {pipe} = renderToPipeableStream(<App />);
2228 - pipe(writable);
2229 - });
2230 - expect(getMeaningfulChildren(document)).toEqual(
2231 - <html>
2232 - <head>
2233 - <link
2234 - rel="stylesheet"
2235 - href="foo"
2236 - data-precedence="default"
2237 - crossorigin="anonymous"
2238 - media="all"
2239 - integrity="somehash"
2240 - referrerpolicy="origin"
2241 - data-foo={'"quoted"'}
2242 - nonstandardattr="attr"
2243 - properlyformattednonstandardattr="attr"
2244 - />
2245 - </head>
2246 - <body>
2247 - <div>loading...</div>
2248 - </body>
2249 - </html>,
2250 - );
2251 - }).toErrorDev([
2252 - 'React does not recognize the `nonStandardAttr` prop on a DOM element.' +
2253 - ' If you intentionally want it to appear in the DOM as a custom attribute,' +
2254 - ' spell it as lowercase `nonstandardattr` instead. If you accidentally passed it from a' +
2255 - ' parent component, remove it from the DOM element.',
2256 - 'Invalid values for props `shouldnotincludefunctions`, `norsymbols` on <link> tag. Either remove them from' +
2257 - ' the element, or pass a string or number value to keep them in the DOM. For' +
2258 - ' details, see https://react.dev/link/attribute-behavior',
2262 + await act(() => {
2263 + const {pipe} = renderToPipeableStream(<App />);
2264 + pipe(writable);
2265 + });
2266 + expect(getMeaningfulChildren(document)).toEqual(
2267 + <html>
2268 + <head>
2269 + <link
2270 + rel="stylesheet"
2271 + href="foo"
2272 + data-precedence="default"
2273 + crossorigin="anonymous"
2274 + media="all"
2275 + integrity="somehash"
2276 + referrerpolicy="origin"
2277 + data-foo={'"quoted"'}
2278 + nonstandardattr="attr"
2279 + properlyformattednonstandardattr="attr"
2280 + />
2281 + </head>
2282 + <body>
2283 + <div>loading...</div>
2284 + </body>
2285 + </html>,
2286 + );
2287 + assertConsoleErrorDev([
2288 + 'React does not recognize the `nonStandardAttr` prop on a DOM element. ' +
2289 + 'If you intentionally want it to appear in the DOM as a custom attribute, ' +
2290 + 'spell it as lowercase `nonstandardattr` instead. If you accidentally passed it from a ' +
2291 + 'parent component, remove it from the DOM element.\n' +
2292 + ' in link (at **)\n' +
2293 + (gate('enableOwnerStacks')
2294 + ? ''
2295 + : ' in div (at **)\n' +
2296 + ' in body (at **)\n' +
2297 + ' in html (at **)\n') +
2298 + ' in App (at **)',
2299 + 'Invalid values for props `shouldnotincludefunctions`, `norsymbols` on <link> tag. ' +
2300 + 'Either remove them from the element, or pass a string or number value to keep them in the DOM. ' +
2301 + 'For details, see https://react.dev/link/attribute-behavior \n' +
2302 + ' in link (at **)\n' +
2303 + (gate('enableOwnerStacks')
2304 + ? ''
2305 + : ' in div (at **)\n' +
2306 + ' in body (at **)\n' +
2307 + ' in html (at **)\n') +
2308 + ' in App (at **)',
2309 ]);
2310
2311 // Now we flush the stylesheet with the boundary
@@ -2592,30 +2642,133 @@ body {
2642 );
2643 });
2644
2595 - it('warns if you render a tag with itemProp outside <body> or <head>', async () => {
2645 + it('warns if you render <meta> tag with itemProp outside <body> or <head>', async () => {
2646 const root = ReactDOMClient.createRoot(document);
2647 root.render(
2648 <html>
2649 <meta itemProp="foo" />
2650 + </html>,
2651 + );
2652 +
2653 + await waitForAll([]);
2654 + assertConsoleErrorDev([
2655 + 'Cannot render a <meta> outside the main document if it has an `itemProp` prop. ' +
2656 + '`itemProp` suggests the tag belongs to an `itemScope` which can appear anywhere in the DOM. ' +
2657 + 'If you were intending for React to hoist this <meta> remove the `itemProp` prop. ' +
2658 + 'Otherwise, try moving this tag into the <head> or <body> of the Document.\n' +
2659 + ' in html (at **)',
2660 + 'In HTML, <meta> cannot be a child of <html>.\n' +
2661 + 'This will cause a hydration error.\n' +
2662 + '\n' +
2663 + '> <html>\n' +
2664 + '> <meta itemProp="foo">' +
2665 + '\n' +
2666 + '\n in meta (at **)' +
2667 + (gate('enableOwnerStacks') ? '' : '\n in html (at **)'),
2668 + ]);
2669 + });
2670 +
2671 + it('warns if you render a <title> tag with itemProp outside <body> or <head>', async () => {
2672 + const root = ReactDOMClient.createRoot(document);
2673 + root.render(
2674 + <html>
2675 <title itemProp="foo">title</title>
2676 + </html>,
2677 + );
2678 +
2679 + await waitForAll([]);
2680 + assertConsoleErrorDev([
2681 + 'Cannot render a <title> outside the main document if it has an `itemProp` prop. ' +
2682 + '`itemProp` suggests the tag belongs to an `itemScope` which can appear anywhere in the DOM. ' +
2683 + 'If you were intending for React to hoist this <title> remove the `itemProp` prop. ' +
2684 + 'Otherwise, try moving this tag into the <head> or <body> of the Document.\n' +
2685 + ' in html (at **)',
2686 + 'In HTML, <title> cannot be a child of <html>.\n' +
2687 + 'This will cause a hydration error.\n' +
2688 + '\n' +
2689 + '> <html>\n' +
2690 + '> <title itemProp="foo">' +
2691 + '\n' +
2692 + '\n in title (at **)' +
2693 + (gate('enableOwnerStacks') ? '' : '\n in html (at **)'),
2694 + ]);
2695 + });
2696 +
2697 + it('warns if you render a <style> tag with itemProp outside <body> or <head>', async () => {
2698 + const root = ReactDOMClient.createRoot(document);
2699 + root.render(
2700 + <html>
2701 <style itemProp="foo">style</style>
2702 + </html>,
2703 + );
2704 +
2705 + await waitForAll([]);
2706 + assertConsoleErrorDev([
2707 + 'Cannot render a <style> outside the main document if it has an `itemProp` prop. ' +
2708 + '`itemProp` suggests the tag belongs to an `itemScope` which can appear anywhere in the DOM. ' +
2709 + 'If you were intending for React to hoist this <style> remove the `itemProp` prop. ' +
2710 + 'Otherwise, try moving this tag into the <head> or <body> of the Document.\n' +
2711 + ' in html (at **)',
2712 + 'In HTML, <style> cannot be a child of <html>.\n' +
2713 + 'This will cause a hydration error.\n' +
2714 + '\n' +
2715 + '> <html>\n' +
2716 + '> <style itemProp="foo">' +
2717 + '\n' +
2718 + '\n in style (at **)' +
2719 + (gate('enableOwnerStacks') ? '' : '\n in html (at **)'),
2720 + ]);
2721 + });
2722 +
2723 + it('warns if you render a <link> tag with itemProp outside <body> or <head>', async () => {
2724 + const root = ReactDOMClient.createRoot(document);
2725 + root.render(
2726 + <html>
2727 <link itemProp="foo" />
2728 + </html>,
2729 + );
2730 +
2731 + await waitForAll([]);
2732 + assertConsoleErrorDev([
2733 + 'Cannot render a <link> outside the main document if it has an `itemProp` prop. ' +
2734 + '`itemProp` suggests the tag belongs to an `itemScope` which can appear anywhere in the DOM. ' +
2735 + 'If you were intending for React to hoist this <link> remove the `itemProp` prop. ' +
2736 + 'Otherwise, try moving this tag into the <head> or <body> of the Document.\n' +
2737 + ' in html (at **)',
2738 + 'In HTML, <link> cannot be a child of <html>.\n' +
2739 + 'This will cause a hydration error.\n' +
2740 + '\n' +
2741 + '> <html>\n' +
2742 + '> <link itemProp="foo">\n' +
2743 + '\n' +
2744 + ' in link (at **)' +
2745 + (gate('enableOwnerStacks') ? '' : '\n in html (at **)'),
2746 + ]);
2747 + });
2748 +
2749 + it('warns if you render a <script> tag with itemProp outside <body> or <head>', async () => {
2750 + const root = ReactDOMClient.createRoot(document);
2751 + root.render(
2752 + <html>
2753 <script itemProp="foo" />
2754 </html>,
2755 );
2606 - await expect(async () => {
2607 - await waitForAll([]);
2608 - }).toErrorDev([
2609 - 'Cannot render a <meta> 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 <meta> remove the `itemProp` prop. Otherwise, try moving this tag into the <head> or <body> of the Document.',
2610 - 'Cannot render a <title> 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 <title> remove the `itemProp` prop. Otherwise, try moving this tag into the <head> or <body> of the Document.',
2611 - '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.',
2612 - '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.',
2613 - '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.',
2614 - 'In HTML, <meta> cannot be a child of <html>',
2615 - 'In HTML, <title> cannot be a child of <html>',
2616 - 'In HTML, <style> cannot be a child of <html>',
2617 - 'In HTML, <link> cannot be a child of <html>',
2618 - 'In HTML, <script> cannot be a child of <html>',
2756 +
2757 + await waitForAll([]);
2758 + assertConsoleErrorDev([
2759 + 'Cannot render a <script> outside the main document if it has an `itemProp` prop. ' +
2760 + '`itemProp` suggests the tag belongs to an `itemScope` which can appear anywhere in the DOM. ' +
2761 + 'If you were intending for React to hoist this <script> remove the `itemProp` prop. ' +
2762 + 'Otherwise, try moving this tag into the <head> or <body> of the Document.\n' +
2763 + ' in html (at **)',
2764 + 'In HTML, <script> cannot be a child of <html>.\n' +
2765 + 'This will cause a hydration error.\n' +
2766 + '\n' +
2767 + '> <html>\n' +
2768 + '> <script itemProp="foo">\n' +
2769 + '\n' +
2770 + ' in script (at **)' +
2771 + (gate('enableOwnerStacks') ? '' : '\n in html (at **)'),
2772 ]);
2773 });
2774
@@ -3483,12 +3636,12 @@ body {
3636 </html>,
3637 );
3638
3486 - await expect(async () => {
3487 - loadStylesheets();
3488 - }).toErrorDev([
3639 + loadStylesheets();
3640 + assertLog(['load stylesheet: foo']);
3641 + await waitForAll([]);
3642 + assertConsoleErrorDev([
3643 "Hydration failed because the server rendered HTML didn't match the client.",
3644 ]);
3491 - assertLog(['load stylesheet: foo']);
3645
3646 expect(getMeaningfulChildren(document)).toEqual(
3647 <html>
@@ -4705,12 +4858,17 @@ body {
4858 );
4859 }
4860
4708 - await expect(async () => {
4709 - await act(() => {
4710 - renderToPipeableStream(<App />).pipe(writable);
4711 - });
4712 - }).toErrorDev([
4713 - 'React encountered a hoistable style tag for the same href as a preload: "foo". When using a style tag to inline styles you should not also preload it as a stylsheet.',
4861 + await act(() => {
4862 + renderToPipeableStream(<App />).pipe(writable);
4863 + });
4864 + assertConsoleErrorDev([
4865 + 'React encountered a hoistable style tag for the same href as a preload: "foo". ' +
4866 + 'When using a style tag to inline styles you should not also preload it as a stylsheet.\n' +
4867 + ' in style (at **)\n' +
4868 + (gate('enableOwnerStacks')
4869 + ? ''
4870 + : ' in body (at **)\n' + ' in html (at **)\n') +
4871 + ' in App (at **)',
4872 ]);
4873
4874 expect(getMeaningfulChildren(document)).toEqual(
@@ -5404,13 +5562,23 @@ body {
5562 );
5563 }
5564
5407 - await expect(async () => {
5408 - await act(() => {
5409 - renderToPipeableStream(<App url="foo" />).pipe(writable);
5410 - });
5411 - }).toErrorDev([
5412 - 'ReactDOM.prefetchDNS(): Expected only one argument, `href`, but encountered something with type "object" as a second argument instead. This argument is reserved for future options and is currently disallowed. Try calling ReactDOM.prefetchDNS() with just a single string argument, `href`.',
5413 - 'ReactDOM.prefetchDNS(): Expected only one argument, `href`, but encountered something with type "object" as a second argument instead. This argument is reserved for future options and is currently disallowed. It looks like the you are attempting to set a crossOrigin property for this DNS lookup hint. Browsers do not perform DNS queries using CORS and setting this attribute on the resource hint has no effect. Try calling ReactDOM.prefetchDNS() with just a single string argument, `href`.',
5565 + await act(() => {
5566 + renderToPipeableStream(<App url="foo" />).pipe(writable);
5567 + });
5568 + assertConsoleErrorDev([
5569 + 'ReactDOM.prefetchDNS(): Expected only one argument, `href`, ' +
5570 + 'but encountered something with type "object" as a second argument instead. ' +
5571 + 'This argument is reserved for future options and is currently disallowed. ' +
5572 + 'Try calling ReactDOM.prefetchDNS() with just a single string argument, `href`.\n' +
5573 + ' in App (at **)',
5574 + 'ReactDOM.prefetchDNS(): Expected only one argument, `href`, ' +
5575 + 'but encountered something with type "object" as a second argument instead. ' +
5576 + 'This argument is reserved for future options and is currently disallowed. ' +
5577 + 'It looks like the you are attempting to set a crossOrigin property for this DNS lookup hint. ' +
5578 + 'Browsers do not perform DNS queries using CORS and setting this attribute ' +
5579 + 'on the resource hint has no effect. Try calling ReactDOM.prefetchDNS() with just ' +
5580 + 'a single string argument, `href`.\n' +
5581 + ' in App (at **)',
5582 ]);
5583
5584 expect(getMeaningfulChildren(document)).toEqual(
@@ -5423,11 +5591,21 @@ body {
5591 );
5592
5593 const root = ReactDOMClient.hydrateRoot(document, <App url="foo" />);
5426 - await expect(async () => {
5427 - await waitForAll([]);
5428 - }).toErrorDev([
5429 - 'ReactDOM.prefetchDNS(): Expected only one argument, `href`, but encountered something with type "object" as a second argument instead. This argument is reserved for future options and is currently disallowed. Try calling ReactDOM.prefetchDNS() with just a single string argument, `href`.',
5430 - 'ReactDOM.prefetchDNS(): Expected only one argument, `href`, but encountered something with type "object" as a second argument instead. This argument is reserved for future options and is currently disallowed. It looks like the you are attempting to set a crossOrigin property for this DNS lookup hint. Browsers do not perform DNS queries using CORS and setting this attribute on the resource hint has no effect. Try calling ReactDOM.prefetchDNS() with just a single string argument, `href`.',
5594 + await waitForAll([]);
5595 + assertConsoleErrorDev([
5596 + 'ReactDOM.prefetchDNS(): Expected only one argument, `href`, ' +
5597 + 'but encountered something with type "object" as a second argument instead. ' +
5598 + 'This argument is reserved for future options and is currently disallowed. ' +
5599 + 'Try calling ReactDOM.prefetchDNS() with just a single string argument, `href`.\n' +
5600 + ' in App (at **)',
5601 + 'ReactDOM.prefetchDNS(): Expected only one argument, `href`, ' +
5602 + 'but encountered something with type "object" as a second argument instead. ' +
5603 + 'This argument is reserved for future options and is currently disallowed. ' +
5604 + 'It looks like the you are attempting to set a crossOrigin property for this DNS lookup hint. ' +
5605 + 'Browsers do not perform DNS queries using CORS and setting this attribute ' +
5606 + 'on the resource hint has no effect. Try calling ReactDOM.prefetchDNS() with just ' +
5607 + 'a single string argument, `href`.\n' +
5608 + ' in App (at **)',
5609 ]);
5610 expect(getMeaningfulChildren(document)).toEqual(
5611 <html>
@@ -5439,11 +5617,21 @@ body {
5617 );
5618
5619 root.render(<App url="bar" />);
5442 - await expect(async () => {
5443 - await waitForAll([]);
5444 - }).toErrorDev([
5445 - 'ReactDOM.prefetchDNS(): Expected only one argument, `href`, but encountered something with type "object" as a second argument instead. This argument is reserved for future options and is currently disallowed. Try calling ReactDOM.prefetchDNS() with just a single string argument, `href`.',
5446 - 'ReactDOM.prefetchDNS(): Expected only one argument, `href`, but encountered something with type "object" as a second argument instead. This argument is reserved for future options and is currently disallowed. It looks like the you are attempting to set a crossOrigin property for this DNS lookup hint. Browsers do not perform DNS queries using CORS and setting this attribute on the resource hint has no effect. Try calling ReactDOM.prefetchDNS() with just a single string argument, `href`.',
5620 + await waitForAll([]);
5621 + assertConsoleErrorDev([
5622 + 'ReactDOM.prefetchDNS(): Expected only one argument, `href`, ' +
5623 + 'but encountered something with type "object" as a second argument instead. ' +
5624 + 'This argument is reserved for future options and is currently disallowed. ' +
5625 + 'Try calling ReactDOM.prefetchDNS() with just a single string argument, `href`.\n' +
5626 + ' in App (at **)',
5627 + 'ReactDOM.prefetchDNS(): Expected only one argument, `href`, ' +
5628 + 'but encountered something with type "object" as a second argument instead. ' +
5629 + 'This argument is reserved for future options and is currently disallowed. ' +
5630 + 'It looks like the you are attempting to set a crossOrigin property for this DNS lookup hint. ' +
5631 + 'Browsers do not perform DNS queries using CORS and setting this attribute ' +
5632 + 'on the resource hint has no effect. Try calling ReactDOM.prefetchDNS() with just ' +
5633 + 'a single string argument, `href`.\n' +
5634 + ' in App (at **)',
5635 ]);
5636 expect(getMeaningfulChildren(document)).toEqual(
5637 <html>
@@ -5587,13 +5775,15 @@ body {
5775 );
5776 }
5777
5590 - await expect(async () => {
5591 - await act(() => {
5592 - renderToPipeableStream(<App url="foo" />).pipe(writable);
5593 - });
5594 - }).toErrorDev(
5595 - 'ReactDOM.preconnect(): Expected the `crossOrigin` option (second argument) to be a string but encountered something with type "boolean" instead. Try removing this option or passing a string value instead.',
5596 - );
5778 + await act(() => {
5779 + renderToPipeableStream(<App url="foo" />).pipe(writable);
5780 + });
5781 + assertConsoleErrorDev([
5782 + 'ReactDOM.preconnect(): Expected the `crossOrigin` option (second argument) ' +
5783 + 'to be a string but encountered something with type "boolean" instead. ' +
5784 + 'Try removing this option or passing a string value instead.\n' +
5785 + ' in App (at **)',
5786 + ]);
5787
5788 expect(getMeaningfulChildren(document)).toEqual(
5789 <html>
@@ -5607,11 +5797,13 @@ body {
5797 );
5798
5799 const root = ReactDOMClient.hydrateRoot(document, <App url="foo" />);
5610 - await expect(async () => {
5611 - await waitForAll([]);
5612 - }).toErrorDev(
5613 - 'ReactDOM.preconnect(): Expected the `crossOrigin` option (second argument) to be a string but encountered something with type "boolean" instead. Try removing this option or passing a string value instead.',
5614 - );
5800 + await waitForAll([]);
5801 + assertConsoleErrorDev([
5802 + 'ReactDOM.preconnect(): Expected the `crossOrigin` option (second argument) ' +
5803 + 'to be a string but encountered something with type "boolean" instead. ' +
5804 + 'Try removing this option or passing a string value instead.\n' +
5805 + ' in App (at **)',
5806 + ]);
5807 expect(getMeaningfulChildren(document)).toEqual(
5808 <html>
5809 <head>
@@ -5624,11 +5816,13 @@ body {
5816 );
5817
5818 root.render(<App url="bar" />);
5627 - await expect(async () => {
5628 - await waitForAll([]);
5629 - }).toErrorDev(
5630 - 'ReactDOM.preconnect(): Expected the `crossOrigin` option (second argument) to be a string but encountered something with type "boolean" instead. Try removing this option or passing a string value instead.',
5631 - );
5819 + await waitForAll([]);
5820 + assertConsoleErrorDev([
5821 + 'ReactDOM.preconnect(): Expected the `crossOrigin` option (second argument) ' +
5822 + 'to be a string but encountered something with type "boolean" instead. ' +
5823 + 'Try removing this option or passing a string value instead.\n' +
5824 + ' in App (at **)',
5825 + ]);
5826 expect(getMeaningfulChildren(document)).toEqual(
5827 <html>
5828 <head>
@@ -5785,15 +5979,28 @@ body {
5979 return <div>foo</div>;
5980 }
5981
5788 - await expect(async () => {
5789 - await act(() => {
5790 - renderToPipeableStream(<App />).pipe(writable);
5791 - });
5792 - }).toErrorDev([
5793 - 'ReactDOM.preload(): Expected two arguments, a non-empty `href` string and an `options` object with an `as` property valid for a `<link rel="preload" as="..." />` tag. The `href` argument encountered was `undefined`. The `options` argument encountered was `undefined`.',
5794 - 'ReactDOM.preload(): Expected two arguments, a non-empty `href` string and an `options` object with an `as` property valid for a `<link rel="preload" as="..." />` tag. The `href` argument encountered was an empty string. The `options` argument encountered was `undefined`.',
5795 - 'ReactDOM.preload(): Expected two arguments, a non-empty `href` string and an `options` object with an `as` property valid for a `<link rel="preload" as="..." />` tag. The `options` argument encountered was `null`.',
5796 - 'ReactDOM.preload(): Expected two arguments, a non-empty `href` string and an `options` object with an `as` property valid for a `<link rel="preload" as="..." />` tag. The `as` option encountered was `undefined`.',
5982 + await act(() => {
5983 + renderToPipeableStream(<App />).pipe(writable);
5984 + });
5985 + assertConsoleErrorDev([
5986 + 'ReactDOM.preload(): Expected two arguments, a non-empty `href` string and an ' +
5987 + '`options` object with an `as` property valid for a `<link rel="preload" as="..." />` tag. ' +
5988 + 'The `href` argument encountered was `undefined`. ' +
5989 + 'The `options` argument encountered was `undefined`.\n' +
5990 + ' in App (at **)',
5991 + 'ReactDOM.preload(): Expected two arguments, a non-empty `href` string and an ' +
5992 + '`options` object with an `as` property valid for a `<link rel="preload" as="..." />` tag. ' +
5993 + 'The `href` argument encountered was an empty string. ' +
5994 + 'The `options` argument encountered was `undefined`.\n' +
5995 + ' in App (at **)',
5996 + 'ReactDOM.preload(): Expected two arguments, a non-empty `href` string and an ' +
5997 + '`options` object with an `as` property valid for a `<link rel="preload" as="..." />` tag. ' +
5998 + 'The `options` argument encountered was `null`.\n' +
5999 + ' in App (at **)',
6000 + 'ReactDOM.preload(): Expected two arguments, a non-empty `href` string and an ' +
6001 + '`options` object with an `as` property valid for a `<link rel="preload" as="..." />` tag. ' +
6002 + 'The `as` option encountered was `undefined`.\n' +
6003 + ' in App (at **)',
6004 ]);
6005 });
6006
@@ -6041,16 +6248,30 @@ body {
6248 ReactDOM.preloadModule('2', {as: true});
6249 return <div>hello</div>;
6250 }
6044 - await expect(async () => {
6045 - await act(() => {
6046 - renderToPipeableStream(<App />).pipe(writable);
6047 - });
6048 - }).toErrorDev([
6049 - 'ReactDOM.preloadModule(): Expected two arguments, a non-empty `href` string and, optionally, an `options` object with an `as` property valid for a `<link rel="modulepreload" as="..." />` tag. The `href` argument encountered was `undefined`',
6050 - 'ReactDOM.preloadModule(): Expected two arguments, a non-empty `href` string and, optionally, an `options` object with an `as` property valid for a `<link rel="modulepreload" as="..." />` tag. The `href` argument encountered was something with type "function"',
6051 - 'ReactDOM.preloadModule(): Expected two arguments, a non-empty `href` string and, optionally, an `options` object with an `as` property valid for a `<link rel="modulepreload" as="..." />` tag. The `href` argument encountered was an empty string',
6052 - 'ReactDOM.preloadModule(): Expected two arguments, a non-empty `href` string and, optionally, an `options` object with an `as` property valid for a `<link rel="modulepreload" as="..." />` tag. The `options` argument encountered was something with type "boolean"',
6053 - 'ReactDOM.preloadModule(): Expected two arguments, a non-empty `href` string and, optionally, an `options` object with an `as` property valid for a `<link rel="modulepreload" as="..." />` tag. The `as` option encountered was something with type "boolean"',
6251 + await act(() => {
6252 + renderToPipeableStream(<App />).pipe(writable);
6253 + });
6254 + assertConsoleErrorDev([
6255 + 'ReactDOM.preloadModule(): Expected two arguments, a non-empty `href` string and, optionally, ' +
6256 + 'an `options` object with an `as` property valid for a `<link rel="modulepreload" as="..." />` tag. ' +
6257 + 'The `href` argument encountered was `undefined`.\n' +
6258 + ' in App (at **)',
6259 + 'ReactDOM.preloadModule(): Expected two arguments, a non-empty `href` string and, optionally, ' +
6260 + 'an `options` object with an `as` property valid for a `<link rel="modulepreload" as="..." />` tag. ' +
6261 + 'The `href` argument encountered was something with type "function".\n' +
6262 + ' in App (at **)',
6263 + 'ReactDOM.preloadModule(): Expected two arguments, a non-empty `href` string and, optionally, ' +
6264 + 'an `options` object with an `as` property valid for a `<link rel="modulepreload" as="..." />` tag. ' +
6265 + 'The `href` argument encountered was an empty string.\n' +
6266 + ' in App (at **)',
6267 + 'ReactDOM.preloadModule(): Expected two arguments, a non-empty `href` string and, optionally, ' +
6268 + 'an `options` object with an `as` property valid for a `<link rel="modulepreload" as="..." />` tag. ' +
6269 + 'The `options` argument encountered was something with type "boolean".\n' +
6270 + ' in App (at **)',
6271 + 'ReactDOM.preloadModule(): Expected two arguments, a non-empty `href` string and, optionally,' +
6272 + ' an `options` object with an `as` property valid for a `<link rel="modulepreload" as="..." />` tag. ' +
6273 + 'The `as` option encountered was something with type "boolean".\n' +
6274 + ' in App (at **)',
6275 ]);
6276 expect(getMeaningfulChildren(document.body)).toEqual(
6277 <div id="container">
@@ -6064,14 +6285,28 @@ body {
6285 document.getElementById('container'),
6286 );
6287 root.render(<App />);
6067 - await expect(async () => {
6068 - await waitForAll([]);
6069 - }).toErrorDev([
6070 - 'ReactDOM.preloadModule(): Expected two arguments, a non-empty `href` string and, optionally, an `options` object with an `as` property valid for a `<link rel="modulepreload" as="..." />` tag. The `href` argument encountered was `undefined`',
6071 - 'ReactDOM.preloadModule(): Expected two arguments, a non-empty `href` string and, optionally, an `options` object with an `as` property valid for a `<link rel="modulepreload" as="..." />` tag. The `href` argument encountered was something with type "function"',
6072 - 'ReactDOM.preloadModule(): Expected two arguments, a non-empty `href` string and, optionally, an `options` object with an `as` property valid for a `<link rel="modulepreload" as="..." />` tag. The `href` argument encountered was an empty string',
6073 - 'ReactDOM.preloadModule(): Expected two arguments, a non-empty `href` string and, optionally, an `options` object with an `as` property valid for a `<link rel="modulepreload" as="..." />` tag. The `options` argument encountered was something with type "boolean"',
6074 - 'ReactDOM.preloadModule(): Expected two arguments, a non-empty `href` string and, optionally, an `options` object with an `as` property valid for a `<link rel="modulepreload" as="..." />` tag. The `as` option encountered was something with type "boolean"',
6288 + await waitForAll([]);
6289 + assertConsoleErrorDev([
6290 + 'ReactDOM.preloadModule(): Expected two arguments, a non-empty `href` string and, optionally, ' +
6291 + 'an `options` object with an `as` property valid for a `<link rel="modulepreload" as="..." />` tag. ' +
6292 + 'The `href` argument encountered was `undefined`.\n' +
6293 + ' in App (at **)',
6294 + 'ReactDOM.preloadModule(): Expected two arguments, a non-empty `href` string and, optionally, ' +
6295 + 'an `options` object with an `as` property valid for a `<link rel="modulepreload" as="..." />` tag. ' +
6296 + 'The `href` argument encountered was something with type "function".\n' +
6297 + ' in App (at **)',
6298 + 'ReactDOM.preloadModule(): Expected two arguments, a non-empty `href` string and, optionally, an ' +
6299 + '`options` object with an `as` property valid for a `<link rel="modulepreload" as="..." />` tag. ' +
6300 + 'The `href` argument encountered was an empty string.\n' +
6301 + ' in App (at **)',
6302 + 'ReactDOM.preloadModule(): Expected two arguments, a non-empty `href` string and, optionally, an ' +
6303 + '`options` object with an `as` property valid for a `<link rel="modulepreload" as="..." />` tag. ' +
6304 + 'The `options` argument encountered was something with type "boolean".\n' +
6305 + ' in App (at **)',
6306 + 'ReactDOM.preloadModule(): Expected two arguments, a non-empty `href` string and, optionally, an ' +
6307 + '`options` object with an `as` property valid for a `<link rel="modulepreload" as="..." />` tag. ' +
6308 + 'The `as` option encountered was something with type "boolean".\n' +
6309 + ' in App (at **)',
6310 ]);
6311 });
6312 });
@@ -6340,16 +6575,27 @@ body {
6575 return <div>foo</div>;
6576 }
6577
6343 - await expect(async () => {
6344 - await act(() => {
6345 - renderToPipeableStream(<App />).pipe(writable);
6346 - });
6347 - }).toErrorDev([
6348 - 'ReactDOM.preinit(): Expected the `href` argument (first) to be a non-empty string but encountered `undefined` instead',
6349 - 'ReactDOM.preinit(): Expected the `href` argument (first) to be a non-empty string but encountered an empty string instead',
6350 - 'ReactDOM.preinit(): Expected the `options` argument (second) to be an object with an `as` property describing the type of resource to be preinitialized but encountered `null` instead',
6351 - 'ReactDOM.preinit(): Expected the `as` property in the `options` argument (second) to contain a valid value describing the type of resource to be preinitialized but encountered `undefined` instead. Valid values for `as` are "style" and "script".',
6352 - 'ReactDOM.preinit(): Expected the `as` property in the `options` argument (second) to contain a valid value describing the type of resource to be preinitialized but encountered "foo" instead. Valid values for `as` are "style" and "script".',
6578 + await act(() => {
6579 + renderToPipeableStream(<App />).pipe(writable);
6580 + });
6581 + assertConsoleErrorDev([
6582 + 'ReactDOM.preinit(): Expected the `href` argument (first) to be a non-empty string ' +
6583 + 'but encountered `undefined` instead.\n' +
6584 + ' in App (at **)',
6585 + 'ReactDOM.preinit(): Expected the `href` argument (first) to be a non-empty string ' +
6586 + 'but encountered an empty string instead.\n' +
6587 + ' in App (at **)',
6588 + 'ReactDOM.preinit(): Expected the `options` argument (second) to be an object with an `as` ' +
6589 + 'property describing the type of resource to be preinitialized but encountered `null` instead.\n' +
6590 + ' in App (at **)',
6591 + 'ReactDOM.preinit(): Expected the `as` property in the `options` argument (second) to contain ' +
6592 + 'a valid value describing the type of resource to be preinitialized but encountered `undefined` instead. ' +
6593 + 'Valid values for `as` are "style" and "script".\n' +
6594 + ' in App (at **)',
6595 + 'ReactDOM.preinit(): Expected the `as` property in the `options` argument (second) to contain ' +
6596 + 'a valid value describing the type of resource to be preinitialized but encountered "foo" instead. ' +
6597 + 'Valid values for `as` are "style" and "script".\n' +
6598 + ' in App (at **)',
6599 ]);
6600 });
6601
@@ -6621,12 +6867,14 @@ body {
6867 ReactDOM.preinitModule(prefix + 'warning', {as: 'style'});
6868 return <div>hello</div>;
6869 }
6624 - await expect(async () => {
6625 - await act(() => {
6626 - renderToPipeableStream(<App ssr={true} />).pipe(writable);
6627 - });
6628 - }).toErrorDev([
6629 - 'ReactDOM.preinitModule(): Expected up to two arguments, a non-empty `href` string and, optionally, an `options` object with a valid `as` property. The `as` option encountered was "style"',
6870 + await act(() => {
6871 + renderToPipeableStream(<App ssr={true} />).pipe(writable);
6872 + });
6873 + assertConsoleErrorDev([
6874 + 'ReactDOM.preinitModule(): Expected up to two arguments, a non-empty `href` ' +
6875 + 'string and, optionally, an `options` object with a valid `as` property. ' +
6876 + 'The `as` option encountered was "style".\n' +
6877 + ' in App (at **)',
6878 ]);
6879 expect(getMeaningfulChildren(document.body)).toEqual(
6880 <div id="container">
@@ -6649,10 +6897,12 @@ body {
6897 );
6898
6899 ReactDOMClient.hydrateRoot(container, <App />);
6652 - await expect(async () => {
6653 - await waitForAll([]);
6654 - }).toErrorDev([
6655 - 'ReactDOM.preinitModule(): Expected up to two arguments, a non-empty `href` string and, optionally, an `options` object with a valid `as` property. The `as` option encountered was "style"',
6900 + await waitForAll([]);
6901 + assertConsoleErrorDev([
6902 + 'ReactDOM.preinitModule(): Expected up to two arguments, a non-empty `href` ' +
6903 + 'string and, optionally, an `options` object with a valid `as` property. ' +
6904 + 'The `as` option encountered was "style".\n' +
6905 + ' in App (at **)',
6906 ]);
6907 expect(getMeaningfulChildren(document)).toEqual(
6908 <html>
@@ -6704,16 +6954,30 @@ body {
6954 ReactDOM.preinitModule('2', {as: true});
6955 return <div>hello</div>;
6956 }
6707 - await expect(async () => {
6708 - await act(() => {
6709 - renderToPipeableStream(<App />).pipe(writable);
6710 - });
6711 - }).toErrorDev([
6712 - 'ReactDOM.preinitModule(): Expected up to two arguments, a non-empty `href` string and, optionally, an `options` object with a valid `as` property. The `href` argument encountered was `undefined`',
6713 - 'ReactDOM.preinitModule(): Expected up to two arguments, a non-empty `href` string and, optionally, an `options` object with a valid `as` property. The `href` argument encountered was something with type "function"',
6714 - 'ReactDOM.preinitModule(): Expected up to two arguments, a non-empty `href` string and, optionally, an `options` object with a valid `as` property. The `href` argument encountered was an empty string',
6715 - 'ReactDOM.preinitModule(): Expected up to two arguments, a non-empty `href` string and, optionally, an `options` object with a valid `as` property. The `options` argument encountered was something with type "boolean"',
6716 - 'ReactDOM.preinitModule(): Expected up to two arguments, a non-empty `href` string and, optionally, an `options` object with a valid `as` property. The `as` option encountered was something with type "boolean"',
6957 + await act(() => {
6958 + renderToPipeableStream(<App />).pipe(writable);
6959 + });
6960 + assertConsoleErrorDev([
6961 + 'ReactDOM.preinitModule(): Expected up to two arguments, a non-empty `href` ' +
6962 + 'string and, optionally, an `options` object with a valid `as` property. ' +
6963 + 'The `href` argument encountered was `undefined`.\n' +
6964 + ' in App (at **)',
6965 + 'ReactDOM.preinitModule(): Expected up to two arguments, a non-empty `href` ' +
6966 + 'string and, optionally, an `options` object with a valid `as` property. ' +
6967 + 'The `href` argument encountered was something with type "function".\n' +
6968 + ' in App (at **)',
6969 + 'ReactDOM.preinitModule(): Expected up to two arguments, a non-empty `href` ' +
6970 + 'string and, optionally, an `options` object with a valid `as` property. ' +
6971 + 'The `href` argument encountered was an empty string.\n' +
6972 + ' in App (at **)',
6973 + 'ReactDOM.preinitModule(): Expected up to two arguments, a non-empty `href` ' +
6974 + 'string and, optionally, an `options` object with a valid `as` property. ' +
6975 + 'The `options` argument encountered was something with type "boolean".\n' +
6976 + ' in App (at **)',
6977 + 'ReactDOM.preinitModule(): Expected up to two arguments, a non-empty `href` ' +
6978 + 'string and, optionally, an `options` object with a valid `as` property. ' +
6979 + 'The `as` option encountered was something with type "boolean".\n' +
6980 + ' in App (at **)',
6981 ]);
6982 expect(getMeaningfulChildren(document.body)).toEqual(
6983 <div id="container">
@@ -6725,14 +6989,28 @@ body {
6989 document.getElementById('container'),
6990 );
6991 root.render(<App />);
6728 - await expect(async () => {
6729 - await waitForAll([]);
6730 - }).toErrorDev([
6731 - 'ReactDOM.preinitModule(): Expected up to two arguments, a non-empty `href` string and, optionally, an `options` object with a valid `as` property. The `href` argument encountered was `undefined`',
6732 - 'ReactDOM.preinitModule(): Expected up to two arguments, a non-empty `href` string and, optionally, an `options` object with a valid `as` property. The `href` argument encountered was something with type "function"',
6733 - 'ReactDOM.preinitModule(): Expected up to two arguments, a non-empty `href` string and, optionally, an `options` object with a valid `as` property. The `href` argument encountered was an empty string',
6734 - 'ReactDOM.preinitModule(): Expected up to two arguments, a non-empty `href` string and, optionally, an `options` object with a valid `as` property. The `options` argument encountered was something with type "boolean"',
6735 - 'ReactDOM.preinitModule(): Expected up to two arguments, a non-empty `href` string and, optionally, an `options` object with a valid `as` property. The `as` option encountered was something with type "boolean"',
6992 + await waitForAll([]);
6993 + assertConsoleErrorDev([
6994 + 'ReactDOM.preinitModule(): Expected up to two arguments, a non-empty `href` ' +
6995 + 'string and, optionally, an `options` object with a valid `as` property. ' +
6996 + 'The `href` argument encountered was `undefined`.\n' +
6997 + ' in App (at **)',
6998 + 'ReactDOM.preinitModule(): Expected up to two arguments, a non-empty `href` ' +
6999 + 'string and, optionally, an `options` object with a valid `as` property. ' +
7000 + 'The `href` argument encountered was something with type "function".\n' +
7001 + ' in App (at **)',
7002 + 'ReactDOM.preinitModule(): Expected up to two arguments, a non-empty `href` ' +
7003 + 'string and, optionally, an `options` object with a valid `as` property. ' +
7004 + 'The `href` argument encountered was an empty string.\n' +
7005 + ' in App (at **)',
7006 + 'ReactDOM.preinitModule(): Expected up to two arguments, a non-empty `href` ' +
7007 + 'string and, optionally, an `options` object with a valid `as` property. ' +
7008 + 'The `options` argument encountered was something with type "boolean".\n' +
7009 + ' in App (at **)',
7010 + 'ReactDOM.preinitModule(): Expected up to two arguments, a non-empty `href` ' +
7011 + 'string and, optionally, an `options` object with a valid `as` property. ' +
7012 + 'The `as` option encountered was something with type "boolean".\n' +
7013 + ' in App (at **)',
7014 ]);
7015 });
7016 });
@@ -7454,51 +7732,106 @@ body {
7732 });
7733
7734 it('warns if you provide a `precedence` prop with other props that invalidate the creation of a stylesheet resource', async () => {
7457 - await expect(async () => {
7458 - await act(() => {
7459 - renderToPipeableStream(
7460 - <html>
7461 - <body>
7462 - <link rel="stylesheet" precedence="default" />
7463 - <link rel="stylesheet" href="" precedence="default" />
7464 - <link
7465 - rel="stylesheet"
7466 - href="foo"
7467 - precedence="default"
7468 - onLoad={() => {}}
7469 - onError={() => {}}
7470 - />
7471 - <link
7472 - rel="stylesheet"
7473 - href="foo"
7474 - precedence="default"
7475 - onLoad={() => {}}
7476 - />
7477 - <link
7478 - rel="stylesheet"
7479 - href="foo"
7480 - precedence="default"
7481 - onError={() => {}}
7482 - />
7483 - <link
7484 - rel="stylesheet"
7485 - href="foo"
7486 - precedence="default"
7487 - disabled={false}
7488 - />
7489 - </body>
7490 - </html>,
7491 - ).pipe(writable);
7492 - });
7493 - }).toErrorDev(
7735 + await act(() => {
7736 + renderToPipeableStream(
7737 + <html>
7738 + <body>
7739 + <link rel="stylesheet" precedence="default" />
7740 + <link rel="stylesheet" href="" precedence="default" />
7741 + <link
7742 + rel="stylesheet"
7743 + href="foo"
7744 + precedence="default"
7745 + onLoad={() => {}}
7746 + onError={() => {}}
7747 + />
7748 + <link
7749 + rel="stylesheet"
7750 + href="foo"
7751 + precedence="default"
7752 + onLoad={() => {}}
7753 + />
7754 + <link
7755 + rel="stylesheet"
7756 + href="foo"
7757 + precedence="default"
7758 + onError={() => {}}
7759 + />
7760 + <link
7761 + rel="stylesheet"
7762 + href="foo"
7763 + precedence="default"
7764 + disabled={false}
7765 + />
7766 + </body>
7767 + </html>,
7768 + ).pipe(writable);
7769 + });
7770 + assertConsoleErrorDev(
7771 [
7495 - 'An empty string ("") was passed to the href attribute. To fix this, either do not render the element at all or pass null to href instead of an empty string.',
7496 - 'React encountered a `<link rel="stylesheet" .../>` with a `precedence` prop and expected the `href` prop to be a non-empty string but ecountered `undefined` instead. If your intent was to have React hoist and deduplciate this stylesheet using the `precedence` prop ensure there is a non-empty string `href` prop as well, otherwise remove the `precedence` prop.',
7497 - 'React encountered a `<link rel="stylesheet" .../>` with a `precedence` prop and expected the `href` prop to be a non-empty string but ecountered an empty string instead. If your intent was to have React hoist and deduplciate this stylesheet using the `precedence` prop ensure there is a non-empty string `href` prop as well, otherwise remove the `precedence` prop.',
7498 - 'React encountered a `<link rel="stylesheet" .../>` with a `precedence` prop and `onLoad` and `onError` props. The presence of loading and error handlers indicates an intent to manage the stylesheet loading state from your from your Component code and React will not hoist or deduplicate this stylesheet. If your intent was to have React hoist and deduplciate this stylesheet using the `precedence` prop remove the `onLoad` and `onError` props, otherwise remove the `precedence` prop.',
7499 - 'React encountered a `<link rel="stylesheet" .../>` with a `precedence` prop and `onLoad` prop. The presence of loading and error handlers indicates an intent to manage the stylesheet loading state from your from your Component code and React will not hoist or deduplicate this stylesheet. If your intent was to have React hoist and deduplciate this stylesheet using the `precedence` prop remove the `onLoad` prop, otherwise remove the `precedence` prop.',
7500 - 'React encountered a `<link rel="stylesheet" .../>` with a `precedence` prop and `onError` prop. The presence of loading and error handlers indicates an intent to manage the stylesheet loading state from your from your Component code and React will not hoist or deduplicate this stylesheet. If your intent was to have React hoist and deduplciate this stylesheet using the `precedence` prop remove the `onError` prop, otherwise remove the `precedence` prop.',
7501 - 'React encountered a `<link rel="stylesheet" .../>` with a `precedence` prop and a `disabled` prop. The presence of the `disabled` prop indicates an intent to manage the stylesheet active state from your from your Component code and React will not hoist or deduplicate this stylesheet. If your intent was to have React hoist and deduplciate this stylesheet using the `precedence` prop remove the `disabled` prop, otherwise remove the `precedence` prop.',
7772 + 'React encountered a `<link rel="stylesheet" .../>` with a `precedence` prop and ' +
7773 + 'expected the `href` prop to be a non-empty string but ecountered `undefined` instead. ' +
7774 + 'If your intent was to have React hoist and deduplciate this stylesheet using the ' +
7775 + '`precedence` prop ensure there is a non-empty string `href` prop as well, ' +
7776 + 'otherwise remove the `precedence` prop.\n' +
7777 + ' in link (at **)' +
7778 + (gate('enableOwnerStacks')
7779 + ? ''
7780 + : '\n in body (at **)' + '\n in html (at **)'),
7781 + 'React encountered a `<link rel="stylesheet" .../>` with a `precedence` prop and ' +
7782 + 'expected the `href` prop to be a non-empty string but ecountered an empty string instead. ' +
7783 + 'If your intent was to have React hoist and deduplciate this stylesheet using the ' +
7784 + '`precedence` prop ensure there is a non-empty string `href` prop as well, ' +
7785 + 'otherwise remove the `precedence` prop.\n' +
7786 + ' in link (at **)' +
7787 + (gate('enableOwnerStacks')
7788 + ? ''
7789 + : '\n in body (at **)' + '\n in html (at **)'),
7790 + 'An empty string ("") was passed to the href attribute. ' +
7791 + 'To fix this, either do not render the element at all or ' +
7792 + 'pass null to href instead of an empty string.\n' +
7793 + ' in link (at **)' +
7794 + (gate('enableOwnerStacks')
7795 + ? ''
7796 + : '\n in body (at **)' + '\n in html (at **)'),
7797 + 'React encountered a `<link rel="stylesheet" .../>` with a `precedence` prop and ' +
7798 + '`onLoad` and `onError` props. The presence of loading and error handlers indicates ' +
7799 + 'an intent to manage the stylesheet loading state from your from your Component code ' +
7800 + 'and React will not hoist or deduplicate this stylesheet. ' +
7801 + 'If your intent was to have React hoist and deduplciate this stylesheet using the ' +
7802 + '`precedence` prop remove the `onLoad` and `onError` props, otherwise remove the `precedence` prop.\n' +
7803 + ' in link (at **)' +
7804 + (gate('enableOwnerStacks')
7805 + ? ''
7806 + : '\n in body (at **)' + '\n in html (at **)'),
7807 + 'React encountered a `<link rel="stylesheet" .../>` with a `precedence` prop and ' +
7808 + '`onLoad` prop. The presence of loading and error handlers indicates an intent to ' +
7809 + 'manage the stylesheet loading state from your from your Component code and ' +
7810 + 'React will not hoist or deduplicate this stylesheet. ' +
7811 + 'If your intent was to have React hoist and deduplciate this stylesheet using the ' +
7812 + '`precedence` prop remove the `onLoad` prop, otherwise remove the `precedence` prop.\n' +
7813 + ' in link (at **)' +
7814 + (gate('enableOwnerStacks')
7815 + ? ''
7816 + : '\n in body (at **)' + '\n in html (at **)'),
7817 + 'React encountered a `<link rel="stylesheet" .../>` with a `precedence` prop and `onError` prop. ' +
7818 + 'The presence of loading and error handlers indicates an intent to manage the stylesheet loading state ' +
7819 + 'from your from your Component code and React will not hoist or deduplicate this stylesheet. ' +
7820 + 'If your intent was to have React hoist and deduplciate this stylesheet using the `precedence` ' +
7821 + 'prop remove the `onError` prop, otherwise remove the `precedence` prop.\n' +
7822 + ' in link (at **)' +
7823 + (gate('enableOwnerStacks')
7824 + ? ''
7825 + : '\n in body (at **)' + '\n in html (at **)'),
7826 + 'React encountered a `<link rel="stylesheet" .../>` with a `precedence` prop and a `disabled` prop. ' +
7827 + 'The presence of the `disabled` prop indicates an intent to manage the stylesheet active state from ' +
7828 + 'your from your Component code and React will not hoist or deduplicate this stylesheet. ' +
7829 + 'If your intent was to have React hoist and deduplciate this stylesheet using the `precedence` ' +
7830 + 'prop remove the `disabled` prop, otherwise remove the `precedence` prop.\n' +
7831 + ' in link (at **)' +
7832 + (gate('enableOwnerStacks')
7833 + ? ''
7834 + : '\n in body (at **)' + '\n in html (at **)'),
7835 ].filter(Boolean),
7836 );
7837
@@ -7516,10 +7849,16 @@ body {
7849 </body>
7850 </html>,
7851 );
7519 - await expect(async () => {
7520 - await waitForAll([]);
7521 - }).toErrorDev([
7522 - 'React encountered a <link rel="stylesheet" href="foo" ... /> with a `precedence` prop that also included the `onLoad` and `onError` props. The presence of loading and error handlers indicates an intent to manage the stylesheet loading state from your from your Component code and React will not hoist or deduplicate this stylesheet. If your intent was to have React hoist and deduplciate this stylesheet using the `precedence` prop remove the `onLoad` and `onError` props, otherwise remove the `precedence` prop.',
7852 + await waitForAll([]);
7853 + assertConsoleErrorDev([
7854 + 'React encountered a <link rel="stylesheet" href="foo" ... /> with a `precedence` ' +
7855 + 'prop that also included the `onLoad` and `onError` props. ' +
7856 + 'The presence of loading and error handlers indicates an intent to manage the stylesheet ' +
7857 + 'loading state from your from your Component code and React will not hoist or deduplicate this stylesheet. ' +
7858 + 'If your intent was to have React hoist and deduplciate this stylesheet using the `precedence` ' +
7859 + 'prop remove the `onLoad` and `onError` props, otherwise remove the `precedence` prop.\n' +
7860 + ' in body (at **)' +
7861 + (gate('enableOwnerStacks') ? '' : '\n in html (at **)'),
7862 ]);
7863 });
7864
@@ -8095,21 +8434,27 @@ background-color: green;
8434 });
8435
8436 it('warns if you render a <style> with an href with a space on the server', async () => {
8098 - await expect(async () => {
8099 - await act(() => {
8100 - renderToPipeableStream(
8101 - <html>
8102 - <body>
8103 - <style href="foo bar" precedence="default">
8104 - style
8105 - </style>
8106 - </body>
8107 - </html>,
8108 - ).pipe(writable);
8109 - });
8110 - }).toErrorDev(
8111 - 'React expected the `href` prop for a <style> tag opting into hoisting semantics using the `precedence` prop to not have any spaces but ecountered spaces instead. using spaces in this prop will cause hydration of this style to fail on the client. The href for the <style> where this ocurred is "foo bar".',
8112 - );
8437 + await act(() => {
8438 + renderToPipeableStream(
8439 + <html>
8440 + <body>
8441 + <style href="foo bar" precedence="default">
8442 + style
8443 + </style>
8444 + </body>
8445 + </html>,
8446 + ).pipe(writable);
8447 + });
8448 + assertConsoleErrorDev([
8449 + 'React expected the `href` prop for a <style> tag opting into hoisting semantics ' +
8450 + 'using the `precedence` prop to not have any spaces but ecountered spaces instead. ' +
8451 + 'using spaces in this prop will cause hydration of this style to fail on the client. ' +
8452 + 'The href for the <style> where this ocurred is "foo bar".\n' +
8453 + ' in style (at **)' +
8454 + (gate('enableOwnerStacks')
8455 + ? ''
8456 + : '\n in body (at **)' + '\n in html (at **)'),
8457 + ]);
8458 });
8459 });
8460