Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add ReactDOMClient to ServerIntegrationTestUtils #28130

Merged
merged 1 commit into from
Feb 1, 2024

Conversation

rickhanlonii
Copy link
Member

Overview

Adds support for ReactDOMClient for ServerIntegration* tests.

Also converts tests that pass without any other changes. Will follow up with other PRs for more complex cases.

@facebook-github-bot facebook-github-bot added CLA Signed React Core Team Opened by a member of the React Core Team labels Jan 27, 2024
@react-sizebot
Copy link

react-sizebot commented Jan 27, 2024

Comparing: 9aef5d2...e204d76

Critical size changes

Includes critical production bundles, as well as any change greater than 2%:

Name +/- Base Current +/- gzip Base gzip Current gzip
oss-stable/react-dom/cjs/react-dom.production.min.js = 176.59 kB 176.59 kB = 55.01 kB 55.01 kB
oss-experimental/react-dom/cjs/react-dom.production.min.js = 178.69 kB 178.69 kB = 55.64 kB 55.64 kB
facebook-www/ReactDOM-prod.classic.js = 573.52 kB 573.52 kB = 100.99 kB 100.99 kB
facebook-www/ReactDOM-prod.modern.js = 557.29 kB 557.29 kB = 98.07 kB 98.07 kB
test_utils/ReactAllWarnings.js Deleted 67.55 kB 0.00 kB Deleted 16.54 kB 0.00 kB

Significant size changes

Includes any change greater than 0.2%:

Expand to show
Name +/- Base Current +/- gzip Base gzip Current gzip
test_utils/ReactAllWarnings.js Deleted 67.55 kB 0.00 kB Deleted 16.54 kB 0.00 kB

Generated by 🚫 dangerJS against e204d76

