Skip to content

Commit 5f7f528

Browse files
authored
Add more tests for suppressHydrationWarning (#24275)
* More tests for suppressHydrationWarning * Move suppressHydration tests to new file * Extract more tests * Test name * Test legacy behavior too
1 parent fc47cb1 commit 5f7f528

File tree

2 files changed

+698
-92
lines changed

2 files changed

+698
-92
lines changed

packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js

Lines changed: 0 additions & 92 deletions
Original file line numberDiff line numberDiff line change
@@ -2811,96 +2811,4 @@ describe('ReactDOMFizzServer', () => {
28112811
</ul>,
28122812
);
28132813
});
2814-
2815-
// @gate experimental
2816-
it('suppresses and fixes text mismatches with suppressHydrationWarning', async () => {
2817-
function App({isClient}) {
2818-
return (
2819-
<div>
2820-
<span
2821-
suppressHydrationWarning={true}
2822-
data-attr={isClient ? 'client-attr' : 'server-attr'}>
2823-
{isClient ? 'Client Text' : 'Server Text'}
2824-
</span>
2825-
<span suppressHydrationWarning={true}>{isClient ? 2 : 1}</span>
2826-
<span suppressHydrationWarning={true}>
2827-
hello,{isClient ? 'client' : 'server'}
2828-
</span>
2829-
</div>
2830-
);
2831-
}
2832-
await act(async () => {
2833-
const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
2834-
<App isClient={false} />,
2835-
);
2836-
pipe(writable);
2837-
});
2838-
expect(getVisibleChildren(container)).toEqual(
2839-
<div>
2840-
<span data-attr="server-attr">Server Text</span>
2841-
<span>1</span>
2842-
<span>
2843-
{'hello,'}
2844-
{'server'}
2845-
</span>
2846-
</div>,
2847-
);
2848-
ReactDOMClient.hydrateRoot(container, <App isClient={true} />, {
2849-
onRecoverableError(error) {
2850-
// Don't miss a hydration error. There should be none.
2851-
Scheduler.unstable_yieldValue(error.message);
2852-
},
2853-
});
2854-
expect(Scheduler).toFlushAndYield([]);
2855-
// The text mismatch should be *silently* fixed. Even in production.
2856-
// The attribute mismatch should be ignored and not fixed.
2857-
expect(getVisibleChildren(container)).toEqual(
2858-
<div>
2859-
<span data-attr="server-attr">Client Text</span>
2860-
<span>2</span>
2861-
<span>
2862-
{'hello,'}
2863-
{'client'}
2864-
</span>
2865-
</div>,
2866-
);
2867-
});
2868-
2869-
// @gate experimental
2870-
it('suppresses and does not fix html mismatches with suppressHydrationWarning', async () => {
2871-
function App({isClient}) {
2872-
return (
2873-
<div>
2874-
<p
2875-
suppressHydrationWarning={true}
2876-
dangerouslySetInnerHTML={{
2877-
__html: isClient ? 'Client HTML' : 'Server HTML',
2878-
}}
2879-
/>
2880-
</div>
2881-
);
2882-
}
2883-
await act(async () => {
2884-
const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
2885-
<App isClient={false} />,
2886-
);
2887-
pipe(writable);
2888-
});
2889-
expect(getVisibleChildren(container)).toEqual(
2890-
<div>
2891-
<p>Server HTML</p>
2892-
</div>,
2893-
);
2894-
ReactDOMClient.hydrateRoot(container, <App isClient={true} />, {
2895-
onRecoverableError(error) {
2896-
Scheduler.unstable_yieldValue(error.message);
2897-
},
2898-
});
2899-
expect(Scheduler).toFlushAndYield([]);
2900-
expect(getVisibleChildren(container)).toEqual(
2901-
<div>
2902-
<p>Server HTML</p>
2903-
</div>,
2904-
);
2905-
});
29062814
});

0 commit comments

Comments
 (0)