Add ReactDOMClient to ServerIntegrationTestUtils#28130
Conversation
806c110 to
233b65d
Compare
|
Comparing: 9aef5d2...e204d76 Critical size changesIncludes critical production bundles, as well as any change greater than 2%:
Significant size changesIncludes any change greater than 0.2%: Expand to show
|
233b65d to
e204d76
Compare
| if (ReactDOMClient) { | ||
| ReactDOMClient.hydrateRoot(domElement, reactElement, { | ||
| onRecoverableError: () => { | ||
| // TODO: assert on recoverable error count. |
There was a problem hiding this comment.
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; |
There was a problem hiding this comment.
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: https://github.com/facebook/react/blob/763612647ceb66d95f728af896ca5e18a8181db8/packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js#L1682
## 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.
## 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.
## 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 <[email protected]>
## 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 <[email protected]>
## Overview Branched off #28130 Converts to `createRoot`, with a few additional in-line conversions in each file.
## 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.
## 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.
## 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.
## 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 <[email protected]>
## 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 <[email protected]>
## Overview Branched off #28130 Converts to `createRoot`, with a few additional in-line conversions in each file.
- react/react#28250 - react/react#28225 - react/react#28123 - react/react#28240 - react/react#28239 - react/react#28245 - react/react#28244 - react/react#28238 - react/react#28235 - react/react#28221 - react/react#28215 - react/react#28214 - react/react#28213 - react/react#28212 - react/react#28211 - react/react#28247 - react/react#28210 - react/react#28186 - react/react#28232 - react/react#28169 - react/react#28177 - react/react#28170 - react/react#28168 - react/react#28122 - react/react#27982 - react/react#28217 - react/react#28223 - react/react#28208 - react/react#28209 - react/react#28200 - react/react#28199 - react/react#28198 - react/react#28197 - react/react#28196 - react/react#28194 - react/react#28192 - react/react#28191 - react/react#28182 - react/react#28181 - react/react#28180 - react/react#28178 - react/react#28201 - react/react#28176 - react/react#28162 - react/react#28131 - react/react#28190 - react/react#28172 - react/react#28171 - react/react#28173 - react/react#28174 - react/react#28175 - react/react#28136 - react/react#28135 - react/react#28134 - react/react#28133 - react/react#28132 - react/react#28130 - react/react#28202 - react/react#28102 - react/react#28161 - react/react#28193 - react/react#28195 - react/react#28189 - react/react#28160 - react/react#28096 - react/react#28183 - react/react#28125 - react/react#28157 - react/react#28115 - react/react#28124 - react/react#28163 - react/react#28164 - react/react#28150 - react/react#28159 - react/react#28069 - react/react#28110 - react/react#28148 - react/react#28116 - react/react#28099 - react/react#28100 - react/react#28147 - react/react#28128 - react/react#28126 - react/react#28139 - react/react#28140 - react/react#28141 - react/react#28142 - react/react#28113 - react/react#28129 - react/react#28114 - react/react#28053 - react/react#28091 - react/react#28087 - react/react#28112 - react/react#28086 - react/react#28101 - react/react#28106 - react/react#28117 - react/react#28118 - react/react#28105 - react/react#27883 - react/react#28111 - react/react#28095 - react/react#28108 - react/react#28090 - react/react#28089 - react/react#28076 - react/react#28074 - react/react#28103 - react/react#28098 - react/react#28097 - react/react#28068 - react/react#28093 - react/react#28094 - react/react#28073 - react/react#28084 - react/react#28063 - react/react#28085 - react/react#28083 - react/react#28065 - react/react#28061 - react/react#28077 - react/react#28075 - react/react#28078 - react/react#28050 - react/react#28011 - react/react#28055 - react/react#28066 - react/react#28067 - react/react#28010 - react/react#27993 - react/react#28052 - react/react#28060 - react/react#28059 - react/react#28034 - react/react#28033 - react/react#28004 - react/react#28051 - react/react#28012 - react/react#28001 - react/react#28002 - react/react#27995 - react/react#28006 - react/react#28005 - react/react#28007 - react/react#28008 - react/react#28009 - react/react#28000 - react/react#28003 - react/react#27997 - react/react#27240 - react/react#27977 - react/react#27940 - react/react#27939 - react/react#28090 - react/react#28089 - react/react#28076 - react/react#28074 - react/react#28103 - react/react#28098 - react/react#28097 - react/react#28068 - react/react#28093 - react/react#28094 - react/react#28073 - react/react#28084 - react/react#28063 - react/react#28085 - react/react#28083 - react/react#28065 - react/react#28061 - react/react#28077 - react/react#28075 - react/react#28078 - react/react#28050 - react/react#28011 - react/react#28055 - react/react#28066 - react/react#28067 - react/react#28010 - react/react#27993 - react/react#28052 - react/react#28060 - react/react#28059 - react/react#28034 - react/react#28033 - react/react#28004 - react/react#28051 - react/react#28012 - react/react#28001 - react/react#28002 - react/react#27995 - react/react#28006 - react/react#28005 - react/react#28007 - react/react#28008 - react/react#28009 - react/react#28000 - react/react#28003 - react/react#27997 - react/react#27240 - react/react#27977 - react/react#27940 - react/react#27939
Updates React from 60a927d04 to 2bc7d336a Also updates aliases for `react.shared-subset` to `react.react-server` ### React upstream changes - react/react#28250 - react/react#28225 - react/react#28123 - react/react#28240 - react/react#28239 - react/react#28245 - react/react#28244 - react/react#28238 - react/react#28235 - react/react#28221 - react/react#28215 - react/react#28214 - react/react#28213 - react/react#28212 - react/react#28211 - react/react#28247 - react/react#28210 - react/react#28186 - react/react#28232 - react/react#28169 - react/react#28177 - react/react#28170 - react/react#28168 - react/react#28122 - react/react#27982 - react/react#28217 - react/react#28223 - react/react#28208 - react/react#28209 - react/react#28200 - react/react#28199 - react/react#28198 - react/react#28197 - react/react#28196 - react/react#28194 - react/react#28192 - react/react#28191 - react/react#28182 - react/react#28181 - react/react#28180 - react/react#28178 - react/react#28201 - react/react#28176 - react/react#28162 - react/react#28131 - react/react#28190 - react/react#28172 - react/react#28171 - react/react#28173 - react/react#28174 - react/react#28175 - react/react#28136 - react/react#28135 - react/react#28134 - react/react#28133 - react/react#28132 - react/react#28130 - react/react#28202 - react/react#28102 - react/react#28161 - react/react#28193 - react/react#28195 - react/react#28189 - react/react#28160 - react/react#28096 - react/react#28183 - react/react#28125 - react/react#28157 - react/react#28115 - react/react#28124 - react/react#28163 - react/react#28164 - react/react#28150 - react/react#28159 - react/react#28069 - react/react#28110 - react/react#28148 - react/react#28116 - react/react#28099 - react/react#28100 - react/react#28147 - react/react#28128 - react/react#28126 - react/react#28139 - react/react#28140 - react/react#28141 - react/react#28142 - react/react#28113 - react/react#28129 - react/react#28114 - react/react#28053 - react/react#28091 - react/react#28087 - react/react#28112 - react/react#28086 - react/react#28101 - react/react#28106 - react/react#28117 - react/react#28118 - react/react#28105 - react/react#27883 - react/react#28111 - react/react#28095 - react/react#28108 - react/react#28090 - react/react#28089 - react/react#28076 - react/react#28074 - react/react#28103 - react/react#28098 - react/react#28097 - react/react#28068 - react/react#28093 - react/react#28094 - react/react#28073 - react/react#28084 - react/react#28063 - react/react#28085 - react/react#28083 - react/react#28065 - react/react#28061 - react/react#28077 - react/react#28075 - react/react#28078 - react/react#28050 - react/react#28011 - react/react#28055 - react/react#28066 - react/react#28067 - react/react#28010 - react/react#27993 - react/react#28052 - react/react#28060 - react/react#28059 - react/react#28034 - react/react#28033 - react/react#28004 - react/react#28051 - react/react#28012 - react/react#28001 - react/react#28002 - react/react#27995 - react/react#28006 - react/react#28005 - react/react#28007 - react/react#28008 - react/react#28009 - react/react#28000 - react/react#28003 - react/react#27997 - react/react#27240 - react/react#27977 - react/react#27940 - react/react#27939 - react/react#28090 - react/react#28089 - react/react#28076 - react/react#28074 - react/react#28103 - react/react#28098 - react/react#28097 - react/react#28068 - react/react#28093 - react/react#28094 - react/react#28073 - react/react#28084 - react/react#28063 - react/react#28085 - react/react#28083 - react/react#28065 - react/react#28061 - react/react#28077 - react/react#28075 - react/react#28078 - react/react#28050 - react/react#28011 - react/react#28055 - react/react#28066 - react/react#28067 - react/react#28010 - react/react#27993 - react/react#28052 - react/react#28060 - react/react#28059 - react/react#28034 - react/react#28033 - react/react#28004 - react/react#28051 - react/react#28012 - react/react#28001 - react/react#28002 - react/react#27995 - react/react#28006 - react/react#28005 - react/react#28007 - react/react#28008 - react/react#28009 - react/react#28000 - react/react#28003 - react/react#27997 - react/react#27240 - react/react#27977 - react/react#27940 - react/react#27939 Closes NEXT-2331
## 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.
## Overview Branched off react#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.
## Overview Branched off react#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.
## Overview Branched off react#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 <[email protected]>
## Overview Branched off react#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]>
## Overview Branched off react#28130 ## Why In react#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`.
) ## Overview Branched off react#28130 Converts to `createRoot`, with a few additional in-line conversions in each file.
## 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.
## Overview Branched off react/react#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. DiffTrain build for commit react/react@c42e7c7.
## Overview Branched off react/react#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 <[email protected]> DiffTrain build for commit react/react@c0d9277.
## Overview Branched off react/react#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. DiffTrain build for commit react/react@278199b.
## Overview Branched off react/react#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]> DiffTrain build for commit react/react@fa6674b.
## Overview Branched off react/react#28130 ## Why In react/react#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`. DiffTrain build for commit react/react@4bd5e3e.
## Overview Branched off react/react#28130 Converts to `createRoot`, with a few additional in-line conversions in each file. DiffTrain build for commit react/react@b25dcd3.
Overview
Adds support for
ReactDOMClientforServerIntegration*tests.Also converts tests that pass without any other changes. Will follow up with other PRs for more complex cases.