@samitouri / QOS-React / commits / c42e7c7adc

Add ReactDOMClient to ServerIntegrationSelect (#28132)

## Overview Branched off https://github.com/facebook/react/pull/28130 ## React for count changing ### Before These tests are weird because on main they pass, but log to the console: ``` We expected 2 warning(s), but saw 1 warning(s). We saw these warnings: Warning: Expected server HTML to contain a matching <select> in <div>. at select ``` The other one is ignored. The `expect(console.errors).toBeCalledWith(2)` doesn't account for ignored calls, so the test passes with the two expected (the +1 is in the test utiles). The ignored warning is ``` Warning: ReactDOM.hydrate is no longer supported in React 18. Use hydrateRoot instead. ``` So the mismatch is in the ignored warnings. ### After After switching to `createRoot`, it still logs: ``` We expected 2 warning(s), but saw 1 warning(s). We saw these warnings: Warning: Expected server HTML to contain a matching <select> in <div>. at select ``` But the test fails due to an unexpected error count. The new ignored errors are: ``` Error: Uncaught [Error: Hydration failed because the initial UI does not match what was rendered on the server.] Warning: An error occurred during hydration. The server HTML was replaced with client content in <div>. Error: Hydration failed because the initial UI does not match what was rendered on the server. Error: There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering. ``` These seem to be the correct warnings to fire in `createRoot`, so the fix is to update the number of warnings we expect.

Ricky committed Feb 1, 2024 at 18:31 UTC c42e7c7adc3a036c0c176d5b3dd7cf9215862815

1 file changed +5 -5

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

+5 -5

@@ -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,13 +21,13 @@ 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 };

@@ -253,7 +253,7 @@ describe('ReactDOMServerIntegrationSelect', () => {

253 <option value="first">First</option>

254 <option value="true">True</option>

255 </select>,

256 - 1,

256 + 2,

257 );

258 expect(e.firstChild.selected).toBe(false);

259 expect(e.lastChild.selected).toBe(true);

@@ -268,7 +268,7 @@ describe('ReactDOMServerIntegrationSelect', () => {

268 <option value="first">First</option>

269 <option value="undefined">Undefined</option>

270 </select>,

271 - 1,

271 + 2,

272 );

273 expect(e.firstChild.selected).toBe(true);

274 expect(e.lastChild.selected).toBe(false);