@samitouri / QOS-React-1 Mirror · read-only / commits / fa6674b5bc

Fork 0

The library for web and native user interfaces.

Mirrored from https://github.com/247TaxiDriver/QOS-React.git

Synced Nov 13, 13:15 UTC

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>

Ricky committed Feb 1, 2024 at 18:32 UTC fa6674b5bcf52610e92d19a5105308e56091c386

2 files changed +51 -17

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

+31 -9

@@ -15,7 +15,7 @@

15 const ReactDOMServerIntegrationUtils = require('./utils/ReactDOMServerIntegrationTestUtils');

17 let React;

18 -let ReactDOM;

18 +let ReactDOMClient;

19 let ReactDOMServer;

20 let ReactTestUtils;

21 let useState;

@@ -39,7 +39,7 @@ function initModules() {

39 jest.resetModules();

41 React = require('react');

42 - ReactDOM = require('react-dom');

42 + ReactDOMClient = require('react-dom/client');

43 ReactDOMServer = require('react-dom/server');

44 ReactTestUtils = require('react-dom/test-utils');

45 useState = React.useState;

@@ -67,14 +67,19 @@ function initModules() {

68 // Make them available to the helpers.

69 return {

70 - ReactDOM,

70 + ReactDOMClient,

71 ReactDOMServer,

72 ReactTestUtils,

73 };

74 }

76 -const {resetModules, itRenders, itThrowsWhenRendering, serverRender} =

77 - ReactDOMServerIntegrationUtils(initModules);

76 +const {

77 + resetModules,

78 + itRenders,

79 + itThrowsWhenRendering,

80 + clientRenderOnBadMarkup,

81 + serverRender,

82 +} = ReactDOMServerIntegrationUtils(initModules);

84 describe('ReactDOMServerHooks', () => {

85 beforeEach(() => {

@@ -422,8 +427,13 @@ describe('ReactDOMServerHooks', () => {

427 });

428 return 'hi';

429 }

425 -

426 - const domNode = await render(<App />, 1);

430 + const domNode = await render(

431 + <App />,

432 + render === clientRenderOnBadMarkup

433 + ? // On hydration mismatch we retry and therefore log the warning again.

434 + 2

435 + : 1,

436 + );

437 expect(domNode.textContent).toEqual('hi');

438 });

439

@@ -436,7 +446,13 @@ describe('ReactDOMServerHooks', () => {

446 return value;

447 }

448

439 - const domNode = await render(<App />, 1);

449 + const domNode = await render(

450 + <App />,

451 + render === clientRenderOnBadMarkup

452 + ? // On hydration mismatch we retry and therefore log the warning again.

453 + 2

454 + : 1,

455 + );

456 expect(domNode.textContent).toEqual('0');

457 });

458 });

@@ -859,7 +875,13 @@ describe('ReactDOMServerHooks', () => {

875 return <Text text={count} />;

876 }

877

862 - const domNode1 = await render(<ReadInMemo />, 1);

878 + const domNode1 = await render(

879 + <ReadInMemo />,

880 + render === clientRenderOnBadMarkup

881 + ? // On hydration mismatch we retry and therefore log the warning again.

882 + 2

883 + : 1,

884 + );

885 expect(domNode1.textContent).toEqual('42');

886

887 const domNode2 = await render(<ReadInReducer />, 1);

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

+20 -8

@@ -13,7 +13,7 @@

13 const ReactDOMServerIntegrationUtils = require('./utils/ReactDOMServerIntegrationTestUtils');

15 let React;

16 -let ReactDOM;

16 +let ReactDOMClient;

17 let ReactDOMServer;

18 let ReactTestUtils;

@@ -21,19 +21,20 @@ function initModules() {

21 // Reset warning cache.

22 jest.resetModules();

23 React = require('react');

24 - ReactDOM = require('react-dom');

24 + ReactDOMClient = require('react-dom/client');

25 ReactDOMServer = require('react-dom/server');

26 ReactTestUtils = require('react-dom/test-utils');

28 // Make them available to the helpers.

29 return {

30 - ReactDOM,

30 + ReactDOMClient,

31 ReactDOMServer,

32 ReactTestUtils,

33 };

34 }

36 -const {resetModules, itRenders} = ReactDOMServerIntegrationUtils(initModules);

36 +const {resetModules, itRenders, clientRenderOnBadMarkup} =

37 + ReactDOMServerIntegrationUtils(initModules);

39 describe('ReactDOMServerIntegration', () => {

40 beforeEach(() => {

@@ -365,8 +366,13 @@ describe('ReactDOMServerIntegration', () => {

366 </div>

367 );

368 };

368 - // We expect 1 error.

369 - await render(<App />, 1);

369 + await render(

370 + <App />,

371 + render === clientRenderOnBadMarkup

372 + ? // On hydration mismatch we retry and therefore log the warning again.

373 + 2

374 + : 1,

375 + );

376 },

377 );

378

@@ -391,8 +397,14 @@ describe('ReactDOMServerIntegration', () => {

397 </div>

398 );

399 };

394 - // We expect 1 error.

395 - await render(<App />, 1);

400 +

401 + await render(

402 + <App />,

403 + render === clientRenderOnBadMarkup

404 + ? // On hydration mismatch we retry and therefore log the warning again.

405 + 2

406 + : 1,

407 + );

408 },

409 );

410