Add ReactDOMClient to ServerIntegrationElements (#28134)
## Overview Branched off https://github.com/facebook/react/pull/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 <sebastian.silbermann@klarna.com>
Ricky committed
Feb 1, 2024 at 18:32 UTC
c0d927713002fe27c4d58717d35cd930e6814c2b
1 file changed
+30
-8
packages/react-dom/src/__tests__/ReactDOMServerIntegrationElements-test.js
+30
-8
@@ -16,19 +16,23 @@ const TEXT_NODE_TYPE = 3;
16
17
let React;
18
let ReactDOM;
19
+let ReactDOMClient;
20
let ReactDOMServer;
21
+let ReactFeatureFlags;
22
let ReactTestUtils;
23
24
function initModules() {
25
jest.resetModules();
26
React = require('react');
27
ReactDOM = require('react-dom');
28
+ ReactDOMClient = require('react-dom/client');
29
ReactDOMServer = require('react-dom/server');
30
+ ReactFeatureFlags = require('shared/ReactFeatureFlags');
31
ReactTestUtils = require('react-dom/test-utils');
32
33
// Make them available to the helpers.
34
return {
31
- ReactDOM,
35
+ ReactDOMClient,
36
ReactDOMServer,
37
ReactTestUtils,
38
};
@@ -136,7 +140,13 @@ describe('ReactDOMServerIntegration', () => {
140
// DOM nodes on the client side. We force it to fire early
141
// so that it gets deduplicated later, and doesn't fail the test.
142
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
+ });
150
}).toErrorDev('The tag <nonstandard> is unrecognized in this browser.');
151
152
const e = await render(<nonstandard>Text</nonstandard>);
@@ -833,15 +843,21 @@ describe('ReactDOMServerIntegration', () => {
843
'an element with one text child with special characters',
844
async render => {
845
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
+ ) {
852
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.
854
// Null character is ignored.
855
expectNode(e.childNodes[0], TEXT_NODE_TYPE, 'foo\nbar\nbaz\nqux');
856
} else {
857
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.
859
// Null character stays.
860
+
861
expectNode(
862
e.childNodes[0],
863
TEXT_NODE_TYPE,
@@ -860,17 +876,23 @@ describe('ReactDOMServerIntegration', () => {
876
{'\r\nbaz\nqux\u0000'}
877
</div>,
878
);
863
- if (render === serverRender || render === streamRender) {
879
+ if (
880
+ render === serverRender ||
881
+ render === streamRender ||
882
+ (render === clientRenderOnServerString &&
883
+ ReactFeatureFlags.enableClientRenderFallbackOnTextMismatch)
884
+ ) {
885
// We have three nodes because there is a comment between them.
886
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.
888
// Null character is ignored.
889
expectNode(e.childNodes[0], TEXT_NODE_TYPE, 'foo\nbar');
890
expectNode(e.childNodes[2], TEXT_NODE_TYPE, '\nbaz\nqux');
891
} else if (render === clientRenderOnServerString) {
892
// We have three nodes because there is a comment between them.
893
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
+
896
expectNode(e.childNodes[0], TEXT_NODE_TYPE, 'foo\rbar');
897
expectNode(e.childNodes[2], TEXT_NODE_TYPE, '\r\nbaz\nqux\u0000');
898
} else {