mirror of
https://github.com/facebook/react.git
synced 2025-11-01 09:12:30 +00:00
Add ReactDOMClient to ServerIntegration(Hooks|NewContext) (#28135)
## Overview Branched off https://github.com/facebook/react/pull/28130 ### ~Failing~ Fixed by @eps1lon Most of the tests pass, but there are 3 tests that have additional warnings due to client render error retries. For example, before we would log: ``` Warning: Do not call Hooks inside useEffect(...), useMemo(...), or other built-in Hooks. Warning: Expected server HTML to contain a matching text node for "0" in <div>. ``` And now we log ``` Warning: Do not call Hooks inside useEffect(...), useMemo(...), or other built-in Hooks. Warning: Expected server HTML to contain a matching text node for "0" in <div>. Warning: Do not call Hooks inside useEffect(...), useMemo(...), or other built-in Hooks. ``` We can't just update the expected error count for these tests, because the additional error only happens on the client. So I need some guidance on how to fix these. --------- Co-authored-by: Sebastian Silbermann <sebastian.silbermann@klarna.com>
This commit is contained in:
co-authored by
Sebastian Silbermann
parent
c0d9277130
commit
fa6674b5bc
@@ -15,7 +15,7 @@
|
||||
const ReactDOMServerIntegrationUtils = require('./utils/ReactDOMServerIntegrationTestUtils');
|
||||
|
||||
let React;
|
||||
let ReactDOM;
|
||||
let ReactDOMClient;
|
||||
let ReactDOMServer;
|
||||
let ReactTestUtils;
|
||||
let useState;
|
||||
@@ -39,7 +39,7 @@ function initModules() {
|
||||
jest.resetModules();
|
||||
|
||||
React = require('react');
|
||||
ReactDOM = require('react-dom');
|
||||
ReactDOMClient = require('react-dom/client');
|
||||
ReactDOMServer = require('react-dom/server');
|
||||
ReactTestUtils = require('react-dom/test-utils');
|
||||
useState = React.useState;
|
||||
@@ -67,14 +67,19 @@ function initModules() {
|
||||
|
||||
// Make them available to the helpers.
|
||||
return {
|
||||
ReactDOM,
|
||||
ReactDOMClient,
|
||||
ReactDOMServer,
|
||||
ReactTestUtils,
|
||||
};
|
||||
}
|
||||
|
||||
const {resetModules, itRenders, itThrowsWhenRendering, serverRender} =
|
||||
ReactDOMServerIntegrationUtils(initModules);
|
||||
const {
|
||||
resetModules,
|
||||
itRenders,
|
||||
itThrowsWhenRendering,
|
||||
clientRenderOnBadMarkup,
|
||||
serverRender,
|
||||
} = ReactDOMServerIntegrationUtils(initModules);
|
||||
|
||||
describe('ReactDOMServerHooks', () => {
|
||||
beforeEach(() => {
|
||||
@@ -422,8 +427,13 @@ describe('ReactDOMServerHooks', () => {
|
||||
});
|
||||
return 'hi';
|
||||
}
|
||||
|
||||
const domNode = await render(<App />, 1);
|
||||
const domNode = await render(
|
||||
<App />,
|
||||
render === clientRenderOnBadMarkup
|
||||
? // On hydration mismatch we retry and therefore log the warning again.
|
||||
2
|
||||
: 1,
|
||||
);
|
||||
expect(domNode.textContent).toEqual('hi');
|
||||
});
|
||||
|
||||
@@ -436,7 +446,13 @@ describe('ReactDOMServerHooks', () => {
|
||||
return value;
|
||||
}
|
||||
|
||||
const domNode = await render(<App />, 1);
|
||||
const domNode = await render(
|
||||
<App />,
|
||||
render === clientRenderOnBadMarkup
|
||||
? // On hydration mismatch we retry and therefore log the warning again.
|
||||
2
|
||||
: 1,
|
||||
);
|
||||
expect(domNode.textContent).toEqual('0');
|
||||
});
|
||||
});
|
||||
@@ -859,7 +875,13 @@ describe('ReactDOMServerHooks', () => {
|
||||
return <Text text={count} />;
|
||||
}
|
||||
|
||||
const domNode1 = await render(<ReadInMemo />, 1);
|
||||
const domNode1 = await render(
|
||||
<ReadInMemo />,
|
||||
render === clientRenderOnBadMarkup
|
||||
? // On hydration mismatch we retry and therefore log the warning again.
|
||||
2
|
||||
: 1,
|
||||
);
|
||||
expect(domNode1.textContent).toEqual('42');
|
||||
|
||||
const domNode2 = await render(<ReadInReducer />, 1);
|
||||
|
||||
+20
-8
@@ -13,7 +13,7 @@
|
||||
const ReactDOMServerIntegrationUtils = require('./utils/ReactDOMServerIntegrationTestUtils');
|
||||
|
||||
let React;
|
||||
let ReactDOM;
|
||||
let ReactDOMClient;
|
||||
let ReactDOMServer;
|
||||
let ReactTestUtils;
|
||||
|
||||
@@ -21,19 +21,20 @@ function initModules() {
|
||||
// Reset warning cache.
|
||||
jest.resetModules();
|
||||
React = require('react');
|
||||
ReactDOM = require('react-dom');
|
||||
ReactDOMClient = require('react-dom/client');
|
||||
ReactDOMServer = require('react-dom/server');
|
||||
ReactTestUtils = require('react-dom/test-utils');
|
||||
|
||||
// Make them available to the helpers.
|
||||
return {
|
||||
ReactDOM,
|
||||
ReactDOMClient,
|
||||
ReactDOMServer,
|
||||
ReactTestUtils,
|
||||
};
|
||||
}
|
||||
|
||||
const {resetModules, itRenders} = ReactDOMServerIntegrationUtils(initModules);
|
||||
const {resetModules, itRenders, clientRenderOnBadMarkup} =
|
||||
ReactDOMServerIntegrationUtils(initModules);
|
||||
|
||||
describe('ReactDOMServerIntegration', () => {
|
||||
beforeEach(() => {
|
||||
@@ -365,8 +366,13 @@ describe('ReactDOMServerIntegration', () => {
|
||||
</div>
|
||||
);
|
||||
};
|
||||
// We expect 1 error.
|
||||
await render(<App />, 1);
|
||||
await render(
|
||||
<App />,
|
||||
render === clientRenderOnBadMarkup
|
||||
? // On hydration mismatch we retry and therefore log the warning again.
|
||||
2
|
||||
: 1,
|
||||
);
|
||||
},
|
||||
);
|
||||
|
||||
@@ -391,8 +397,14 @@ describe('ReactDOMServerIntegration', () => {
|
||||
</div>
|
||||
);
|
||||
};
|
||||
// We expect 1 error.
|
||||
await render(<App />, 1);
|
||||
|
||||
await render(
|
||||
<App />,
|
||||
render === clientRenderOnBadMarkup
|
||||
? // On hydration mismatch we retry and therefore log the warning again.
|
||||
2
|
||||
: 1,
|
||||
);
|
||||
},
|
||||
);
|
||||
|
||||
|
||||
Reference in New Issue
Block a user