Skip to content

Commit c0d9277

Browse files
rickhanloniiSebastian Silbermann
and
Sebastian Silbermann
authored
Add ReactDOMClient to ServerIntegrationElements (#28134)
## Overview Branched off #28130 ## ~Failing~ Fixed by @eps1lon The tests are currently failing because of two tests covering special characters. I've tried a few ways to fix, but I'm stuck and will need some help understanding why they fail and how to fix. --------- Co-authored-by: Sebastian Silbermann <[email protected]>
1 parent 278199b commit c0d9277

File tree

1 file changed

+30
-8
lines changed

1 file changed

+30
-8
lines changed

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

Lines changed: 30 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -16,19 +16,23 @@ const TEXT_NODE_TYPE = 3;
1616

1717
let React;
1818
let ReactDOM;
19+
let ReactDOMClient;
1920
let ReactDOMServer;
21+
let ReactFeatureFlags;
2022
let ReactTestUtils;
2123

2224
function initModules() {
2325
jest.resetModules();
2426
React = require('react');
2527
ReactDOM = require('react-dom');
28+
ReactDOMClient = require('react-dom/client');
2629
ReactDOMServer = require('react-dom/server');
30+
ReactFeatureFlags = require('shared/ReactFeatureFlags');
2731
ReactTestUtils = require('react-dom/test-utils');
2832

2933
// Make them available to the helpers.
3034
return {
31-
ReactDOM,
35+
ReactDOMClient,
3236
ReactDOMServer,
3337
ReactTestUtils,
3438
};
@@ -136,7 +140,13 @@ describe('ReactDOMServerIntegration', () => {
136140
// DOM nodes on the client side. We force it to fire early
137141
// so that it gets deduplicated later, and doesn't fail the test.
138142
expect(() => {
139-
ReactDOM.render(<nonstandard />, document.createElement('div'));
143+
ReactDOM.flushSync(() => {
144+
const root = ReactDOMClient.createRoot(
145+
document.createElement('div'),
146+
);
147+
148+
root.render(<nonstandard />);
149+
});
140150
}).toErrorDev('The tag <nonstandard> is unrecognized in this browser.');
141151

142152
const e = await render(<nonstandard>Text</nonstandard>);
@@ -833,15 +843,21 @@ describe('ReactDOMServerIntegration', () => {
833843
'an element with one text child with special characters',
834844
async render => {
835845
const e = await render(<div>{'foo\rbar\r\nbaz\nqux\u0000'}</div>);
836-
if (render === serverRender || render === streamRender) {
846+
if (
847+
render === serverRender ||
848+
render === streamRender ||
849+
(render === clientRenderOnServerString &&
850+
ReactFeatureFlags.enableClientRenderFallbackOnTextMismatch)
851+
) {
837852
expect(e.childNodes.length).toBe(1);
838-
// Everything becomes LF when parsed from server HTML.
853+
// Everything becomes LF when parsed from server HTML or hydrated if enableClientRenderFallbackOnTextMismatch is on.
839854
// Null character is ignored.
840855
expectNode(e.childNodes[0], TEXT_NODE_TYPE, 'foo\nbar\nbaz\nqux');
841856
} else {
842857
expect(e.childNodes.length).toBe(1);
843-
// Client rendering (or hydration) uses JS value with CR.
858+
// Client rendering (or hydration without enableClientRenderFallbackOnTextMismatch) uses JS value with CR.
844859
// Null character stays.
860+
845861
expectNode(
846862
e.childNodes[0],
847863
TEXT_NODE_TYPE,
@@ -860,17 +876,23 @@ describe('ReactDOMServerIntegration', () => {
860876
{'\r\nbaz\nqux\u0000'}
861877
</div>,
862878
);
863-
if (render === serverRender || render === streamRender) {
879+
if (
880+
render === serverRender ||
881+
render === streamRender ||
882+
(render === clientRenderOnServerString &&
883+
ReactFeatureFlags.enableClientRenderFallbackOnTextMismatch)
884+
) {
864885
// We have three nodes because there is a comment between them.
865886
expect(e.childNodes.length).toBe(3);
866-
// Everything becomes LF when parsed from server HTML.
887+
// Everything becomes LF when parsed from server HTML or hydrated if enableClientRenderFallbackOnTextMismatch is on.
867888
// Null character is ignored.
868889
expectNode(e.childNodes[0], TEXT_NODE_TYPE, 'foo\nbar');
869890
expectNode(e.childNodes[2], TEXT_NODE_TYPE, '\nbaz\nqux');
870891
} else if (render === clientRenderOnServerString) {
871892
// We have three nodes because there is a comment between them.
872893
expect(e.childNodes.length).toBe(3);
873-
// Hydration uses JS value with CR and null character.
894+
// Hydration without enableClientRenderFallbackOnTextMismatch uses JS value with CR and null character.
895+
874896
expectNode(e.childNodes[0], TEXT_NODE_TYPE, 'foo\rbar');
875897
expectNode(e.childNodes[2], TEXT_NODE_TYPE, '\r\nbaz\nqux\u0000');
876898
} else {

0 commit comments

Comments
 (0)