Skip to content

Add more tests for suppressHydrationWarning #24275

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 5 commits into from
Apr 4, 2022
Merged

Add more tests for suppressHydrationWarning #24275

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
9a716eb
More tests for suppressHydrationWarning
gaearon Apr 4, 2022
ea6c70b
Move suppressHydration tests to new file
gaearon Apr 4, 2022
8a78578
Extract more tests
gaearon Apr 4, 2022
040bc84
Test name
gaearon Apr 4, 2022
ac628a3
Test legacy behavior too
gaearon Apr 4, 2022
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
92 changes: 0 additions & 92 deletions packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2811,96 +2811,4 @@ describe('ReactDOMFizzServer', () => {
</ul>,
);
});

// @gate experimental
it('suppresses and fixes text mismatches with suppressHydrationWarning', async () => {
function App({isClient}) {
return (
<div>
<span
suppressHydrationWarning={true}
data-attr={isClient ? 'client-attr' : 'server-attr'}>
{isClient ? 'Client Text' : 'Server Text'}
</span>
<span suppressHydrationWarning={true}>{isClient ? 2 : 1}</span>
<span suppressHydrationWarning={true}>
hello,{isClient ? 'client' : 'server'}
</span>
</div>
);
}
await act(async () => {
const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
<App isClient={false} />,
);
pipe(writable);
});
expect(getVisibleChildren(container)).toEqual(
<div>
<span data-attr="server-attr">Server Text</span>
<span>1</span>
<span>
{'hello,'}
{'server'}
</span>
</div>,
);
ReactDOMClient.hydrateRoot(container, <App isClient={true} />, {
onRecoverableError(error) {
// Don't miss a hydration error. There should be none.
Scheduler.unstable_yieldValue(error.message);
},
});
expect(Scheduler).toFlushAndYield([]);
// The text mismatch should be *silently* fixed. Even in production.
// The attribute mismatch should be ignored and not fixed.
expect(getVisibleChildren(container)).toEqual(
<div>
<span data-attr="server-attr">Client Text</span>
<span>2</span>
<span>
{'hello,'}
{'client'}
</span>
</div>,
);
});

// @gate experimental
it('suppresses and does not fix html mismatches with suppressHydrationWarning', async () => {
function App({isClient}) {
return (
<div>
<p
suppressHydrationWarning={true}
dangerouslySetInnerHTML={{
__html: isClient ? 'Client HTML' : 'Server HTML',
}}
/>
</div>
);
}
await act(async () => {
const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
<App isClient={false} />,
);
pipe(writable);
});
expect(getVisibleChildren(container)).toEqual(
<div>
<p>Server HTML</p>
</div>,
);
ReactDOMClient.hydrateRoot(container, <App isClient={true} />, {
onRecoverableError(error) {
Scheduler.unstable_yieldValue(error.message);
},
});
expect(Scheduler).toFlushAndYield([]);
expect(getVisibleChildren(container)).toEqual(
<div>
<p>Server HTML</p>
</div>,
);
});
});
Loading