{"files":[{"status":"M","path":"packages\/react-dom\/src\/__tests__\/ReactErrorBoundaries-test.internal.js"}],"body":"","parents":["85cc01743bc992a689770a4f37e3d5441f14f082"],"patch":"diff --git a\/packages\/react-dom\/src\/__tests__\/ReactErrorBoundaries-test.internal.js b\/packages\/react-dom\/src\/__tests__\/ReactErrorBoundaries-test.internal.js\nindex 040234f5c8..403a3de7b6 100644\n--- a\/packages\/react-dom\/src\/__tests__\/ReactErrorBoundaries-test.internal.js\n+++ b\/packages\/react-dom\/src\/__tests__\/ReactErrorBoundaries-test.internal.js\n@@ -12,6 +12,7 @@\n let PropTypes;\n let React;\n let ReactDOM;\n+let ReactDOMClient;\n let act;\n let ReactFeatureFlags;\n let Scheduler;\n@@ -44,6 +45,7 @@ describe('ReactErrorBoundaries', () => {\n ReactFeatureFlags = require('shared\/ReactFeatureFlags');\n ReactFeatureFlags.replayFailedUnitOfWorkWithInvokeGuardedCallback = false;\n ReactDOM = require('react-dom');\n+ ReactDOMClient = require('react-dom\/client');\n React = require('react');\n act = require('internal-test-utils').act;\n Scheduler = require('scheduler');\n@@ -576,103 +578,139 @@ describe('ReactErrorBoundaries', () => {\n };\n });\n \n- it('does not swallow exceptions on mounting without boundaries', () => {\n+ it('does not swallow exceptions on mounting without boundaries', async () => {\n let container = document.createElement('div');\n- expect(() => {\n- ReactDOM.render(, container);\n- }).toThrow('Hello');\n+ let root = ReactDOMClient.createRoot(container);\n+ await expect(async () => {\n+ await act(async () => {\n+ root.render();\n+ });\n+ }).rejects.toThrow('Hello');\n \n container = document.createElement('div');\n- expect(() => {\n- ReactDOM.render(, container);\n- }).toThrow('Hello');\n+ root = ReactDOMClient.createRoot(container);\n+ await expect(async () => {\n+ await act(async () => {\n+ root.render();\n+ });\n+ }).rejects.toThrow('Hello');\n \n container = document.createElement('div');\n- expect(() => {\n- ReactDOM.render(, container);\n- }).toThrow('Hello');\n+ root = ReactDOMClient.createRoot(container);\n+ await expect(async () => {\n+ await act(async () => {\n+ root.render();\n+ });\n+ }).rejects.toThrow('Hello');\n });\n \n- it('does not swallow exceptions on updating without boundaries', () => {\n+ it('does not swallow exceptions on updating without boundaries', async () => {\n let container = document.createElement('div');\n- ReactDOM.render(, container);\n- expect(() => {\n- ReactDOM.render(, container);\n- }).toThrow('Hello');\n+ let root = ReactDOMClient.createRoot(container);\n+ await act(async () => {\n+ root.render();\n+ });\n+ await expect(async () => {\n+ await act(async () => {\n+ root.render();\n+ });\n+ }).rejects.toThrow('Hello');\n \n container = document.createElement('div');\n- ReactDOM.render(, container);\n- expect(() => {\n- ReactDOM.render(, container);\n- }).toThrow('Hello');\n+ root = ReactDOMClient.createRoot(container);\n+ await act(async () => {\n+ root.render();\n+ });\n+ await expect(async () => {\n+ await act(async () => {\n+ root.render();\n+ });\n+ }).rejects.toThrow('Hello');\n \n container = document.createElement('div');\n- ReactDOM.render(, container);\n- expect(() => {\n- ReactDOM.render(, container);\n- }).toThrow('Hello');\n+ root = ReactDOMClient.createRoot(container);\n+ await act(async () => {\n+ root.render();\n+ });\n+ await expect(async () => {\n+ await act(async () => {\n+ root.render();\n+ });\n+ }).rejects.toThrow('Hello');\n });\n \n- it('does not swallow exceptions on unmounting without boundaries', () => {\n+ it('does not swallow exceptions on unmounting without boundaries', async () => {\n const container = document.createElement('div');\n- ReactDOM.render(, container);\n- expect(() => {\n- ReactDOM.unmountComponentAtNode(container);\n- }).toThrow('Hello');\n+ const root = ReactDOMClient.createRoot(container);\n+ await act(async () => {\n+ root.render();\n+ });\n+ await expect(async () => {\n+ root.unmount();\n+ }).rejects.toThrow('Hello');\n });\n \n- it('prevents errors from leaking into other roots', () => {\n+ it('prevents errors from leaking into other roots', async () => {\n const container1 = document.createElement('div');\n+ const root1 = ReactDOMClient.createRoot(container1);\n const container2 = document.createElement('div');\n+ const root2 = ReactDOMClient.createRoot(container2);\n const container3 = document.createElement('div');\n+ const root3 = ReactDOMClient.createRoot(container3);\n \n- ReactDOM.render(Before 1<\/span>, container1);\n- expect(() => {\n- ReactDOM.render(, container2);\n- }).toThrow('Hello');\n- ReactDOM.render(\n- \n- \n- <\/ErrorBoundary>,\n- container3,\n- );\n+ await act(async () => {\n+ root1.render(Before 1<\/span>);\n+ });\n+ await expect(async () => {\n+ await act(async () => {\n+ root2.render();\n+ });\n+ }).rejects.toThrow('Hello');\n+ await act(async () => {\n+ root3.render(\n+ \n+ \n+ <\/ErrorBoundary>,\n+ );\n+ });\n expect(container1.firstChild.textContent).toBe('Before 1');\n expect(container2.firstChild).toBe(null);\n expect(container3.firstChild.textContent).toBe('Caught an error: Hello.');\n \n- ReactDOM.render(After 1<\/span>, container1);\n- ReactDOM.render(After 2<\/span>, container2);\n- ReactDOM.render(\n- After 3<\/ErrorBoundary>,\n- container3,\n- );\n+ await act(async () => {\n+ root1.render(After 1<\/span>);\n+ });\n+ await act(async () => {\n+ root2.render(After 2<\/span>);\n+ });\n+ await act(async () => {\n+ root3.render(After 3<\/ErrorBoundary>);\n+ });\n expect(container1.firstChild.textContent).toBe('After 1');\n expect(container2.firstChild.textContent).toBe('After 2');\n expect(container3.firstChild.textContent).toBe('After 3');\n-\n- ReactDOM.unmountComponentAtNode(container1);\n- ReactDOM.unmountComponentAtNode(container2);\n- ReactDOM.unmountComponentAtNode(container3);\n+ root1.unmount();\n+ root2.unmount();\n+ root3.unmount();\n expect(container1.firstChild).toBe(null);\n expect(container2.firstChild).toBe(null);\n expect(container3.firstChild).toBe(null);\n });\n \n- it('logs a single error when using error boundary', () => {\n+ it('logs a single error when using error boundary', async () => {\n const container = document.createElement('div');\n+ const root = ReactDOMClient.createRoot(container);\n spyOnDev(console, 'error');\n- ReactDOM.render(\n- \n- \n- <\/ErrorBoundary>,\n- container,\n- );\n+ await act(async () => {\n+ root.render(\n+ \n+ \n+ <\/ErrorBoundary>,\n+ );\n+ });\n if (__DEV__) {\n- expect(console.error).toHaveBeenCalledTimes(2);\n+ expect(console.error).toHaveBeenCalledTimes(1);\n expect(console.error.mock.calls[0][0]).toContain(\n- 'ReactDOM.render is no longer supported',\n- );\n- expect(console.error.mock.calls[1][0]).toContain(\n 'The above error occurred in the component:',\n );\n }\n@@ -689,21 +727,33 @@ describe('ReactErrorBoundaries', () => {\n 'ErrorBoundary static getDerivedStateFromError',\n 'ErrorBoundary componentWillMount',\n 'ErrorBoundary render error',\n+ \/\/ logs for error retry\n+ 'ErrorBoundary constructor',\n+ 'ErrorBoundary componentWillMount',\n+ 'ErrorBoundary render success',\n+ 'BrokenRender constructor',\n+ 'BrokenRender componentWillMount',\n+ 'BrokenRender render [!]',\n+ 'ErrorBoundary static getDerivedStateFromError',\n+ 'ErrorBoundary componentWillMount',\n+ 'ErrorBoundary render error',\n 'ErrorBoundary componentDidMount',\n ]);\n \n- ReactDOM.unmountComponentAtNode(container);\n+ root.unmount();\n assertLog(['ErrorBoundary componentWillUnmount']);\n });\n \n- it('renders an error state if child throws in render', () => {\n+ it('renders an error state if child throws in render', async () => {\n const container = document.createElement('div');\n- ReactDOM.render(\n- \n- \n- <\/ErrorBoundary>,\n- container,\n- );\n+ const root = ReactDOMClient.createRoot(container);\n+ await act(async () => {\n+ root.render(\n+ \n+ \n+ <\/ErrorBoundary>,\n+ );\n+ });\n expect(container.firstChild.textContent).toBe('Caught an error: Hello.');\n assertLog([\n 'ErrorBoundary constructor',\n@@ -716,21 +766,33 @@ describe('ReactErrorBoundaries', () => {\n 'ErrorBoundary static getDerivedStateFromError',\n 'ErrorBoundary componentWillMount',\n 'ErrorBoundary render error',\n+ \/\/ logs for error retry\n+ 'ErrorBoundary constructor',\n+ 'ErrorBoundary componentWillMount',\n+ 'ErrorBoundary render success',\n+ 'BrokenRender constructor',\n+ 'BrokenRender componentWillMount',\n+ 'BrokenRender render [!]',\n+ 'ErrorBoundary static getDerivedStateFromError',\n+ 'ErrorBoundary componentWillMount',\n+ 'ErrorBoundary render error',\n 'ErrorBoundary componentDidMount',\n ]);\n \n- ReactDOM.unmountComponentAtNode(container);\n+ root.unmount();\n assertLog(['ErrorBoundary componentWillUnmount']);\n });\n \n- it('renders an error state if child throws in constructor', () => {\n+ it('renders an error state if child throws in constructor', async () => {\n const container = document.createElement('div');\n- ReactDOM.render(\n- \n- \n- <\/ErrorBoundary>,\n- container,\n- );\n+ const root = ReactDOMClient.createRoot(container);\n+ await act(async () => {\n+ root.render(\n+ \n+ \n+ <\/ErrorBoundary>,\n+ );\n+ });\n expect(container.firstChild.textContent).toBe('Caught an error: Hello.');\n assertLog([\n 'ErrorBoundary constructor',\n@@ -741,21 +803,31 @@ describe('ReactErrorBoundaries', () => {\n 'ErrorBoundary static getDerivedStateFromError',\n 'ErrorBoundary componentWillMount',\n 'ErrorBoundary render error',\n+ \/\/ logs for error retry\n+ 'ErrorBoundary constructor',\n+ 'ErrorBoundary componentWillMount',\n+ 'ErrorBoundary render success',\n+ 'BrokenConstructor constructor [!]',\n+ 'ErrorBoundary static getDerivedStateFromError',\n+ 'ErrorBoundary componentWillMount',\n+ 'ErrorBoundary render error',\n 'ErrorBoundary componentDidMount',\n ]);\n \n- ReactDOM.unmountComponentAtNode(container);\n+ root.unmount();\n assertLog(['ErrorBoundary componentWillUnmount']);\n });\n \n- it('renders an error state if child throws in componentWillMount', () => {\n+ it('renders an error state if child throws in componentWillMount', async () => {\n const container = document.createElement('div');\n- ReactDOM.render(\n- \n- \n- <\/ErrorBoundary>,\n- container,\n- );\n+ const root = ReactDOMClient.createRoot(container);\n+ await act(async () => {\n+ root.render(\n+ \n+ \n+ <\/ErrorBoundary>,\n+ );\n+ });\n expect(container.firstChild.textContent).toBe('Caught an error: Hello.');\n assertLog([\n 'ErrorBoundary constructor',\n@@ -767,15 +839,24 @@ describe('ReactErrorBoundaries', () => {\n 'ErrorBoundary static getDerivedStateFromError',\n 'ErrorBoundary componentWillMount',\n 'ErrorBoundary render error',\n+ \/\/ logs for error retry\n+ 'ErrorBoundary constructor',\n+ 'ErrorBoundary componentWillMount',\n+ 'ErrorBoundary render success',\n+ 'BrokenComponentWillMount constructor',\n+ 'BrokenComponentWillMount componentWillMount [!]',\n+ 'ErrorBoundary static getDerivedStateFromError',\n+ 'ErrorBoundary componentWillMount',\n+ 'ErrorBoundary render error',\n 'ErrorBoundary componentDidMount',\n ]);\n \n- ReactDOM.unmountComponentAtNode(container);\n+ root.unmount();\n assertLog(['ErrorBoundary componentWillUnmount']);\n });\n \n \/\/ @gate !disableLegacyContext || !__DEV__\n- it('renders an error state if context provider throws in componentWillMount', () => {\n+ it('renders an error state if context provider throws in componentWillMount', async () => {\n class BrokenComponentWillMountWithContext extends React.Component {\n static childContextTypes = {foo: PropTypes.number};\n getChildContext() {\n@@ -790,18 +871,20 @@ describe('ReactErrorBoundaries', () => {\n }\n \n const container = document.createElement('div');\n- ReactDOM.render(\n- \n- \n- <\/ErrorBoundary>,\n- container,\n- );\n+ const root = ReactDOMClient.createRoot(container);\n+ await act(async () => {\n+ root.render(\n+ \n+ \n+ <\/ErrorBoundary>,\n+ );\n+ });\n expect(container.firstChild.textContent).toBe('Caught an error: Hello.');\n });\n \n \/\/ @gate !disableModulePatternComponents\n \/\/ @gate !disableLegacyContext\n- it('renders an error state if module-style context provider throws in componentWillMount', () => {\n+ it('renders an error state if module-style context provider throws in componentWillMount', async () => {\n function BrokenComponentWillMountWithContext() {\n return {\n getChildContext() {\n@@ -820,13 +903,16 @@ describe('ReactErrorBoundaries', () => {\n };\n \n const container = document.createElement('div');\n- expect(() =>\n- ReactDOM.render(\n- \n- \n- <\/ErrorBoundary>,\n- container,\n- ),\n+ const root = ReactDOMClient.createRoot(container);\n+ await expect(\n+ async () =>\n+ await act(async () => {\n+ root.render(\n+ \n+ \n+ <\/ErrorBoundary>,\n+ );\n+ }),\n ).toErrorDev(\n 'Warning: The component appears to be a function component that ' +\n 'returns a class instance. ' +\n@@ -839,19 +925,34 @@ describe('ReactErrorBoundaries', () => {\n expect(container.firstChild.textContent).toBe('Caught an error: Hello.');\n });\n \n- it('mounts the error message if mounting fails', () => {\n+ it('mounts the error message if mounting fails', async () => {\n function renderError(error) {\n return ;\n }\n \n const container = document.createElement('div');\n- ReactDOM.render(\n- \n- \n- <\/ErrorBoundary>,\n- container,\n- );\n+ const root = ReactDOMClient.createRoot(container);\n+ await act(async () => {\n+ root.render(\n+ \n+ \n+ <\/ErrorBoundary>,\n+ );\n+ });\n assertLog([\n+ 'ErrorBoundary constructor',\n+ 'ErrorBoundary componentWillMount',\n+ 'ErrorBoundary render success',\n+ 'BrokenRender constructor',\n+ 'BrokenRender componentWillMount',\n+ 'BrokenRender render [!]',\n+ 'ErrorBoundary static getDerivedStateFromError',\n+ 'ErrorBoundary componentWillMount',\n+ 'ErrorBoundary render error',\n+ 'ErrorMessage constructor',\n+ 'ErrorMessage componentWillMount',\n+ 'ErrorMessage render',\n+ \/\/ logs for error retry\n 'ErrorBoundary constructor',\n 'ErrorBoundary componentWillMount',\n 'ErrorBoundary render success',\n@@ -868,23 +969,25 @@ describe('ReactErrorBoundaries', () => {\n 'ErrorBoundary componentDidMount',\n ]);\n \n- ReactDOM.unmountComponentAtNode(container);\n+ root.unmount();\n assertLog([\n 'ErrorBoundary componentWillUnmount',\n 'ErrorMessage componentWillUnmount',\n ]);\n });\n \n- it('propagates errors on retry on mounting', () => {\n+ it('propagates errors on retry on mounting', async () => {\n const container = document.createElement('div');\n- ReactDOM.render(\n- \n- \n- \n- <\/RetryErrorBoundary>\n- <\/ErrorBoundary>,\n- container,\n- );\n+ const root = ReactDOMClient.createRoot(container);\n+ await act(async () => {\n+ root.render(\n+ \n+ \n+ \n+ <\/RetryErrorBoundary>\n+ <\/ErrorBoundary>,\n+ );\n+ });\n expect(container.firstChild.textContent).toBe('Caught an error: Hello.');\n assertLog([\n 'ErrorBoundary constructor',\n@@ -907,21 +1010,42 @@ describe('ReactErrorBoundaries', () => {\n 'ErrorBoundary static getDerivedStateFromError',\n 'ErrorBoundary componentWillMount',\n 'ErrorBoundary render error',\n+ \/\/ logs for error retry\n+ 'ErrorBoundary constructor',\n+ 'ErrorBoundary componentWillMount',\n+ 'ErrorBoundary render success',\n+ 'RetryErrorBoundary constructor',\n+ 'RetryErrorBoundary componentWillMount',\n+ 'RetryErrorBoundary render',\n+ 'BrokenRender constructor',\n+ 'BrokenRender componentWillMount',\n+ 'BrokenRender render [!]',\n+ 'RetryErrorBoundary static getDerivedStateFromError [!]',\n+ 'RetryErrorBoundary componentWillMount',\n+ 'RetryErrorBoundary render',\n+ 'BrokenRender constructor',\n+ 'BrokenRender componentWillMount',\n+ 'BrokenRender render [!]',\n+ 'ErrorBoundary static getDerivedStateFromError',\n+ 'ErrorBoundary componentWillMount',\n+ 'ErrorBoundary render error',\n 'ErrorBoundary componentDidMount',\n ]);\n \n- ReactDOM.unmountComponentAtNode(container);\n+ root.unmount();\n assertLog(['ErrorBoundary componentWillUnmount']);\n });\n \n- it('propagates errors inside boundary during componentWillMount', () => {\n+ it('propagates errors inside boundary during componentWillMount', async () => {\n const container = document.createElement('div');\n- ReactDOM.render(\n- \n- \n- <\/ErrorBoundary>,\n- container,\n- );\n+ const root = ReactDOMClient.createRoot(container);\n+ await act(async () => {\n+ root.render(\n+ \n+ \n+ <\/ErrorBoundary>,\n+ );\n+ });\n expect(container.firstChild.textContent).toBe('Caught an error: Hello.');\n assertLog([\n 'ErrorBoundary constructor',\n@@ -933,23 +1057,34 @@ describe('ReactErrorBoundaries', () => {\n 'ErrorBoundary static getDerivedStateFromError',\n 'ErrorBoundary componentWillMount',\n 'ErrorBoundary render error',\n+ \/\/ logs for error retry\n+ 'ErrorBoundary constructor',\n+ 'ErrorBoundary componentWillMount',\n+ 'ErrorBoundary render success',\n+ 'BrokenComponentWillMountErrorBoundary constructor',\n+ 'BrokenComponentWillMountErrorBoundary componentWillMount [!]',\n+ 'ErrorBoundary static getDerivedStateFromError',\n+ 'ErrorBoundary componentWillMount',\n+ 'ErrorBoundary render error',\n 'ErrorBoundary componentDidMount',\n ]);\n \n- ReactDOM.unmountComponentAtNode(container);\n+ root.unmount();\n assertLog(['ErrorBoundary componentWillUnmount']);\n });\n \n- it('propagates errors inside boundary while rendering error state', () => {\n+ it('propagates errors inside boundary while rendering error state', async () => {\n const container = document.createElement('div');\n- ReactDOM.render(\n- \n- \n- \n- <\/BrokenRenderErrorBoundary>\n- <\/ErrorBoundary>,\n- container,\n- );\n+ const root = ReactDOMClient.createRoot(container);\n+ await act(async () => {\n+ root.render(\n+ \n+ \n+ \n+ <\/BrokenRenderErrorBoundary>\n+ <\/ErrorBoundary>,\n+ );\n+ });\n expect(container.firstChild.textContent).toBe('Caught an error: Hello.');\n assertLog([\n 'ErrorBoundary constructor',\n@@ -969,23 +1104,41 @@ describe('ReactErrorBoundaries', () => {\n 'ErrorBoundary static getDerivedStateFromError',\n 'ErrorBoundary componentWillMount',\n 'ErrorBoundary render error',\n+ \/\/ logs for error retry\n+ 'ErrorBoundary constructor',\n+ 'ErrorBoundary componentWillMount',\n+ 'ErrorBoundary render success',\n+ 'BrokenRenderErrorBoundary constructor',\n+ 'BrokenRenderErrorBoundary componentWillMount',\n+ 'BrokenRenderErrorBoundary render success',\n+ 'BrokenRender constructor',\n+ 'BrokenRender componentWillMount',\n+ 'BrokenRender render [!]',\n+ 'BrokenRenderErrorBoundary static getDerivedStateFromError',\n+ 'BrokenRenderErrorBoundary componentWillMount',\n+ 'BrokenRenderErrorBoundary render error [!]',\n+ 'ErrorBoundary static getDerivedStateFromError',\n+ 'ErrorBoundary componentWillMount',\n+ 'ErrorBoundary render error',\n 'ErrorBoundary componentDidMount',\n ]);\n \n- ReactDOM.unmountComponentAtNode(container);\n+ root.unmount();\n assertLog(['ErrorBoundary componentWillUnmount']);\n });\n \n- it('does not call componentWillUnmount when aborting initial mount', () => {\n+ it('does not call componentWillUnmount when aborting initial mount', async () => {\n const container = document.createElement('div');\n- ReactDOM.render(\n- \n- \n- \n- \n- <\/ErrorBoundary>,\n- container,\n- );\n+ const root = ReactDOMClient.createRoot(container);\n+ await act(async () => {\n+ root.render(\n+ \n+ \n+ \n+ \n+ <\/ErrorBoundary>,\n+ );\n+ });\n expect(container.firstChild.textContent).toBe('Caught an error: Hello.');\n assertLog([\n 'ErrorBoundary constructor',\n@@ -1004,14 +1157,27 @@ describe('ReactErrorBoundaries', () => {\n 'ErrorBoundary static getDerivedStateFromError',\n 'ErrorBoundary componentWillMount',\n 'ErrorBoundary render error',\n+ \/\/ logs for error retry\n+ 'ErrorBoundary constructor',\n+ 'ErrorBoundary componentWillMount',\n+ 'ErrorBoundary render success',\n+ 'Normal constructor',\n+ 'Normal componentWillMount',\n+ 'Normal render',\n+ 'BrokenRender constructor',\n+ 'BrokenRender componentWillMount',\n+ 'BrokenRender render [!]',\n+ 'ErrorBoundary static getDerivedStateFromError',\n+ 'ErrorBoundary componentWillMount',\n+ 'ErrorBoundary render error',\n 'ErrorBoundary componentDidMount',\n ]);\n \n- ReactDOM.unmountComponentAtNode(container);\n+ root.unmount();\n assertLog(['ErrorBoundary componentWillUnmount']);\n });\n \n- it('resets callback refs if mounting aborts', () => {\n+ it('resets callback refs if mounting aborts', async () => {\n function childRef(x) {\n Scheduler.log('Child ref is set to ' + x);\n }\n@@ -1020,13 +1186,15 @@ describe('ReactErrorBoundaries', () => {\n }\n \n const container = document.createElement('div');\n- ReactDOM.render(\n- \n-

\n- \n- <\/ErrorBoundary>,\n- container,\n- );\n+ const root = ReactDOMClient.createRoot(container);\n+ await act(async () => {\n+ root.render(\n+ \n+

\n+ \n+ <\/ErrorBoundary>,\n+ );\n+ });\n expect(container.textContent).toBe('Caught an error: Hello.');\n assertLog([\n 'ErrorBoundary constructor',\n@@ -1039,29 +1207,41 @@ describe('ReactErrorBoundaries', () => {\n 'ErrorBoundary static getDerivedStateFromError',\n 'ErrorBoundary componentWillMount',\n 'ErrorBoundary render error',\n+ \/\/ logs for error retry\n+ 'ErrorBoundary constructor',\n+ 'ErrorBoundary componentWillMount',\n+ 'ErrorBoundary render success',\n+ 'BrokenRender constructor',\n+ 'BrokenRender componentWillMount',\n+ 'BrokenRender render [!]',\n+ 'ErrorBoundary static getDerivedStateFromError',\n+ 'ErrorBoundary componentWillMount',\n+ 'ErrorBoundary render error',\n 'Error message ref is set to [object HTMLDivElement]',\n 'ErrorBoundary componentDidMount',\n ]);\n \n- ReactDOM.unmountComponentAtNode(container);\n+ root.unmount();\n assertLog([\n 'ErrorBoundary componentWillUnmount',\n 'Error message ref is set to null',\n ]);\n });\n \n- it('resets object refs if mounting aborts', () => {\n+ it('resets object refs if mounting aborts', async () => {\n const childRef = React.createRef();\n const errorMessageRef = React.createRef();\n \n const container = document.createElement('div');\n- ReactDOM.render(\n- \n-

\n- \n- <\/ErrorBoundary>,\n- container,\n- );\n+ const root = ReactDOMClient.createRoot(container);\n+ await act(async () => {\n+ root.render(\n+ \n+

\n+ \n+ <\/ErrorBoundary>,\n+ );\n+ });\n expect(container.textContent).toBe('Caught an error: Hello.');\n assertLog([\n 'ErrorBoundary constructor',\n@@ -1074,25 +1254,37 @@ describe('ReactErrorBoundaries', () => {\n 'ErrorBoundary static getDerivedStateFromError',\n 'ErrorBoundary componentWillMount',\n 'ErrorBoundary render error',\n+ \/\/ logs for error retry\n+ 'ErrorBoundary constructor',\n+ 'ErrorBoundary componentWillMount',\n+ 'ErrorBoundary render success',\n+ 'BrokenRender constructor',\n+ 'BrokenRender componentWillMount',\n+ 'BrokenRender render [!]',\n+ 'ErrorBoundary static getDerivedStateFromError',\n+ 'ErrorBoundary componentWillMount',\n+ 'ErrorBoundary render error',\n 'ErrorBoundary componentDidMount',\n ]);\n expect(errorMessageRef.current.toString()).toEqual(\n '[object HTMLDivElement]',\n );\n \n- ReactDOM.unmountComponentAtNode(container);\n+ root.unmount();\n assertLog(['ErrorBoundary componentWillUnmount']);\n expect(errorMessageRef.current).toEqual(null);\n });\n \n- it('successfully mounts if no error occurs', () => {\n+ it('successfully mounts if no error occurs', async () => {\n const container = document.createElement('div');\n- ReactDOM.render(\n- \n-

Mounted successfully.<\/div>\n- <\/ErrorBoundary>,\n- container,\n- );\n+ const root = ReactDOMClient.createRoot(container);\n+ await act(async () => {\n+ root.render(\n+ \n+

Mounted successfully.<\/div>\n+ <\/ErrorBoundary>,\n+ );\n+ });\n expect(container.firstChild.textContent).toBe('Mounted successfully.');\n assertLog([\n 'ErrorBoundary constructor',\n@@ -1101,27 +1293,30 @@ describe('ReactErrorBoundaries', () => {\n 'ErrorBoundary componentDidMount',\n ]);\n \n- ReactDOM.unmountComponentAtNode(container);\n+ root.unmount();\n assertLog(['ErrorBoundary componentWillUnmount']);\n });\n \n- it('catches if child throws in constructor during update', () => {\n+ it('catches if child throws in constructor during update', async () => {\n const container = document.createElement('div');\n- ReactDOM.render(\n- \n- \n- <\/ErrorBoundary>,\n- container,\n- );\n+ const root = ReactDOMClient.createRoot(container);\n+ await act(async () => {\n+ root.render(\n+ \n+ \n+ <\/ErrorBoundary>,\n+ );\n+ });\n Scheduler.unstable_clearLog();\n- ReactDOM.render(\n- \n- \n- \n- \n- <\/ErrorBoundary>,\n- container,\n- );\n+ await act(async () => {\n+ root.render(\n+ \n+ \n+ \n+ \n+ <\/ErrorBoundary>,\n+ );\n+ });\n expect(container.textContent).toBe('Caught an error: Hello.');\n assertLog([\n 'ErrorBoundary componentWillReceiveProps',\n@@ -1141,32 +1336,49 @@ describe('ReactErrorBoundaries', () => {\n \/\/ Render the error message\n 'ErrorBoundary componentWillUpdate',\n 'ErrorBoundary render error',\n+ \/\/ logs for error retry\n+ 'ErrorBoundary componentWillReceiveProps',\n+ 'ErrorBoundary componentWillUpdate',\n+ 'ErrorBoundary render success',\n+ 'Normal componentWillReceiveProps',\n+ 'Normal componentWillUpdate',\n+ 'Normal render',\n+ 'Normal2 constructor',\n+ 'Normal2 componentWillMount',\n+ 'Normal2 render',\n+ 'BrokenConstructor constructor [!]',\n+ 'ErrorBoundary static getDerivedStateFromError',\n+ 'ErrorBoundary componentWillUpdate',\n+ 'ErrorBoundary render error',\n 'Normal componentWillUnmount',\n 'ErrorBoundary componentDidUpdate',\n ]);\n \n- ReactDOM.unmountComponentAtNode(container);\n+ root.unmount();\n assertLog(['ErrorBoundary componentWillUnmount']);\n });\n \n- it('catches if child throws in componentWillMount during update', () => {\n+ it('catches if child throws in componentWillMount during update', async () => {\n const container = document.createElement('div');\n- ReactDOM.render(\n- \n- \n- <\/ErrorBoundary>,\n- container,\n- );\n+ const root = ReactDOMClient.createRoot(container);\n+ await act(async () => {\n+ root.render(\n+ \n+ \n+ <\/ErrorBoundary>,\n+ );\n+ });\n \n Scheduler.unstable_clearLog();\n- ReactDOM.render(\n- \n- \n- \n- \n- <\/ErrorBoundary>,\n- container,\n- );\n+ await act(async () => {\n+ root.render(\n+ \n+ \n+ \n+ \n+ <\/ErrorBoundary>,\n+ );\n+ });\n expect(container.textContent).toBe('Caught an error: Hello.');\n assertLog([\n 'ErrorBoundary componentWillReceiveProps',\n@@ -1187,32 +1399,50 @@ describe('ReactErrorBoundaries', () => {\n \/\/ Render the error message\n 'ErrorBoundary componentWillUpdate',\n 'ErrorBoundary render error',\n+ \/\/ logs for error retry\n+ 'ErrorBoundary componentWillReceiveProps',\n+ 'ErrorBoundary componentWillUpdate',\n+ 'ErrorBoundary render success',\n+ 'Normal componentWillReceiveProps',\n+ 'Normal componentWillUpdate',\n+ 'Normal render',\n+ 'Normal2 constructor',\n+ 'Normal2 componentWillMount',\n+ 'Normal2 render',\n+ 'BrokenComponentWillMount constructor',\n+ 'BrokenComponentWillMount componentWillMount [!]',\n+ 'ErrorBoundary static getDerivedStateFromError',\n+ 'ErrorBoundary componentWillUpdate',\n+ 'ErrorBoundary render error',\n 'Normal componentWillUnmount',\n 'ErrorBoundary componentDidUpdate',\n ]);\n \n- ReactDOM.unmountComponentAtNode(container);\n+ root.unmount();\n assertLog(['ErrorBoundary componentWillUnmount']);\n });\n \n- it('catches if child throws in componentWillReceiveProps during update', () => {\n+ it('catches if child throws in componentWillReceiveProps during update', async () => {\n const container = document.createElement('div');\n- ReactDOM.render(\n- \n- \n- \n- <\/ErrorBoundary>,\n- container,\n- );\n+ const root = ReactDOMClient.createRoot(container);\n+ await act(async () => {\n+ root.render(\n+ \n+ \n+ \n+ <\/ErrorBoundary>,\n+ );\n+ });\n \n Scheduler.unstable_clearLog();\n- ReactDOM.render(\n- \n- \n- \n- <\/ErrorBoundary>,\n- container,\n- );\n+ await act(async () => {\n+ root.render(\n+ \n+ \n+ \n+ <\/ErrorBoundary>,\n+ );\n+ });\n expect(container.textContent).toBe('Caught an error: Hello.');\n assertLog([\n 'ErrorBoundary componentWillReceiveProps',\n@@ -1228,33 +1458,47 @@ describe('ReactErrorBoundaries', () => {\n \/\/ Render the error message\n 'ErrorBoundary componentWillUpdate',\n 'ErrorBoundary render error',\n+ \/\/ logs for error retry\n+ 'ErrorBoundary componentWillReceiveProps',\n+ 'ErrorBoundary componentWillUpdate',\n+ 'ErrorBoundary render success',\n+ 'Normal componentWillReceiveProps',\n+ 'Normal componentWillUpdate',\n+ 'Normal render',\n+ 'BrokenComponentWillReceiveProps componentWillReceiveProps [!]',\n+ 'ErrorBoundary static getDerivedStateFromError',\n+ 'ErrorBoundary componentWillUpdate',\n+ 'ErrorBoundary render error',\n 'Normal componentWillUnmount',\n 'BrokenComponentWillReceiveProps componentWillUnmount',\n 'ErrorBoundary componentDidUpdate',\n ]);\n \n- ReactDOM.unmountComponentAtNode(container);\n+ root.unmount();\n assertLog(['ErrorBoundary componentWillUnmount']);\n });\n \n- it('catches if child throws in componentWillUpdate during update', () => {\n+ it('catches if child throws in componentWillUpdate during update', async () => {\n const container = document.createElement('div');\n- ReactDOM.render(\n- \n- \n- \n- <\/ErrorBoundary>,\n- container,\n- );\n+ const root = ReactDOMClient.createRoot(container);\n+ await act(async () => {\n+ root.render(\n+ \n+ \n+ \n+ <\/ErrorBoundary>,\n+ );\n+ });\n \n Scheduler.unstable_clearLog();\n- ReactDOM.render(\n- \n- \n- \n- <\/ErrorBoundary>,\n- container,\n- );\n+ await act(async () => {\n+ root.render(\n+ \n+ \n+ \n+ <\/ErrorBoundary>,\n+ );\n+ });\n expect(container.textContent).toBe('Caught an error: Hello.');\n assertLog([\n 'ErrorBoundary componentWillReceiveProps',\n@@ -1263,10 +1507,22 @@ describe('ReactErrorBoundaries', () => {\n 'Normal componentWillReceiveProps',\n 'Normal componentWillUpdate',\n 'Normal render',\n- \/\/ BrokenComponentWillUpdate will abort rendering:\n+ \/\/ BrokenComponentWillUpdate will abort rendering:\n+ 'BrokenComponentWillUpdate componentWillReceiveProps',\n+ 'BrokenComponentWillUpdate componentWillUpdate [!]',\n+ \/\/ Handle the error\n+ 'ErrorBoundary static getDerivedStateFromError',\n+ 'ErrorBoundary componentWillUpdate',\n+ 'ErrorBoundary render error',\n+ \/\/ logs for error retry\n+ 'ErrorBoundary componentWillReceiveProps',\n+ 'ErrorBoundary componentWillUpdate',\n+ 'ErrorBoundary render success',\n+ 'Normal componentWillReceiveProps',\n+ 'Normal componentWillUpdate',\n+ 'Normal render',\n 'BrokenComponentWillUpdate componentWillReceiveProps',\n 'BrokenComponentWillUpdate componentWillUpdate [!]',\n- \/\/ Handle the error\n 'ErrorBoundary static getDerivedStateFromError',\n 'ErrorBoundary componentWillUpdate',\n 'ErrorBoundary render error',\n@@ -1275,28 +1531,31 @@ describe('ReactErrorBoundaries', () => {\n 'ErrorBoundary componentDidUpdate',\n ]);\n \n- ReactDOM.unmountComponentAtNode(container);\n+ root.unmount();\n assertLog(['ErrorBoundary componentWillUnmount']);\n });\n \n- it('catches if child throws in render during update', () => {\n+ it('catches if child throws in render during update', async () => {\n const container = document.createElement('div');\n- ReactDOM.render(\n- \n- \n- <\/ErrorBoundary>,\n- container,\n- );\n+ const root = ReactDOMClient.createRoot(container);\n+ await act(async () => {\n+ root.render(\n+ \n+ \n+ <\/ErrorBoundary>,\n+ );\n+ });\n \n Scheduler.unstable_clearLog();\n- ReactDOM.render(\n- \n- \n- \n- \n- <\/ErrorBoundary>,\n- container,\n- );\n+ await act(async () => {\n+ root.render(\n+ \n+ \n+ \n+ \n+ <\/ErrorBoundary>,\n+ );\n+ });\n expect(container.textContent).toBe('Caught an error: Hello.');\n assertLog([\n 'ErrorBoundary componentWillReceiveProps',\n@@ -1317,15 +1576,31 @@ describe('ReactErrorBoundaries', () => {\n 'ErrorBoundary static getDerivedStateFromError',\n 'ErrorBoundary componentWillUpdate',\n 'ErrorBoundary render error',\n+ \/\/ logs for error retry\n+ 'ErrorBoundary componentWillReceiveProps',\n+ 'ErrorBoundary componentWillUpdate',\n+ 'ErrorBoundary render success',\n+ 'Normal componentWillReceiveProps',\n+ 'Normal componentWillUpdate',\n+ 'Normal render',\n+ 'Normal2 constructor',\n+ 'Normal2 componentWillMount',\n+ 'Normal2 render',\n+ 'BrokenRender constructor',\n+ 'BrokenRender componentWillMount',\n+ 'BrokenRender render [!]',\n+ 'ErrorBoundary static getDerivedStateFromError',\n+ 'ErrorBoundary componentWillUpdate',\n+ 'ErrorBoundary render error',\n 'Normal componentWillUnmount',\n 'ErrorBoundary componentDidUpdate',\n ]);\n \n- ReactDOM.unmountComponentAtNode(container);\n+ root.unmount();\n assertLog(['ErrorBoundary componentWillUnmount']);\n });\n \n- it('keeps refs up-to-date during updates', () => {\n+ it('keeps refs up-to-date during updates', async () => {\n function child1Ref(x) {\n Scheduler.log('Child1 ref is set to ' + x);\n }\n@@ -1337,12 +1612,14 @@ describe('ReactErrorBoundaries', () => {\n }\n \n const container = document.createElement('div');\n- ReactDOM.render(\n- \n-

\n- <\/ErrorBoundary>,\n- container,\n- );\n+ const root = ReactDOMClient.createRoot(container);\n+ await act(async () => {\n+ root.render(\n+ \n+

\n+ <\/ErrorBoundary>,\n+ );\n+ });\n assertLog([\n 'ErrorBoundary constructor',\n 'ErrorBoundary componentWillMount',\n@@ -1351,14 +1628,15 @@ describe('ReactErrorBoundaries', () => {\n 'ErrorBoundary componentDidMount',\n ]);\n \n- ReactDOM.render(\n- \n-

\n-

\n- \n- <\/ErrorBoundary>,\n- container,\n- );\n+ await act(async () => {\n+ root.render(\n+ \n+

\n+

\n+ \n+ <\/ErrorBoundary>,\n+ );\n+ });\n expect(container.textContent).toBe('Caught an error: Hello.');\n assertLog([\n 'ErrorBoundary componentWillReceiveProps',\n@@ -1372,6 +1650,16 @@ describe('ReactErrorBoundaries', () => {\n 'ErrorBoundary static getDerivedStateFromError',\n 'ErrorBoundary componentWillUpdate',\n 'ErrorBoundary render error',\n+ \/\/ logs for error retry\n+ 'ErrorBoundary componentWillReceiveProps',\n+ 'ErrorBoundary componentWillUpdate',\n+ 'ErrorBoundary render success',\n+ 'BrokenRender constructor',\n+ 'BrokenRender componentWillMount',\n+ 'BrokenRender render [!]',\n+ 'ErrorBoundary static getDerivedStateFromError',\n+ 'ErrorBoundary componentWillUpdate',\n+ 'ErrorBoundary render error',\n \/\/ Update Child1 ref since Child1 has been unmounted\n \/\/ Child2 ref is never set because its mounting aborted\n 'Child1 ref is set to null',\n@@ -1379,31 +1667,34 @@ describe('ReactErrorBoundaries', () => {\n 'ErrorBoundary componentDidUpdate',\n ]);\n \n- ReactDOM.unmountComponentAtNode(container);\n+ root.unmount();\n assertLog([\n 'ErrorBoundary componentWillUnmount',\n 'Error message ref is set to null',\n ]);\n });\n \n- it('recovers from componentWillUnmount errors on update', () => {\n+ it('recovers from componentWillUnmount errors on update', async () => {\n const container = document.createElement('div');\n- ReactDOM.render(\n- \n- \n- \n- \n- <\/ErrorBoundary>,\n- container,\n- );\n+ const root = ReactDOMClient.createRoot(container);\n+ await act(async () => {\n+ root.render(\n+ \n+ \n+ \n+ \n+ <\/ErrorBoundary>,\n+ );\n+ });\n \n Scheduler.unstable_clearLog();\n- ReactDOM.render(\n- \n- \n- <\/ErrorBoundary>,\n- container,\n- );\n+ await act(async () => {\n+ root.render(\n+ \n+ \n+ <\/ErrorBoundary>,\n+ );\n+ });\n expect(container.textContent).toBe('Caught an error: Hello.');\n assertLog([\n 'ErrorBoundary componentWillReceiveProps',\n@@ -1437,31 +1728,34 @@ describe('ReactErrorBoundaries', () => {\n 'ErrorBoundary componentDidUpdate',\n ]);\n \n- ReactDOM.unmountComponentAtNode(container);\n+ root.unmount();\n assertLog(['ErrorBoundary componentWillUnmount']);\n });\n \n- it('recovers from nested componentWillUnmount errors on update', () => {\n+ it('recovers from nested componentWillUnmount errors on update', async () => {\n const container = document.createElement('div');\n- ReactDOM.render(\n- \n- \n+ const root = ReactDOMClient.createRoot(container);\n+ await act(async () => {\n+ root.render(\n+ \n+ \n+ \n+ <\/Normal>\n \n- <\/Normal>\n- \n- <\/ErrorBoundary>,\n- container,\n- );\n+ <\/ErrorBoundary>,\n+ );\n+ });\n \n Scheduler.unstable_clearLog();\n- ReactDOM.render(\n- \n- \n- \n- <\/Normal>\n- <\/ErrorBoundary>,\n- container,\n- );\n+ await act(async () => {\n+ root.render(\n+ \n+ \n+ \n+ <\/Normal>\n+ <\/ErrorBoundary>,\n+ );\n+ });\n expect(container.textContent).toBe('Caught an error: Hello.');\n assertLog([\n 'ErrorBoundary componentWillReceiveProps',\n@@ -1496,11 +1790,11 @@ describe('ReactErrorBoundaries', () => {\n 'ErrorBoundary componentDidUpdate',\n ]);\n \n- ReactDOM.unmountComponentAtNode(container);\n+ root.unmount();\n assertLog(['ErrorBoundary componentWillUnmount']);\n });\n \n- it('picks the right boundary when handling unmounting errors', () => {\n+ it('picks the right boundary when handling unmounting errors', async () => {\n function renderInnerError(error) {\n return

Caught an inner error: {error.message}.<\/div>;\n }\n@@ -1509,31 +1803,34 @@ describe('ReactErrorBoundaries', () => {\n }\n \n const container = document.createElement('div');\n- ReactDOM.render(\n- \n+ const root = ReactDOMClient.createRoot(container);\n+ await act(async () => {\n+ root.render(\n \n- \n- <\/ErrorBoundary>\n- <\/ErrorBoundary>,\n- container,\n- );\n+ logName=\"OuterErrorBoundary\"\n+ renderError={renderOuterError}>\n+ \n+ \n+ <\/ErrorBoundary>\n+ <\/ErrorBoundary>,\n+ );\n+ });\n \n Scheduler.unstable_clearLog();\n- ReactDOM.render(\n- \n+ await act(async () => {\n+ root.render(\n \n- <\/ErrorBoundary>,\n- container,\n- );\n+ logName=\"OuterErrorBoundary\"\n+ renderError={renderOuterError}>\n+ \n+ <\/ErrorBoundary>,\n+ );\n+ });\n expect(container.textContent).toBe('Caught an inner error: Hello.');\n assertLog([\n \/\/ Update outer boundary\n@@ -1559,39 +1856,43 @@ describe('ReactErrorBoundaries', () => {\n 'InnerErrorBoundary componentDidUpdate',\n ]);\n \n- ReactDOM.unmountComponentAtNode(container);\n+ root.unmount();\n assertLog([\n 'OuterErrorBoundary componentWillUnmount',\n 'InnerErrorBoundary componentWillUnmount',\n ]);\n });\n \n- it('can recover from error state', () => {\n+ it('can recover from error state', async () => {\n const container = document.createElement('div');\n- ReactDOM.render(\n- \n- \n- <\/ErrorBoundary>,\n- container,\n- );\n+ const root = ReactDOMClient.createRoot(container);\n+ await act(async () => {\n+ root.render(\n+ \n+ \n+ <\/ErrorBoundary>,\n+ );\n+ });\n \n- ReactDOM.render(\n- \n- \n- <\/ErrorBoundary>,\n- container,\n- );\n+ await act(async () => {\n+ root.render(\n+ \n+ \n+ <\/ErrorBoundary>,\n+ );\n+ });\n \/\/ Error boundary doesn't retry by itself:\n expect(container.textContent).toBe('Caught an error: Hello.');\n \n \/\/ Force the success path:\n Scheduler.unstable_clearLog();\n- ReactDOM.render(\n- \n- \n- <\/ErrorBoundary>,\n- container,\n- );\n+ await act(async () => {\n+ root.render(\n+ \n+ \n+ <\/ErrorBoundary>,\n+ );\n+ });\n expect(container.textContent).not.toContain('Caught an error');\n assertLog([\n 'ErrorBoundary componentWillReceiveProps',\n@@ -1606,75 +1907,88 @@ describe('ReactErrorBoundaries', () => {\n 'ErrorBoundary componentDidUpdate',\n ]);\n \n- ReactDOM.unmountComponentAtNode(container);\n+ root.unmount();\n assertLog([\n 'ErrorBoundary componentWillUnmount',\n 'Normal componentWillUnmount',\n ]);\n });\n \n- it('can update multiple times in error state', () => {\n+ it('can update multiple times in error state', async () => {\n const container = document.createElement('div');\n- ReactDOM.render(\n- \n- \n- <\/ErrorBoundary>,\n- container,\n- );\n+ const root = ReactDOMClient.createRoot(container);\n+ await act(async () => {\n+ root.render(\n+ \n+ \n+ <\/ErrorBoundary>,\n+ );\n+ });\n expect(container.textContent).toBe('Caught an error: Hello.');\n \n- ReactDOM.render(\n- \n- \n- <\/ErrorBoundary>,\n- container,\n- );\n+ await act(async () => {\n+ root.render(\n+ \n+ \n+ <\/ErrorBoundary>,\n+ );\n+ });\n expect(container.textContent).toBe('Caught an error: Hello.');\n \n- ReactDOM.render(

Other screen<\/div>, container);\n+ await act(async () => {\n+ root.render(

Other screen<\/div>);\n+ });\n expect(container.textContent).toBe('Other screen');\n \n- ReactDOM.unmountComponentAtNode(container);\n+ root.unmount();\n });\n \n- it(\"doesn't get into inconsistent state during removals\", () => {\n+ it(\"doesn't get into inconsistent state during removals\", async () => {\n const container = document.createElement('div');\n- ReactDOM.render(\n- \n- \n- \n- \n- <\/ErrorBoundary>,\n- container,\n- );\n+ const root = ReactDOMClient.createRoot(container);\n+ await act(async () => {\n+ root.render(\n+ \n+ \n+ \n+ \n+ <\/ErrorBoundary>,\n+ );\n+ });\n \n- ReactDOM.render(, container);\n+ await act(async () => {\n+ root.render();\n+ });\n expect(container.textContent).toBe('Caught an error: Hello.');\n \n Scheduler.unstable_clearLog();\n- ReactDOM.unmountComponentAtNode(container);\n+ root.unmount();\n assertLog(['ErrorBoundary componentWillUnmount']);\n });\n \n- it(\"doesn't get into inconsistent state during additions\", () => {\n+ it(\"doesn't get into inconsistent state during additions\", async () => {\n const container = document.createElement('div');\n- ReactDOM.render(, container);\n- ReactDOM.render(\n- \n- \n- \n- \n- <\/ErrorBoundary>,\n- container,\n- );\n+ const root = ReactDOMClient.createRoot(container);\n+ await act(async () => {\n+ root.render();\n+ });\n+ await act(async () => {\n+ root.render(\n+ \n+ \n+ \n+ \n+ <\/ErrorBoundary>,\n+ );\n+ });\n expect(container.textContent).toBe('Caught an error: Hello.');\n \n Scheduler.unstable_clearLog();\n- ReactDOM.unmountComponentAtNode(container);\n+ root.unmount();\n assertLog(['ErrorBoundary componentWillUnmount']);\n });\n \n- it(\"doesn't get into inconsistent state during reorders\", () => {\n+ it(\"doesn't get into inconsistent state during reorders\", async () => {\n function getAMixOfNormalAndBrokenRenderElements() {\n const elements = [];\n for (let i = 0; i < 100; i++) {\n@@ -1704,25 +2018,32 @@ describe('ReactErrorBoundaries', () => {\n \n let fail = false;\n const container = document.createElement('div');\n- ReactDOM.render(\n- {getAMixOfNormalAndBrokenRenderElements()}<\/ErrorBoundary>,\n- container,\n- );\n+ const root = ReactDOMClient.createRoot(container);\n+ await act(async () => {\n+ root.render(\n+ \n+ {getAMixOfNormalAndBrokenRenderElements()}\n+ <\/ErrorBoundary>,\n+ );\n+ });\n expect(container.textContent).not.toContain('Caught an error');\n \n fail = true;\n- ReactDOM.render(\n- {getAMixOfNormalAndBrokenRenderElements()}<\/ErrorBoundary>,\n- container,\n- );\n+ await act(async () => {\n+ root.render(\n+ \n+ {getAMixOfNormalAndBrokenRenderElements()}\n+ <\/ErrorBoundary>,\n+ );\n+ });\n expect(container.textContent).toBe('Caught an error: Hello.');\n \n Scheduler.unstable_clearLog();\n- ReactDOM.unmountComponentAtNode(container);\n+ root.unmount();\n assertLog(['ErrorBoundary componentWillUnmount']);\n });\n \n- it('catches errors originating downstream', () => {\n+ it('catches errors originating downstream', async () => {\n let fail = false;\n class Stateful extends React.Component {\n state = {shouldThrow: false};\n@@ -1738,43 +2059,38 @@ describe('ReactErrorBoundaries', () => {\n \n let statefulInst;\n const container = document.createElement('div');\n- ReactDOM.render(\n- \n- (statefulInst = inst)} \/>\n- <\/ErrorBoundary>,\n- container,\n- );\n+ const root = ReactDOMClient.createRoot(container);\n+ await act(async () => {\n+ root.render(\n+ \n+ (statefulInst = inst)} \/>\n+ <\/ErrorBoundary>,\n+ );\n+ });\n \n Scheduler.unstable_clearLog();\n expect(() => {\n fail = true;\n statefulInst.forceUpdate();\n }).not.toThrow();\n-\n- assertLog([\n- 'Stateful render [!]',\n- 'ErrorBoundary static getDerivedStateFromError',\n- 'ErrorBoundary componentWillUpdate',\n- 'ErrorBoundary render error',\n- 'ErrorBoundary componentDidUpdate',\n- ]);\n-\n- ReactDOM.unmountComponentAtNode(container);\n+ root.unmount();\n assertLog(['ErrorBoundary componentWillUnmount']);\n });\n \n- it('catches errors in componentDidMount', () => {\n+ it('catches errors in componentDidMount', async () => {\n const container = document.createElement('div');\n- ReactDOM.render(\n- \n- \n- \n- <\/BrokenComponentWillUnmount>\n- \n- \n- <\/ErrorBoundary>,\n- container,\n- );\n+ const root = ReactDOMClient.createRoot(container);\n+ await act(async () => {\n+ root.render(\n+ \n+ \n+ \n+ <\/BrokenComponentWillUnmount>\n+ \n+ \n+ <\/ErrorBoundary>,\n+ );\n+ });\n assertLog([\n 'ErrorBoundary constructor',\n 'ErrorBoundary componentWillMount',\n@@ -1817,26 +2133,29 @@ describe('ReactErrorBoundaries', () => {\n 'ErrorBoundary componentDidUpdate',\n ]);\n \n- ReactDOM.unmountComponentAtNode(container);\n+ root.unmount();\n assertLog(['ErrorBoundary componentWillUnmount']);\n });\n \n- it('catches errors in componentDidUpdate', () => {\n+ it('catches errors in componentDidUpdate', async () => {\n const container = document.createElement('div');\n- ReactDOM.render(\n- \n- \n- <\/ErrorBoundary>,\n- container,\n- );\n+ const root = ReactDOMClient.createRoot(container);\n+ await act(async () => {\n+ root.render(\n+ \n+ \n+ <\/ErrorBoundary>,\n+ );\n+ });\n \n Scheduler.unstable_clearLog();\n- ReactDOM.render(\n- \n- \n- <\/ErrorBoundary>,\n- container,\n- );\n+ await act(async () => {\n+ root.render(\n+ \n+ \n+ <\/ErrorBoundary>,\n+ );\n+ });\n assertLog([\n 'ErrorBoundary componentWillReceiveProps',\n 'ErrorBoundary componentWillUpdate',\n@@ -1855,33 +2174,29 @@ describe('ReactErrorBoundaries', () => {\n 'ErrorBoundary componentDidUpdate',\n ]);\n \n- ReactDOM.unmountComponentAtNode(container);\n+ root.unmount();\n assertLog(['ErrorBoundary componentWillUnmount']);\n });\n \n it('catches errors in useEffect', async () => {\n const container = document.createElement('div');\n+ const root = ReactDOMClient.createRoot(container);\n await act(() => {\n- ReactDOM.render(\n+ root.render(\n \n Initial value<\/BrokenUseEffect>\n <\/ErrorBoundary>,\n- container,\n );\n- assertLog([\n- 'ErrorBoundary constructor',\n- 'ErrorBoundary componentWillMount',\n- 'ErrorBoundary render success',\n- 'BrokenUseEffect render',\n- 'ErrorBoundary componentDidMount',\n- ]);\n-\n- expect(container.firstChild.textContent).toBe('Initial value');\n- Scheduler.unstable_clearLog();\n });\n \n \/\/ verify flushed passive effects and handle the error\n assertLog([\n+ \/\/ logs for error retry\n+ 'ErrorBoundary constructor',\n+ 'ErrorBoundary componentWillMount',\n+ 'ErrorBoundary render success',\n+ 'BrokenUseEffect render',\n+ 'ErrorBoundary componentDidMount',\n 'BrokenUseEffect useEffect [!]',\n \/\/ Handle the error\n 'ErrorBoundary static getDerivedStateFromError',\n@@ -1889,18 +2204,19 @@ describe('ReactErrorBoundaries', () => {\n 'ErrorBoundary render error',\n 'ErrorBoundary componentDidUpdate',\n ]);\n-\n expect(container.firstChild.textContent).toBe('Caught an error: Hello.');\n });\n \n- it('catches errors in useLayoutEffect', () => {\n+ it('catches errors in useLayoutEffect', async () => {\n const container = document.createElement('div');\n- ReactDOM.render(\n- \n- Initial value<\/BrokenUseLayoutEffect>\n- <\/ErrorBoundary>,\n- container,\n- );\n+ const root = ReactDOMClient.createRoot(container);\n+ await act(async () => {\n+ root.render(\n+ \n+ Initial value<\/BrokenUseLayoutEffect>\n+ <\/ErrorBoundary>,\n+ );\n+ });\n assertLog([\n 'ErrorBoundary constructor',\n 'ErrorBoundary componentWillMount',\n@@ -1920,18 +2236,20 @@ describe('ReactErrorBoundaries', () => {\n expect(container.firstChild.textContent).toBe('Caught an error: Hello.');\n });\n \n- it('propagates errors inside boundary during componentDidMount', () => {\n+ it('propagates errors inside boundary during componentDidMount', async () => {\n const container = document.createElement('div');\n- ReactDOM.render(\n- \n- (\n-

We should never catch our own error: {error.message}.<\/div>\n- )}\n- \/>\n- <\/ErrorBoundary>,\n- container,\n- );\n+ const root = ReactDOMClient.createRoot(container);\n+ await act(async () => {\n+ root.render(\n+ \n+ (\n+

We should never catch our own error: {error.message}.<\/div>\n+ )}\n+ \/>\n+ <\/ErrorBoundary>,\n+ );\n+ });\n expect(container.firstChild.textContent).toBe('Caught an error: Hello.');\n assertLog([\n 'ErrorBoundary constructor',\n@@ -1952,11 +2270,11 @@ describe('ReactErrorBoundaries', () => {\n 'ErrorBoundary componentDidUpdate',\n ]);\n \n- ReactDOM.unmountComponentAtNode(container);\n+ root.unmount();\n assertLog(['ErrorBoundary componentWillUnmount']);\n });\n \n- it('calls static getDerivedStateFromError for each error that is captured', () => {\n+ it('calls static getDerivedStateFromError for each error that is captured', async () => {\n function renderUnmountError(error) {\n return

Caught an unmounting error: {error.message}.<\/div>;\n }\n@@ -1965,40 +2283,43 @@ describe('ReactErrorBoundaries', () => {\n }\n \n const container = document.createElement('div');\n- ReactDOM.render(\n- \n- \n- \n- \n- <\/ErrorBoundary>\n- \n- \n- \n- <\/ErrorBoundary>\n- <\/ErrorBoundary>,\n- container,\n- );\n+ const root = ReactDOMClient.createRoot(container);\n+ await act(async () => {\n+ root.render(\n+ \n+ \n+ \n+ \n+ <\/ErrorBoundary>\n+ \n+ \n+ \n+ <\/ErrorBoundary>\n+ <\/ErrorBoundary>,\n+ );\n+ });\n \n Scheduler.unstable_clearLog();\n- ReactDOM.render(\n- \n- \n- \n- \n- \n- <\/ErrorBoundary>\n- <\/ErrorBoundary>,\n- container,\n- );\n+ await act(async () => {\n+ root.render(\n+ \n+ \n+ \n+ \n+ \n+ <\/ErrorBoundary>\n+ <\/ErrorBoundary>,\n+ );\n+ });\n \n expect(container.firstChild.textContent).toBe(\n 'Caught an unmounting error: E2.' + 'Caught an updating error: E4.',\n@@ -2048,7 +2369,7 @@ describe('ReactErrorBoundaries', () => {\n 'InnerUpdateBoundary componentDidUpdate',\n ]);\n \n- ReactDOM.unmountComponentAtNode(container);\n+ root.unmount();\n assertLog([\n 'OuterErrorBoundary componentWillUnmount',\n 'InnerUnmountBoundary componentWillUnmount',\n@@ -2056,7 +2377,7 @@ describe('ReactErrorBoundaries', () => {\n ]);\n });\n \n- it('discards a bad root if the root component fails', () => {\n+ it('discards a bad root if the root component fails', async () => {\n const X = null;\n const Y = undefined;\n let err1;\n@@ -2064,7 +2385,13 @@ describe('ReactErrorBoundaries', () => {\n \n try {\n const container = document.createElement('div');\n- expect(() => ReactDOM.render(, container)).toErrorDev(\n+ const root = ReactDOMClient.createRoot(container);\n+ await expect(\n+ async () =>\n+ await act(async () => {\n+ root.render(, container);\n+ }),\n+ ).toErrorDev(\n 'React.createElement: type is invalid -- expected a string ' +\n '(for built-in components) or a class\/function ' +\n '(for composite components) but got: null.',\n@@ -2074,7 +2401,13 @@ describe('ReactErrorBoundaries', () => {\n }\n try {\n const container = document.createElement('div');\n- expect(() => ReactDOM.render(, container)).toErrorDev(\n+ const root = ReactDOMClient.createRoot(container);\n+ await expect(\n+ async () =>\n+ await act(async () => {\n+ root.render(, container);\n+ }),\n+ ).toErrorDev(\n 'React.createElement: type is invalid -- expected a string ' +\n '(for built-in components) or a class\/function ' +\n '(for composite components) but got: undefined.',\n@@ -2087,19 +2420,23 @@ describe('ReactErrorBoundaries', () => {\n expect(err2.message).toMatch(\/got: undefined\/);\n });\n \n- it('renders empty output if error boundary does not handle the error', () => {\n+ it('renders empty output if error boundary does not handle the error', async () => {\n const container = document.createElement('div');\n- expect(() =>\n- ReactDOM.render(\n-

\n- Sibling\n- \n- \n- <\/NoopErrorBoundary>\n- <\/div>,\n- container,\n- ),\n- ).toThrow('Hello');\n+ const root = ReactDOMClient.createRoot(container);\n+\n+ await expect(async () => {\n+ await act(async () => {\n+ root.render(\n+

\n+ Sibling\n+ \n+ \n+ <\/NoopErrorBoundary>\n+ <\/div>,\n+ );\n+ });\n+ }).rejects.toThrow('Hello');\n+\n expect(container.innerHTML).toBe('');\n assertLog([\n 'NoopErrorBoundary constructor',\n@@ -2114,10 +2451,22 @@ describe('ReactErrorBoundaries', () => {\n 'BrokenRender constructor',\n 'BrokenRender componentWillMount',\n 'BrokenRender render [!]',\n+ \/\/ logs for error retry\n+ 'NoopErrorBoundary constructor',\n+ 'NoopErrorBoundary componentWillMount',\n+ 'NoopErrorBoundary render',\n+ 'BrokenRender constructor',\n+ 'BrokenRender componentWillMount',\n+ 'BrokenRender render [!]',\n+ 'NoopErrorBoundary static getDerivedStateFromError',\n+ 'NoopErrorBoundary render',\n+ 'BrokenRender constructor',\n+ 'BrokenRender componentWillMount',\n+ 'BrokenRender render [!]',\n ]);\n });\n \n- it('passes first error when two errors happen in commit', () => {\n+ it('passes first error when two errors happen in commit', async () => {\n const errors = [];\n let caughtError;\n class Parent extends React.Component {\n@@ -2140,10 +2489,13 @@ describe('ReactErrorBoundaries', () => {\n }\n \n const container = document.createElement('div');\n+ const root = ReactDOMClient.createRoot(container);\n try {\n \/\/ Here, we test the behavior where there is no error boundary and we\n \/\/ delegate to the host root.\n- ReactDOM.render(, container);\n+ await act(async () => {\n+ root.render();\n+ });\n } catch (e) {\n if (e.message !== 'parent sad' && e.message !== 'child sad') {\n throw e;\n@@ -2156,19 +2508,22 @@ describe('ReactErrorBoundaries', () => {\n expect(caughtError.message).toBe('child sad');\n });\n \n- it('propagates uncaught error inside unbatched initial mount', () => {\n+ it('propagates uncaught error inside unbatched initial mount', async () => {\n function Foo() {\n throw new Error('foo error');\n }\n const container = document.createElement('div');\n- expect(() => {\n- ReactDOM.unstable_batchedUpdates(() => {\n- ReactDOM.render(, container);\n+ const root = ReactDOMClient.createRoot(container);\n+ await expect(async () => {\n+ await ReactDOM.unstable_batchedUpdates(async () => {\n+ await act(async () => {\n+ root.render();\n+ });\n });\n- }).toThrow('foo error');\n+ }).rejects.toThrow('foo error');\n });\n \n- it('handles errors that occur in before-mutation commit hook', () => {\n+ it('handles errors that occur in before-mutation commit hook', async () => {\n const errors = [];\n let caughtError;\n class Parent extends React.Component {\n@@ -2193,9 +2548,14 @@ describe('ReactErrorBoundaries', () => {\n }\n \n const container = document.createElement('div');\n- ReactDOM.render(, container);\n+ const root = ReactDOMClient.createRoot(container);\n+ await act(async () => {\n+ root.render();\n+ });\n try {\n- ReactDOM.render(, container);\n+ await act(async () => {\n+ root.render();\n+ });\n } catch (e) {\n if (e.message !== 'parent sad' && e.message !== 'child sad') {\n throw e;\n@@ -2208,7 +2568,7 @@ describe('ReactErrorBoundaries', () => {\n expect(caughtError.message).toBe('child sad');\n });\n \n- it('should warn if an error boundary with only componentDidCatch does not update state', () => {\n+ it('should warn if an error boundary with only componentDidCatch does not update state', async () => {\n class InvalidErrorBoundary extends React.Component {\n componentDidCatch(error, info) {\n \/\/ This component does not define getDerivedStateFromError().\n@@ -2225,13 +2585,15 @@ describe('ReactErrorBoundaries', () => {\n };\n \n const container = document.createElement('div');\n- expect(() => {\n- ReactDOM.render(\n- \n- \n- <\/InvalidErrorBoundary>,\n- container,\n- );\n+ const root = ReactDOMClient.createRoot(container);\n+ await expect(async () => {\n+ await act(async () => {\n+ root.render(\n+ \n+ \n+ <\/InvalidErrorBoundary>,\n+ );\n+ });\n }).toErrorDev(\n 'InvalidErrorBoundary: Error boundaries should implement getDerivedStateFromError(). ' +\n 'In that method, return a state update to display an error message or fallback UI.',\n@@ -2239,7 +2601,7 @@ describe('ReactErrorBoundaries', () => {\n expect(container.textContent).toBe('');\n });\n \n- it('should call both componentDidCatch and getDerivedStateFromError if both exist on a component', () => {\n+ it('should call both componentDidCatch and getDerivedStateFromError if both exist on a component', async () => {\n let componentDidCatchError, getDerivedStateFromErrorError;\n class ErrorBoundaryWithBothMethods extends React.Component {\n state = {error: null};\n@@ -2261,34 +2623,39 @@ describe('ReactErrorBoundaries', () => {\n };\n \n const container = document.createElement('div');\n- ReactDOM.render(\n- \n- \n- <\/ErrorBoundaryWithBothMethods>,\n- container,\n- );\n+ const root = ReactDOMClient.createRoot(container);\n+ await act(async () => {\n+ root.render(\n+ \n+ \n+ <\/ErrorBoundaryWithBothMethods>,\n+ );\n+ });\n expect(container.textContent).toBe('ErrorBoundary');\n expect(componentDidCatchError).toBe(thrownError);\n expect(getDerivedStateFromErrorError).toBe(thrownError);\n });\n \n- it('should catch errors from invariants in completion phase', () => {\n+ it('should catch errors from invariants in completion phase', async () => {\n const container = document.createElement('div');\n- ReactDOM.render(\n- \n- \n-

\n- <\/input>\n- <\/ErrorBoundary>,\n- container,\n- );\n+ const root = ReactDOMClient.createRoot(container);\n+ await act(async () => {\n+ root.render(\n+ \n+ \n+

\n+ <\/input>\n+ <\/ErrorBoundary>,\n+ );\n+ });\n expect(container.textContent).toContain(\n 'Caught an error: input is a void element tag',\n );\n });\n \n- it('should catch errors from errors in the throw phase from boundaries', () => {\n+ it('should catch errors from errors in the throw phase from boundaries', async () => {\n const container = document.createElement('div');\n+ const root = ReactDOMClient.createRoot(container);\n \n const thrownError = new Error('original error');\n const Throws = () => {\n@@ -2304,22 +2671,24 @@ describe('ReactErrorBoundaries', () => {\n }\n }\n \n- ReactDOM.render(\n- \n- \n- \n- <\/EvilErrorBoundary>\n- <\/ErrorBoundary>,\n- container,\n- );\n+ await act(async () => {\n+ root.render(\n+ \n+ \n+ \n+ <\/EvilErrorBoundary>\n+ <\/ErrorBoundary>,\n+ );\n+ });\n \n expect(container.textContent).toContain(\n 'Caught an error: gotta catch em all',\n );\n });\n \n- it('should protect errors from errors in the stack generation', () => {\n+ it('should protect errors from errors in the stack generation', async () => {\n const container = document.createElement('div');\n+ const root = ReactDOMClient.createRoot(container);\n \n const evilError = {\n message: 'gotta catch em all',\n@@ -2340,19 +2709,22 @@ describe('ReactErrorBoundaries', () => {\n return ;\n }\n \n- ReactDOM.render(\n- \n- \n- <\/ErrorBoundary>,\n- container,\n- );\n+ await expect(async () => {\n+ await act(async () => {\n+ root.render(\n+ \n+ \n+ <\/ErrorBoundary>,\n+ );\n+ });\n+ }).rejects.toThrow('gotta catch em all');\n \n expect(container.textContent).toContain(\n 'Caught an error: gotta catch em all.',\n );\n });\n \n- it('catches errors thrown in componentWillUnmount', () => {\n+ it('catches errors thrown in componentWillUnmount', async () => {\n class LocalErrorBoundary extends React.Component {\n state = {error: null};\n static getDerivedStateFromError(error) {\n@@ -2392,16 +2764,18 @@ describe('ReactErrorBoundaries', () => {\n }\n \n const container = document.createElement('div');\n-\n- ReactDOM.render(\n- \n- \n- \n- \n- <\/LocalErrorBoundary>\n- <\/LocalErrorBoundary>,\n- container,\n- );\n+ const root = ReactDOMClient.createRoot(container);\n+\n+ await act(async () => {\n+ root.render(\n+ \n+ \n+ \n+ \n+ <\/LocalErrorBoundary>\n+ <\/LocalErrorBoundary>,\n+ );\n+ });\n \n expect(container.firstChild.textContent).toBe('sibling');\n expect(container.lastChild.textContent).toBe('broken');\n@@ -2412,12 +2786,13 @@ describe('ReactErrorBoundaries', () => {\n 'BrokenComponentWillUnmount render',\n ]);\n \n- ReactDOM.render(\n- \n- \n- <\/LocalErrorBoundary>,\n- container,\n- );\n+ await act(async () => {\n+ root.render(\n+ \n+ \n+ <\/LocalErrorBoundary>,\n+ );\n+ });\n \n \/\/ React should skip over the unmounting boundary and find the nearest still-mounted boundary.\n expect(container.firstChild.textContent).toBe('OuterFallback');\n@@ -2432,7 +2807,7 @@ describe('ReactErrorBoundaries', () => {\n ]);\n });\n \n- it('catches errors thrown while detaching refs', () => {\n+ it('catches errors thrown while detaching refs', async () => {\n class LocalErrorBoundary extends React.Component {\n state = {error: null};\n static getDerivedStateFromError(error) {\n@@ -2474,16 +2849,18 @@ describe('ReactErrorBoundaries', () => {\n }\n \n const container = document.createElement('div');\n-\n- ReactDOM.render(\n- \n- \n- \n- \n- <\/LocalErrorBoundary>\n- <\/LocalErrorBoundary>,\n- container,\n- );\n+ const root = ReactDOMClient.createRoot(container);\n+\n+ await act(async () => {\n+ root.render(\n+ \n+ \n+ \n+ \n+ <\/LocalErrorBoundary>\n+ <\/LocalErrorBoundary>,\n+ );\n+ });\n \n expect(container.firstChild.textContent).toBe('sibling');\n expect(container.lastChild.textContent).toBe('ref');\n@@ -2495,12 +2872,13 @@ describe('ReactErrorBoundaries', () => {\n 'LocalBrokenCallbackRef ref true',\n ]);\n \n- ReactDOM.render(\n- \n- \n- <\/LocalErrorBoundary>,\n- container,\n- );\n+ await act(async () => {\n+ root.render(\n+ \n+ \n+ <\/LocalErrorBoundary>,\n+ );\n+ });\n \n \/\/ React should skip over the unmounting boundary and find the nearest still-mounted boundary.\n expect(container.firstChild.textContent).toBe('OuterFallback');\n","commit":{"authorName":"Matt Carroll","authorEmail":"7158882+mattcarrollcode@users.noreply.github.com","authoredAt":"2024-02-02T17:41:56-08:00","subject":"Convert ReactErrorBoundaries-test.internal.js to createRoot (#28122)","shortRevision":"3d6fcf9582","revision":"3d6fcf958233a004ff9bd0af8f1f65b8f22f1b3c"}}

dillon1000/react

Files changed