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:
Ricky
2024-02-01 18:32:27 -05:00
committed by GitHub
co-authored by Sebastian Silbermann
parent c0d9277130
commit fa6674b5bc
2 changed files with 51 additions and 17 deletions
@@ -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);
@@ -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,
);
},
);