if (ReactDOMClient) {
ReactDOMClient.hydrateRoot(domElement, reactElement, {
onRecoverableError: () => {
// TODO: assert on recoverable error count.
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Updated to add and ignore onRecoverableError errors. I started to add support for asserting this count, but it's going to require a lot more thought and tests to be updated so I'm not adding it here.

) !== -1
) {
// This also gets logged by onRecoverableError, so we can ignore it.
return true;
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There is still one error that is duplicated in console.error and onRecoverableError, so it's fine to ignore. There's a comment on that error to remove it:

// TODO: This gets logged by onRecoverableError, too, so we should be

@rickhanlonii rickhanlonii merged commit 6054be9 into main Feb 1, 2024
36 checks passed
@rickhanlonii rickhanlonii deleted the rh/server-test-utils branch February 1, 2024 23:27
rickhanlonii added a commit that referenced this pull request Feb 1, 2024
## 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.
rickhanlonii added a commit that referenced this pull request Feb 1, 2024
## Overview

Branched off #28130

In `hydrateRoot`, we now error if you pass `undefined`:

```
Warning: Must provide initial children as second argument to hydrateRoot. 
```

So we expect 1 error for this now.
rickhanlonii added a commit that referenced this pull request Feb 1, 2024
## Overview 

Branched off #28130

## ~Failing~ Fixed by @eps1lon 

The tests are currently failing because of two tests covering special
characters. I've tried a few ways to fix, but I'm stuck and will need
some help understanding why they fail and how to fix.

---------

Co-authored-by: Sebastian Silbermann <sebastian.silbermann@klarna.com>
rickhanlonii added a commit that referenced this pull request Feb 1, 2024
## Overview

Branched off #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>
rickhanlonii added a commit that referenced this pull request Feb 1, 2024
## Overview

Branched off #28130

## Why

In #24276 we changed the new root
behavior to error when a client-render is forced for certain cases, so
these now expect a mismatch even though they're using
`suppressHydrationWarning`.
rickhanlonii added a commit that referenced this pull request Feb 2, 2024
## Overview 

Branched off #28130

Converts to `createRoot`, with a few additional in-line conversions in
each file.
gaearon pushed a commit that referenced this pull request Feb 3, 2024
## Overview

Adds support for `ReactDOMClient` for  `ServerIntegration*` tests. 

Also converts tests that pass without any other changes. Will follow up
with other PRs for more complex cases.
gaearon pushed a commit that referenced this pull request Feb 3, 2024
## 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.
gaearon pushed a commit that referenced this pull request Feb 3, 2024
## Overview

Branched off #28130

In `hydrateRoot`, we now error if you pass `undefined`:

```
Warning: Must provide initial children as second argument to hydrateRoot. 
```

So we expect 1 error for this now.
gaearon pushed a commit that referenced this pull request Feb 3, 2024
## Overview 

Branched off #28130

## ~Failing~ Fixed by @eps1lon 

The tests are currently failing because of two tests covering special
characters. I've tried a few ways to fix, but I'm stuck and will need
some help understanding why they fail and how to fix.

---------

Co-authored-by: Sebastian Silbermann <sebastian.silbermann@klarna.com>
gaearon pushed a commit that referenced this pull request Feb 3, 2024
## Overview

Branched off #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>
gaearon pushed a commit that referenced this pull request Feb 3, 2024
## Overview

Branched off #28130

## Why

In #24276 we changed the new root
behavior to error when a client-render is forced for certain cases, so
these now expect a mismatch even though they're using
`suppressHydrationWarning`.
gaearon pushed a commit that referenced this pull request Feb 3, 2024
## Overview 

Branched off #28130

Converts to `createRoot`, with a few additional in-line conversions in
each file.
gnoff added a commit to gnoff/next.js that referenced this pull request Feb 6, 2024
- facebook/react#28250
- facebook/react#28225
- facebook/react#28123
- facebook/react#28240
- facebook/react#28239
- facebook/react#28245
- facebook/react#28244
- facebook/react#28238
- facebook/react#28235
- facebook/react#28221
- facebook/react#28215
- facebook/react#28214
- facebook/react#28213
- facebook/react#28212
- facebook/react#28211
- facebook/react#28247
- facebook/react#28210
- facebook/react#28186
- facebook/react#28232
- facebook/react#28169
- facebook/react#28177
- facebook/react#28170
- facebook/react#28168
- facebook/react#28122
- facebook/react#27982
- facebook/react#28217
- facebook/react#28223
- facebook/react#28208
- facebook/react#28209
- facebook/react#28200
- facebook/react#28199
- facebook/react#28198
- facebook/react#28197
- facebook/react#28196
- facebook/react#28194
- facebook/react#28192
- facebook/react#28191
- facebook/react#28182
- facebook/react#28181
- facebook/react#28180
- facebook/react#28178
- facebook/react#28201
- facebook/react#28176
- facebook/react#28162
- facebook/react#28131
- facebook/react#28190
- facebook/react#28172
- facebook/react#28171
- facebook/react#28173
- facebook/react#28174
- facebook/react#28175
- facebook/react#28136
- facebook/react#28135
- facebook/react#28134
- facebook/react#28133
- facebook/react#28132
- facebook/react#28130
- facebook/react#28202
- facebook/react#28102
- facebook/react#28161
- facebook/react#28193
- facebook/react#28195
- facebook/react#28189
- facebook/react#28160
- facebook/react#28096
- facebook/react#28183
- facebook/react#28125
- facebook/react#28157
- facebook/react#28115
- facebook/react#28124
- facebook/react#28163
- facebook/react#28164
- facebook/react#28150
- facebook/react#28159
- facebook/react#28069
- facebook/react#28110
- facebook/react#28148
- facebook/react#28116
- facebook/react#28099
- facebook/react#28100
- facebook/react#28147
- facebook/react#28128
- facebook/react#28126
- facebook/react#28139
- facebook/react#28140
- facebook/react#28141
- facebook/react#28142
- facebook/react#28113
- facebook/react#28129
- facebook/react#28114
- facebook/react#28053
- facebook/react#28091
- facebook/react#28087
- facebook/react#28112
- facebook/react#28086
- facebook/react#28101
- facebook/react#28106
- facebook/react#28117
- facebook/react#28118
- facebook/react#28105
- facebook/react#27883
- facebook/react#28111
- facebook/react#28095
- facebook/react#28108
- facebook/react#28090
- facebook/react#28089
- facebook/react#28076
- facebook/react#28074
- facebook/react#28103
- facebook/react#28098
- facebook/react#28097
- facebook/react#28068
- facebook/react#28093
- facebook/react#28094
- facebook/react#28073
- facebook/react#28084
- facebook/react#28063
- facebook/react#28085
- facebook/react#28083
- facebook/react#28065
- facebook/react#28061
- facebook/react#28077
- facebook/react#28075
- facebook/react#28078
- facebook/react#28050
- facebook/react#28011
- facebook/react#28055
- facebook/react#28066
- facebook/react#28067
- facebook/react#28010
- facebook/react#27993
- facebook/react#28052
- facebook/react#28060
- facebook/react#28059
- facebook/react#28034
- facebook/react#28033
- facebook/react#28004
- facebook/react#28051
- facebook/react#28012
- facebook/react#28001
- facebook/react#28002
- facebook/react#27995
- facebook/react#28006
- facebook/react#28005
- facebook/react#28007
- facebook/react#28008
- facebook/react#28009
- facebook/react#28000
- facebook/react#28003
- facebook/react#27997
- facebook/react#27240
- facebook/react#27977
- facebook/react#27940
- facebook/react#27939
- facebook/react#28090
- facebook/react#28089
- facebook/react#28076
- facebook/react#28074
- facebook/react#28103
- facebook/react#28098
- facebook/react#28097
- facebook/react#28068
- facebook/react#28093
- facebook/react#28094
- facebook/react#28073
- facebook/react#28084
- facebook/react#28063
- facebook/react#28085
- facebook/react#28083
- facebook/react#28065
- facebook/react#28061
- facebook/react#28077
- facebook/react#28075
- facebook/react#28078
- facebook/react#28050
- facebook/react#28011
- facebook/react#28055
- facebook/react#28066
- facebook/react#28067
- facebook/react#28010
- facebook/react#27993
- facebook/react#28052
- facebook/react#28060
- facebook/react#28059
- facebook/react#28034
- facebook/react#28033
- facebook/react#28004
- facebook/react#28051
- facebook/react#28012
- facebook/react#28001
- facebook/react#28002
- facebook/react#27995
- facebook/react#28006
- facebook/react#28005
- facebook/react#28007
- facebook/react#28008
- facebook/react#28009
- facebook/react#28000
- facebook/react#28003
- facebook/react#27997
- facebook/react#27240
- facebook/react#27977
- facebook/react#27940
- facebook/react#27939
gnoff added a commit to gnoff/next.js that referenced this pull request Feb 6, 2024
- facebook/react#28250
- facebook/react#28225
- facebook/react#28123
- facebook/react#28240
- facebook/react#28239
- facebook/react#28245
- facebook/react#28244
- facebook/react#28238
- facebook/react#28235
- facebook/react#28221
- facebook/react#28215
- facebook/react#28214
- facebook/react#28213
- facebook/react#28212
- facebook/react#28211
- facebook/react#28247
- facebook/react#28210
- facebook/react#28186
- facebook/react#28232
- facebook/react#28169
- facebook/react#28177
- facebook/react#28170
- facebook/react#28168
- facebook/react#28122
- facebook/react#27982
- facebook/react#28217
- facebook/react#28223
- facebook/react#28208
- facebook/react#28209
- facebook/react#28200
- facebook/react#28199
- facebook/react#28198
- facebook/react#28197
- facebook/react#28196
- facebook/react#28194
- facebook/react#28192
- facebook/react#28191
- facebook/react#28182
- facebook/react#28181
- facebook/react#28180
- facebook/react#28178
- facebook/react#28201
- facebook/react#28176
- facebook/react#28162
- facebook/react#28131
- facebook/react#28190
- facebook/react#28172
- facebook/react#28171
- facebook/react#28173
- facebook/react#28174
- facebook/react#28175
- facebook/react#28136
- facebook/react#28135
- facebook/react#28134
- facebook/react#28133
- facebook/react#28132
- facebook/react#28130
- facebook/react#28202
- facebook/react#28102
- facebook/react#28161
- facebook/react#28193
- facebook/react#28195
- facebook/react#28189
- facebook/react#28160
- facebook/react#28096
- facebook/react#28183
- facebook/react#28125
- facebook/react#28157
- facebook/react#28115
- facebook/react#28124
- facebook/react#28163
- facebook/react#28164
- facebook/react#28150
- facebook/react#28159
- facebook/react#28069
- facebook/react#28110
- facebook/react#28148
- facebook/react#28116
- facebook/react#28099
- facebook/react#28100
- facebook/react#28147
- facebook/react#28128
- facebook/react#28126
- facebook/react#28139
- facebook/react#28140
- facebook/react#28141
- facebook/react#28142
- facebook/react#28113
- facebook/react#28129
- facebook/react#28114
- facebook/react#28053
- facebook/react#28091
- facebook/react#28087
- facebook/react#28112
- facebook/react#28086
- facebook/react#28101
- facebook/react#28106
- facebook/react#28117
- facebook/react#28118
- facebook/react#28105
- facebook/react#27883
- facebook/react#28111
- facebook/react#28095
- facebook/react#28108
- facebook/react#28090
- facebook/react#28089
- facebook/react#28076
- facebook/react#28074
- facebook/react#28103
- facebook/react#28098
- facebook/react#28097
- facebook/react#28068
- facebook/react#28093
- facebook/react#28094
- facebook/react#28073
- facebook/react#28084
- facebook/react#28063
- facebook/react#28085
- facebook/react#28083
- facebook/react#28065
- facebook/react#28061
- facebook/react#28077
- facebook/react#28075
- facebook/react#28078
- facebook/react#28050
- facebook/react#28011
- facebook/react#28055
- facebook/react#28066
- facebook/react#28067
- facebook/react#28010
- facebook/react#27993
- facebook/react#28052
- facebook/react#28060
- facebook/react#28059
- facebook/react#28034
- facebook/react#28033
- facebook/react#28004
- facebook/react#28051
- facebook/react#28012
- facebook/react#28001
- facebook/react#28002
- facebook/react#27995
- facebook/react#28006
- facebook/react#28005
- facebook/react#28007
- facebook/react#28008
- facebook/react#28009
- facebook/react#28000
- facebook/react#28003
- facebook/react#27997
- facebook/react#27240
- facebook/react#27977
- facebook/react#27940
- facebook/react#27939
- facebook/react#28090
- facebook/react#28089
- facebook/react#28076
- facebook/react#28074
- facebook/react#28103
- facebook/react#28098
- facebook/react#28097
- facebook/react#28068
- facebook/react#28093
- facebook/react#28094
- facebook/react#28073
- facebook/react#28084
- facebook/react#28063
- facebook/react#28085
- facebook/react#28083
- facebook/react#28065
- facebook/react#28061
- facebook/react#28077
- facebook/react#28075
- facebook/react#28078
- facebook/react#28050
- facebook/react#28011
- facebook/react#28055
- facebook/react#28066
- facebook/react#28067
- facebook/react#28010
- facebook/react#27993
- facebook/react#28052
- facebook/react#28060
- facebook/react#28059
- facebook/react#28034
- facebook/react#28033
- facebook/react#28004
- facebook/react#28051
- facebook/react#28012
- facebook/react#28001
- facebook/react#28002
- facebook/react#27995
- facebook/react#28006
- facebook/react#28005
- facebook/react#28007
- facebook/react#28008
- facebook/react#28009
- facebook/react#28000
- facebook/react#28003
- facebook/react#27997
- facebook/react#27240
- facebook/react#27977
- facebook/react#27940
- facebook/react#27939
gnoff added a commit to vercel/next.js that referenced this pull request Feb 6, 2024
Updates React from 60a927d04 to 2bc7d336a

Also updates aliases for `react.shared-subset` to `react.react-server`

### React upstream changes

- facebook/react#28250
- facebook/react#28225
- facebook/react#28123
- facebook/react#28240
- facebook/react#28239
- facebook/react#28245
- facebook/react#28244
- facebook/react#28238
- facebook/react#28235
- facebook/react#28221
- facebook/react#28215
- facebook/react#28214
- facebook/react#28213
- facebook/react#28212
- facebook/react#28211
- facebook/react#28247
- facebook/react#28210
- facebook/react#28186
- facebook/react#28232
- facebook/react#28169
- facebook/react#28177
- facebook/react#28170
- facebook/react#28168
- facebook/react#28122
- facebook/react#27982
- facebook/react#28217
- facebook/react#28223
- facebook/react#28208
- facebook/react#28209
- facebook/react#28200
- facebook/react#28199
- facebook/react#28198
- facebook/react#28197
- facebook/react#28196
- facebook/react#28194
- facebook/react#28192
- facebook/react#28191
- facebook/react#28182
- facebook/react#28181
- facebook/react#28180
- facebook/react#28178
- facebook/react#28201
- facebook/react#28176
- facebook/react#28162
- facebook/react#28131
- facebook/react#28190
- facebook/react#28172
- facebook/react#28171
- facebook/react#28173
- facebook/react#28174
- facebook/react#28175
- facebook/react#28136
- facebook/react#28135
- facebook/react#28134
- facebook/react#28133
- facebook/react#28132
- facebook/react#28130
- facebook/react#28202
- facebook/react#28102
- facebook/react#28161
- facebook/react#28193
- facebook/react#28195
- facebook/react#28189
- facebook/react#28160
- facebook/react#28096
- facebook/react#28183
- facebook/react#28125
- facebook/react#28157
- facebook/react#28115
- facebook/react#28124
- facebook/react#28163
- facebook/react#28164
- facebook/react#28150
- facebook/react#28159
- facebook/react#28069
- facebook/react#28110
- facebook/react#28148
- facebook/react#28116
- facebook/react#28099
- facebook/react#28100
- facebook/react#28147
- facebook/react#28128
- facebook/react#28126
- facebook/react#28139
- facebook/react#28140
- facebook/react#28141
- facebook/react#28142
- facebook/react#28113
- facebook/react#28129
- facebook/react#28114
- facebook/react#28053
- facebook/react#28091
- facebook/react#28087
- facebook/react#28112
- facebook/react#28086
- facebook/react#28101
- facebook/react#28106
- facebook/react#28117
- facebook/react#28118
- facebook/react#28105
- facebook/react#27883
- facebook/react#28111
- facebook/react#28095
- facebook/react#28108
- facebook/react#28090
- facebook/react#28089
- facebook/react#28076
- facebook/react#28074
- facebook/react#28103
- facebook/react#28098
- facebook/react#28097
- facebook/react#28068
- facebook/react#28093
- facebook/react#28094
- facebook/react#28073
- facebook/react#28084
- facebook/react#28063
- facebook/react#28085
- facebook/react#28083
- facebook/react#28065
- facebook/react#28061
- facebook/react#28077
- facebook/react#28075
- facebook/react#28078
- facebook/react#28050
- facebook/react#28011
- facebook/react#28055
- facebook/react#28066
- facebook/react#28067
- facebook/react#28010
- facebook/react#27993
- facebook/react#28052
- facebook/react#28060
- facebook/react#28059
- facebook/react#28034
- facebook/react#28033
- facebook/react#28004
- facebook/react#28051
- facebook/react#28012
- facebook/react#28001
- facebook/react#28002
- facebook/react#27995
- facebook/react#28006
- facebook/react#28005
- facebook/react#28007
- facebook/react#28008
- facebook/react#28009
- facebook/react#28000
- facebook/react#28003
- facebook/react#27997
- facebook/react#27240
- facebook/react#27977
- facebook/react#27940
- facebook/react#27939
- facebook/react#28090
- facebook/react#28089
- facebook/react#28076
- facebook/react#28074
- facebook/react#28103
- facebook/react#28098
- facebook/react#28097
- facebook/react#28068
- facebook/react#28093
- facebook/react#28094
- facebook/react#28073
- facebook/react#28084
- facebook/react#28063
- facebook/react#28085
- facebook/react#28083
- facebook/react#28065
- facebook/react#28061
- facebook/react#28077
- facebook/react#28075
- facebook/react#28078
- facebook/react#28050
- facebook/react#28011
- facebook/react#28055
- facebook/react#28066
- facebook/react#28067
- facebook/react#28010
- facebook/react#27993
- facebook/react#28052
- facebook/react#28060
- facebook/react#28059
- facebook/react#28034
- facebook/react#28033
- facebook/react#28004
- facebook/react#28051
- facebook/react#28012
- facebook/react#28001
- facebook/react#28002
- facebook/react#27995
- facebook/react#28006
- facebook/react#28005
- facebook/react#28007
- facebook/react#28008
- facebook/react#28009
- facebook/react#28000
- facebook/react#28003
- facebook/react#27997
- facebook/react#27240
- facebook/react#27977
- facebook/react#27940
- facebook/react#27939

Closes NEXT-2331
EdisonVan pushed a commit to EdisonVan/react that referenced this pull request Apr 15, 2024
## Overview

Adds support for `ReactDOMClient` for  `ServerIntegration*` tests. 

Also converts tests that pass without any other changes. Will follow up
with other PRs for more complex cases.
EdisonVan pushed a commit to EdisonVan/react that referenced this pull request Apr 15, 2024
## Overview

Branched off facebook#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.
EdisonVan pushed a commit to EdisonVan/react that referenced this pull request Apr 15, 2024
## Overview

Branched off facebook#28130

In `hydrateRoot`, we now error if you pass `undefined`:

```
Warning: Must provide initial children as second argument to hydrateRoot. 
```

So we expect 1 error for this now.
EdisonVan pushed a commit to EdisonVan/react that referenced this pull request Apr 15, 2024
## Overview 

Branched off facebook#28130

## ~Failing~ Fixed by @eps1lon 

The tests are currently failing because of two tests covering special
characters. I've tried a few ways to fix, but I'm stuck and will need
some help understanding why they fail and how to fix.

---------

Co-authored-by: Sebastian Silbermann <sebastian.silbermann@klarna.com>
EdisonVan pushed a commit to EdisonVan/react that referenced this pull request Apr 15, 2024
…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 <sebastian.silbermann@klarna.com>
EdisonVan pushed a commit to EdisonVan/react that referenced this pull request Apr 15, 2024
## Overview

Branched off facebook#28130

## Why

In facebook#24276 we changed the new root
behavior to error when a client-render is forced for certain cases, so
these now expect a mismatch even though they're using
`suppressHydrationWarning`.
EdisonVan pushed a commit to EdisonVan/react that referenced this pull request Apr 15, 2024
…#28131)

## Overview 

Branched off facebook#28130

Converts to `createRoot`, with a few additional in-line conversions in
each file.
bigfootjon pushed a commit that referenced this pull request Apr 18, 2024
## Overview

Adds support for `ReactDOMClient` for  `ServerIntegration*` tests.

Also converts tests that pass without any other changes. Will follow up
with other PRs for more complex cases.

DiffTrain build for commit 6054be9.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
CLA Signed React Core Team Opened by a member of the React Core Team
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants