Skip to content

Commit

Permalink
Add ReactDOMClient to ServerIntegration(Hooks|NewContext) (facebook#2…
Browse files Browse the repository at this point in the history
…8135)

## Overview

Branched off facebook#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 <[email protected]>
  • Loading branch information
2 people authored and AndyPengc12 committed Apr 15, 2024
1 parent f44539f commit 2ba47ff
Show file tree
Hide file tree
Showing 2 changed files with 51 additions and 17 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
const ReactDOMServerIntegrationUtils = require('./utils/ReactDOMServerIntegrationTestUtils');

let React;
let ReactDOM;
let ReactDOMClient;
let ReactDOMServer;
let ReactTestUtils;
let useState;
Expand All @@ -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;
Expand Down Expand Up @@ -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(() => {
Expand Down Expand Up @@ -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');
});

Expand All @@ -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');
});
});
Expand Down Expand Up @@ -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);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -13,27 +13,28 @@
const ReactDOMServerIntegrationUtils = require('./utils/ReactDOMServerIntegrationTestUtils');

let React;
let ReactDOM;
let ReactDOMClient;
let ReactDOMServer;
let ReactTestUtils;

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(() => {
Expand Down Expand Up @@ -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,
);
},
);

Expand All @@ -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,
);
},
);

Expand Down

0 comments on commit 2ba47ff

Please sign in to comment.