Skip to content

Commit

Permalink
Add ReactDOMClient to ServerIntegrationSelect (#28132)
Browse files Browse the repository at this point in the history
## Overview

Branched off #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.
  • Loading branch information
rickhanlonii authored Feb 1, 2024
1 parent 6054be9 commit c42e7c7
Showing 1 changed file with 5 additions and 5 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -13,21 +13,21 @@
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,
};
Expand Down Expand Up @@ -253,7 +253,7 @@ describe('ReactDOMServerIntegrationSelect', () => {
<option value="first">First</option>
<option value="true">True</option>
</select>,
1,
2,
);
expect(e.firstChild.selected).toBe(false);
expect(e.lastChild.selected).toBe(true);
Expand All @@ -268,7 +268,7 @@ describe('ReactDOMServerIntegrationSelect', () => {
<option value="first">First</option>
<option value="undefined">Undefined</option>
</select>,
1,
2,
);
expect(e.firstChild.selected).toBe(true);
expect(e.lastChild.selected).toBe(false);
Expand Down

0 comments on commit c42e7c7

Please sign in to comment.