{"body":"","parents":["c7bf1c25ce0c869c3d30709fa15e6ba9a85a021c"],"commit":{"authorName":"Sebastian Silbermann","authorEmail":"silbermann.sebastian@gmail.com","authoredAt":"2024-02-04T11:09:49+01:00","subject":"Convert ReactFresh to createRoot (#28170)","shortRevision":"93a5f40cbf","revision":"93a5f40cbf05a6efb63a78748d238605dfe35e0c"},"files":[{"status":"M","path":"packages\/react-refresh\/src\/__tests__\/ReactFresh-test.js"}],"patch":"diff --git a\/packages\/react-refresh\/src\/__tests__\/ReactFresh-test.js b\/packages\/react-refresh\/src\/__tests__\/ReactFresh-test.js\nindex 94e170e334..38b74563c3 100644\n--- a\/packages\/react-refresh\/src\/__tests__\/ReactFresh-test.js\n+++ b\/packages\/react-refresh\/src\/__tests__\/ReactFresh-test.js\n@@ -17,13 +17,13 @@ let ReactDOMClient;\n let ReactFreshRuntime;\n let Scheduler;\n let act;\n-let internalAct;\n let createReactClass;\n let waitFor;\n let assertLog;\n \n describe('ReactFresh', () => {\n let container;\n+ let root;\n \n beforeEach(() => {\n if (__DEV__) {\n@@ -34,8 +34,7 @@ describe('ReactFresh', () => {\n ReactDOM = require('react-dom');\n ReactDOMClient = require('react-dom\/client');\n Scheduler = require('scheduler');\n- act = React.act;\n- internalAct = require('internal-test-utils').act;\n+ act = require('internal-test-utils').act;\n \n const InternalTestUtils = require('internal-test-utils');\n waitFor = InternalTestUtils.waitFor;\n@@ -47,6 +46,7 @@ describe('ReactFresh', () => {\n new React.Component().updater,\n );\n container = document.createElement('div');\n+ root = ReactDOMClient.createRoot(container);\n document.body.appendChild(container);\n }\n });\n@@ -63,10 +63,10 @@ describe('ReactFresh', () => {\n return Component;\n }\n \n- function render(version, props) {\n+ async function render(version, props) {\n const Component = version();\n- act(() => {\n- ReactDOM.render(, container);\n+ await act(() => {\n+ root.render();\n });\n return Component;\n }\n@@ -99,9 +99,9 @@ describe('ReactFresh', () => {\n );\n }\n \n- it('can preserve state for compatible types', () => {\n+ it('can preserve state for compatible types', async () => {\n if (__DEV__) {\n- const HelloV1 = render(() => {\n+ const HelloV1 = await render(() => {\n function Hello() {\n const [val, setVal] = React.useState(0);\n return (\n@@ -118,7 +118,7 @@ describe('ReactFresh', () => {\n const el = container.firstChild;\n expect(el.textContent).toBe('0');\n expect(el.style.color).toBe('blue');\n- act(() => {\n+ await act(() => {\n el.dispatchEvent(new MouseEvent('click', {bubbles: true}));\n });\n expect(el.textContent).toBe('1');\n@@ -143,7 +143,7 @@ describe('ReactFresh', () => {\n expect(el.style.color).toBe('red');\n \n \/\/ Bump the state again.\n- act(() => {\n+ await act(() => {\n el.dispatchEvent(new MouseEvent('click', {bubbles: true}));\n });\n expect(container.firstChild).toBe(el);\n@@ -153,15 +153,15 @@ describe('ReactFresh', () => {\n \/\/ Perform top-down renders with both fresh and stale types.\n \/\/ Neither should change the state or color.\n \/\/ They should always resolve to the latest version.\n- render(() => HelloV1);\n- render(() => HelloV2);\n- render(() => HelloV1);\n+ await render(() => HelloV1);\n+ await render(() => HelloV2);\n+ await render(() => HelloV1);\n expect(container.firstChild).toBe(el);\n expect(el.textContent).toBe('2');\n expect(el.style.color).toBe('red');\n \n \/\/ Bump the state again.\n- act(() => {\n+ await act(() => {\n el.dispatchEvent(new MouseEvent('click', {bubbles: true}));\n });\n expect(container.firstChild).toBe(el);\n@@ -169,7 +169,7 @@ describe('ReactFresh', () => {\n expect(el.style.color).toBe('red');\n \n \/\/ Finally, a render with incompatible type should reset it.\n- render(() => {\n+ await render(() => {\n function Hello() {\n const [val, setVal] = React.useState(0);\n return (\n@@ -189,9 +189,9 @@ describe('ReactFresh', () => {\n }\n });\n \n- it('can preserve state for forwardRef', () => {\n+ it('can preserve state for forwardRef', async () => {\n if (__DEV__) {\n- const OuterV1 = render(() => {\n+ const OuterV1 = await render(() => {\n function Hello() {\n const [val, setVal] = React.useState(0);\n return (\n@@ -211,7 +211,7 @@ describe('ReactFresh', () => {\n const el = container.firstChild;\n expect(el.textContent).toBe('0');\n expect(el.style.color).toBe('blue');\n- act(() => {\n+ await act(() => {\n el.dispatchEvent(new MouseEvent('click', {bubbles: true}));\n });\n expect(el.textContent).toBe('1');\n@@ -239,7 +239,7 @@ describe('ReactFresh', () => {\n expect(el.style.color).toBe('red');\n \n \/\/ Bump the state again.\n- act(() => {\n+ await act(() => {\n el.dispatchEvent(new MouseEvent('click', {bubbles: true}));\n });\n expect(container.firstChild).toBe(el);\n@@ -249,15 +249,15 @@ describe('ReactFresh', () => {\n \/\/ Perform top-down renders with both fresh and stale types.\n \/\/ Neither should change the state or color.\n \/\/ They should always resolve to the latest version.\n- render(() => OuterV1);\n- render(() => OuterV2);\n- render(() => OuterV1);\n+ await render(() => OuterV1);\n+ await render(() => OuterV2);\n+ await render(() => OuterV1);\n expect(container.firstChild).toBe(el);\n expect(el.textContent).toBe('2');\n expect(el.style.color).toBe('red');\n \n \/\/ Finally, a render with incompatible type should reset it.\n- render(() => {\n+ await render(() => {\n function Hello() {\n const [val, setVal] = React.useState(0);\n return (\n@@ -279,9 +279,9 @@ describe('ReactFresh', () => {\n }\n });\n \n- it('should not consider two forwardRefs around the same type to be equivalent', () => {\n+ it('should not consider two forwardRefs around the same type to be equivalent', async () => {\n if (__DEV__) {\n- const ParentV1 = render(\n+ const ParentV1 = await render(\n () => {\n function Hello() {\n const [val, setVal] = React.useState(0);\n@@ -317,32 +317,32 @@ describe('ReactFresh', () => {\n let el = container.firstChild;\n expect(el.textContent).toBe('0');\n expect(el.style.color).toBe('blue');\n- act(() => {\n+ await act(() => {\n el.dispatchEvent(new MouseEvent('click', {bubbles: true}));\n });\n expect(el.textContent).toBe('1');\n \n \/\/ Switching up the inner types should reset the state.\n- render(() => ParentV1, {cond: false});\n+ await render(() => ParentV1, {cond: false});\n expect(el).not.toBe(container.firstChild);\n el = container.firstChild;\n expect(el.textContent).toBe('0');\n expect(el.style.color).toBe('blue');\n \n- act(() => {\n+ await act(() => {\n el.dispatchEvent(new MouseEvent('click', {bubbles: true}));\n });\n expect(el.textContent).toBe('1');\n \n \/\/ Switch them up back again.\n- render(() => ParentV1, {cond: true});\n+ await render(() => ParentV1, {cond: true});\n expect(el).not.toBe(container.firstChild);\n el = container.firstChild;\n expect(el.textContent).toBe('0');\n expect(el.style.color).toBe('blue');\n \n \/\/ Now bump up the state to prepare for patching.\n- act(() => {\n+ await act(() => {\n el.dispatchEvent(new MouseEvent('click', {bubbles: true}));\n });\n expect(el.textContent).toBe('1');\n@@ -383,14 +383,14 @@ describe('ReactFresh', () => {\n expect(el.style.color).toBe('red');\n \n \/\/ Switching up the condition should still reset the state.\n- render(() => ParentV2, {cond: false});\n+ await render(() => ParentV2, {cond: false});\n expect(el).not.toBe(container.firstChild);\n el = container.firstChild;\n expect(el.textContent).toBe('0');\n expect(el.style.color).toBe('red');\n \n \/\/ Now bump up the state to prepare for top-level renders.\n- act(() => {\n+ await act(() => {\n el.dispatchEvent(new MouseEvent('click', {bubbles: true}));\n });\n expect(el).toBe(container.firstChild);\n@@ -398,18 +398,18 @@ describe('ReactFresh', () => {\n expect(el.style.color).toBe('red');\n \n \/\/ Finally, verify using top-level render with stale type keeps state.\n- render(() => ParentV1);\n- render(() => ParentV2);\n- render(() => ParentV1);\n+ await render(() => ParentV1);\n+ await render(() => ParentV2);\n+ await render(() => ParentV1);\n expect(container.firstChild).toBe(el);\n expect(el.textContent).toBe('1');\n expect(el.style.color).toBe('red');\n }\n });\n \n- it('can update forwardRef render function with its wrapper', () => {\n+ it('can update forwardRef render function with its wrapper', async () => {\n if (__DEV__) {\n- render(() => {\n+ await render(() => {\n function Hello({color}) {\n const [val, setVal] = React.useState(0);\n return (\n@@ -429,7 +429,7 @@ describe('ReactFresh', () => {\n const el = container.firstChild;\n expect(el.textContent).toBe('0');\n expect(el.style.color).toBe('blue');\n- act(() => {\n+ await act(() => {\n el.dispatchEvent(new MouseEvent('click', {bubbles: true}));\n });\n expect(el.textContent).toBe('1');\n@@ -458,9 +458,9 @@ describe('ReactFresh', () => {\n }\n });\n \n- it('can update forwardRef render function in isolation', () => {\n+ it('can update forwardRef render function in isolation', async () => {\n if (__DEV__) {\n- render(() => {\n+ await render(() => {\n function Hello({color}) {\n const [val, setVal] = React.useState(0);\n return (\n@@ -483,7 +483,7 @@ describe('ReactFresh', () => {\n const el = container.firstChild;\n expect(el.textContent).toBe('0');\n expect(el.style.color).toBe('blue');\n- act(() => {\n+ await act(() => {\n el.dispatchEvent(new MouseEvent('click', {bubbles: true}));\n });\n expect(el.textContent).toBe('1');\n@@ -515,9 +515,9 @@ describe('ReactFresh', () => {\n }\n });\n \n- it('can preserve state for simple memo', () => {\n+ it('can preserve state for simple memo', async () => {\n if (__DEV__) {\n- const OuterV1 = render(() => {\n+ const OuterV1 = await render(() => {\n function Hello() {\n const [val, setVal] = React.useState(0);\n return (\n@@ -537,7 +537,7 @@ describe('ReactFresh', () => {\n const el = container.firstChild;\n expect(el.textContent).toBe('0');\n expect(el.style.color).toBe('blue');\n- act(() => {\n+ await act(() => {\n el.dispatchEvent(new MouseEvent('click', {bubbles: true}));\n });\n expect(el.textContent).toBe('1');\n@@ -565,7 +565,7 @@ describe('ReactFresh', () => {\n expect(el.style.color).toBe('red');\n \n \/\/ Bump the state again.\n- act(() => {\n+ await act(() => {\n el.dispatchEvent(new MouseEvent('click', {bubbles: true}));\n });\n expect(container.firstChild).toBe(el);\n@@ -575,15 +575,15 @@ describe('ReactFresh', () => {\n \/\/ Perform top-down renders with both fresh and stale types.\n \/\/ Neither should change the state or color.\n \/\/ They should always resolve to the latest version.\n- render(() => OuterV1);\n- render(() => OuterV2);\n- render(() => OuterV1);\n+ await render(() => OuterV1);\n+ await render(() => OuterV2);\n+ await render(() => OuterV1);\n expect(container.firstChild).toBe(el);\n expect(el.textContent).toBe('2');\n expect(el.style.color).toBe('red');\n \n \/\/ Finally, a render with incompatible type should reset it.\n- render(() => {\n+ await render(() => {\n function Hello() {\n const [val, setVal] = React.useState(0);\n return (\n@@ -605,9 +605,9 @@ describe('ReactFresh', () => {\n }\n });\n \n- it('can preserve state for memo with custom comparison', () => {\n+ it('can preserve state for memo with custom comparison', async () => {\n if (__DEV__) {\n- const OuterV1 = render(() => {\n+ const OuterV1 = await render(() => {\n function Hello() {\n const [val, setVal] = React.useState(0);\n return (\n@@ -626,7 +626,7 @@ describe('ReactFresh', () => {\n const el = container.firstChild;\n expect(el.textContent).toBe('0');\n expect(el.style.color).toBe('blue');\n- act(() => {\n+ await act(() => {\n el.dispatchEvent(new MouseEvent('click', {bubbles: true}));\n });\n expect(el.textContent).toBe('1');\n@@ -653,7 +653,7 @@ describe('ReactFresh', () => {\n expect(el.style.color).toBe('red');\n \n \/\/ Bump the state again.\n- act(() => {\n+ await act(() => {\n el.dispatchEvent(new MouseEvent('click', {bubbles: true}));\n });\n expect(container.firstChild).toBe(el);\n@@ -663,15 +663,15 @@ describe('ReactFresh', () => {\n \/\/ Perform top-down renders with both fresh and stale types.\n \/\/ Neither should change the state or color.\n \/\/ They should always resolve to the latest version.\n- render(() => OuterV1);\n- render(() => OuterV2);\n- render(() => OuterV1);\n+ await render(() => OuterV1);\n+ await render(() => OuterV2);\n+ await render(() => OuterV1);\n expect(container.firstChild).toBe(el);\n expect(el.textContent).toBe('2');\n expect(el.style.color).toBe('red');\n \n \/\/ Finally, a render with incompatible type should reset it.\n- render(() => {\n+ await render(() => {\n function Hello() {\n const [val, setVal] = React.useState(0);\n return (\n@@ -693,9 +693,9 @@ describe('ReactFresh', () => {\n }\n });\n \n- it('can update simple memo function in isolation', () => {\n+ it('can update simple memo function in isolation', async () => {\n if (__DEV__) {\n- render(() => {\n+ await render(() => {\n function Hello() {\n const [val, setVal] = React.useState(0);\n return (\n@@ -713,7 +713,7 @@ describe('ReactFresh', () => {\n const el = container.firstChild;\n expect(el.textContent).toBe('0');\n expect(el.style.color).toBe('blue');\n- act(() => {\n+ await act(() => {\n el.dispatchEvent(new MouseEvent('click', {bubbles: true}));\n });\n expect(el.textContent).toBe('1');\n@@ -740,9 +740,9 @@ describe('ReactFresh', () => {\n }\n });\n \n- it('can preserve state for memo(forwardRef)', () => {\n+ it('can preserve state for memo(forwardRef)', async () => {\n if (__DEV__) {\n- const OuterV1 = render(() => {\n+ const OuterV1 = await render(() => {\n function Hello() {\n const [val, setVal] = React.useState(0);\n return (\n@@ -762,7 +762,7 @@ describe('ReactFresh', () => {\n const el = container.firstChild;\n expect(el.textContent).toBe('0');\n expect(el.style.color).toBe('blue');\n- act(() => {\n+ await act(() => {\n el.dispatchEvent(new MouseEvent('click', {bubbles: true}));\n });\n expect(el.textContent).toBe('1');\n@@ -790,7 +790,7 @@ describe('ReactFresh', () => {\n expect(el.style.color).toBe('red');\n \n \/\/ Bump the state again.\n- act(() => {\n+ await act(() => {\n el.dispatchEvent(new MouseEvent('click', {bubbles: true}));\n });\n expect(container.firstChild).toBe(el);\n@@ -800,15 +800,15 @@ describe('ReactFresh', () => {\n \/\/ Perform top-down renders with both fresh and stale types.\n \/\/ Neither should change the state or color.\n \/\/ They should always resolve to the latest version.\n- render(() => OuterV1);\n- render(() => OuterV2);\n- render(() => OuterV1);\n+ await render(() => OuterV1);\n+ await render(() => OuterV2);\n+ await render(() => OuterV1);\n expect(container.firstChild).toBe(el);\n expect(el.textContent).toBe('2');\n expect(el.style.color).toBe('red');\n \n \/\/ Finally, a render with incompatible type should reset it.\n- render(() => {\n+ await render(() => {\n function Hello() {\n const [val, setVal] = React.useState(0);\n return (\n@@ -832,7 +832,8 @@ describe('ReactFresh', () => {\n \n it('can preserve state for lazy after resolution', async () => {\n if (__DEV__) {\n- const AppV1 = render(() => {\n+ let resolve;\n+ const AppV1 = await render(() => {\n function Hello() {\n const [val, setVal] = React.useState(0);\n return (\n@@ -845,8 +846,8 @@ describe('ReactFresh', () => {\n \n const Outer = React.lazy(\n () =>\n- new Promise(resolve => {\n- setTimeout(() => resolve({default: Hello}), 100);\n+ new Promise(_resolve => {\n+ resolve = () => _resolve({default: Hello});\n }),\n );\n $RefreshReg$(Outer, 'Outer');\n@@ -865,7 +866,7 @@ describe('ReactFresh', () => {\n \n expect(container.textContent).toBe('Loading');\n await act(() => {\n- jest.runAllTimers();\n+ resolve();\n });\n expect(container.textContent).toBe('0');\n \n@@ -873,7 +874,7 @@ describe('ReactFresh', () => {\n const el = container.firstChild;\n expect(el.textContent).toBe('0');\n expect(el.style.color).toBe('blue');\n- act(() => {\n+ await act(() => {\n el.dispatchEvent(new MouseEvent('click', {bubbles: true}));\n });\n expect(el.textContent).toBe('1');\n@@ -892,8 +893,8 @@ describe('ReactFresh', () => {\n \n const Outer = React.lazy(\n () =>\n- new Promise(resolve => {\n- setTimeout(() => resolve({default: Hello}), 100);\n+ new Promise(_resolve => {\n+ resolve = () => _resolve({default: Hello});\n }),\n );\n $RefreshReg$(Outer, 'Outer');\n@@ -916,7 +917,7 @@ describe('ReactFresh', () => {\n expect(el.style.color).toBe('red');\n \n \/\/ Bump the state again.\n- act(() => {\n+ await act(() => {\n el.dispatchEvent(new MouseEvent('click', {bubbles: true}));\n });\n expect(container.firstChild).toBe(el);\n@@ -926,15 +927,15 @@ describe('ReactFresh', () => {\n \/\/ Perform top-down renders with both fresh and stale types.\n \/\/ Neither should change the state or color.\n \/\/ They should always resolve to the latest version.\n- render(() => AppV1);\n- render(() => AppV2);\n- render(() => AppV1);\n+ await render(() => AppV1);\n+ await render(() => AppV2);\n+ await render(() => AppV1);\n expect(container.firstChild).toBe(el);\n expect(el.textContent).toBe('2');\n expect(el.style.color).toBe('red');\n \n \/\/ Finally, a render with incompatible type should reset it.\n- render(() => {\n+ await render(() => {\n function Hello() {\n const [val, setVal] = React.useState(0);\n return (\n@@ -968,7 +969,8 @@ describe('ReactFresh', () => {\n \n it('can patch lazy before resolution', async () => {\n if (__DEV__) {\n- render(() => {\n+ let resolve;\n+ await render(() => {\n function Hello() {\n const [val, setVal] = React.useState(0);\n return (\n@@ -981,8 +983,8 @@ describe('ReactFresh', () => {\n \n const Outer = React.lazy(\n () =>\n- new Promise(resolve => {\n- setTimeout(() => resolve({default: Hello}), 100);\n+ new Promise(_resolve => {\n+ resolve = () => _resolve({default: Hello});\n }),\n );\n $RefreshReg$(Outer, 'Outer');\n@@ -1014,7 +1016,7 @@ describe('ReactFresh', () => {\n });\n \n await act(() => {\n- jest.runAllTimers();\n+ resolve();\n });\n \n \/\/ Expect different color on initial mount.\n@@ -1023,7 +1025,7 @@ describe('ReactFresh', () => {\n expect(el.style.color).toBe('red');\n \n \/\/ Bump state.\n- act(() => {\n+ await act(() => {\n el.dispatchEvent(new MouseEvent('click', {bubbles: true}));\n });\n expect(container.firstChild).toBe(el);\n@@ -1050,7 +1052,8 @@ describe('ReactFresh', () => {\n \n it('can patch lazy(forwardRef) before resolution', async () => {\n if (__DEV__) {\n- render(() => {\n+ let resolve;\n+ await render(() => {\n function renderHello() {\n const [val, setVal] = React.useState(0);\n return (\n@@ -1064,8 +1067,8 @@ describe('ReactFresh', () => {\n \n const Outer = React.lazy(\n () =>\n- new Promise(resolve => {\n- setTimeout(() => resolve({default: Hello}), 100);\n+ new Promise(_resolve => {\n+ resolve = () => _resolve({default: Hello});\n }),\n );\n $RefreshReg$(Outer, 'Outer');\n@@ -1098,7 +1101,7 @@ describe('ReactFresh', () => {\n });\n \n await act(() => {\n- jest.runAllTimers();\n+ resolve();\n });\n \n \/\/ Expect different color on initial mount.\n@@ -1107,7 +1110,7 @@ describe('ReactFresh', () => {\n expect(el.style.color).toBe('red');\n \n \/\/ Bump state.\n- act(() => {\n+ await act(() => {\n el.dispatchEvent(new MouseEvent('click', {bubbles: true}));\n });\n expect(container.firstChild).toBe(el);\n@@ -1135,7 +1138,8 @@ describe('ReactFresh', () => {\n \n it('can patch lazy(memo) before resolution', async () => {\n if (__DEV__) {\n- render(() => {\n+ let resolve;\n+ await render(() => {\n function renderHello() {\n const [val, setVal] = React.useState(0);\n return (\n@@ -1149,8 +1153,8 @@ describe('ReactFresh', () => {\n \n const Outer = React.lazy(\n () =>\n- new Promise(resolve => {\n- setTimeout(() => resolve({default: Hello}), 100);\n+ new Promise(_resolve => {\n+ resolve = () => _resolve({default: Hello});\n }),\n );\n $RefreshReg$(Outer, 'Outer');\n@@ -1183,7 +1187,7 @@ describe('ReactFresh', () => {\n });\n \n await act(() => {\n- jest.runAllTimers();\n+ resolve();\n });\n \n \/\/ Expect different color on initial mount.\n@@ -1192,7 +1196,7 @@ describe('ReactFresh', () => {\n expect(el.style.color).toBe('red');\n \n \/\/ Bump state.\n- act(() => {\n+ await act(() => {\n el.dispatchEvent(new MouseEvent('click', {bubbles: true}));\n });\n expect(container.firstChild).toBe(el);\n@@ -1220,7 +1224,8 @@ describe('ReactFresh', () => {\n \n it('can patch lazy(memo(forwardRef)) before resolution', async () => {\n if (__DEV__) {\n- render(() => {\n+ let resolve;\n+ await render(() => {\n function renderHello() {\n const [val, setVal] = React.useState(0);\n return (\n@@ -1234,8 +1239,8 @@ describe('ReactFresh', () => {\n \n const Outer = React.lazy(\n () =>\n- new Promise(resolve => {\n- setTimeout(() => resolve({default: Hello}), 100);\n+ new Promise(_resolve => {\n+ resolve = () => _resolve({default: Hello});\n }),\n );\n $RefreshReg$(Outer, 'Outer');\n@@ -1268,7 +1273,7 @@ describe('ReactFresh', () => {\n });\n \n await act(() => {\n- jest.runAllTimers();\n+ resolve();\n });\n \n \/\/ Expect different color on initial mount.\n@@ -1277,7 +1282,7 @@ describe('ReactFresh', () => {\n expect(el.style.color).toBe('red');\n \n \/\/ Bump state.\n- act(() => {\n+ await act(() => {\n el.dispatchEvent(new MouseEvent('click', {bubbles: true}));\n });\n expect(container.firstChild).toBe(el);\n@@ -1303,9 +1308,9 @@ describe('ReactFresh', () => {\n }\n });\n \n- it('can patch both trees while suspense is displaying the fallback', async () => {\n+ it('only patches the fallback tree while suspended', async () => {\n if (__DEV__) {\n- const AppV1 = render(\n+ const AppV1 = await render(\n () => {\n function Hello({children}) {\n const [val, setVal] = React.useState(0);\n@@ -1343,7 +1348,7 @@ describe('ReactFresh', () => {\n expect(primaryChild.style.display).toBe('');\n \n \/\/ Bump primary content state.\n- act(() => {\n+ await act(() => {\n primaryChild.dispatchEvent(new MouseEvent('click', {bubbles: true}));\n });\n expect(container.childNodes.length).toBe(1);\n@@ -1371,7 +1376,7 @@ describe('ReactFresh', () => {\n expect(primaryChild.style.display).toBe('');\n \n \/\/ Now force the tree to suspend.\n- render(() => AppV1, {shouldSuspend: true});\n+ await render(() => AppV1, {shouldSuspend: true});\n \n \/\/ Expect to see two trees, one of them is hidden.\n expect(container.childNodes.length).toBe(2);\n@@ -1385,7 +1390,7 @@ describe('ReactFresh', () => {\n expect(fallbackChild.style.display).toBe('');\n \n \/\/ Bump fallback state.\n- act(() => {\n+ await act(() => {\n fallbackChild.dispatchEvent(new MouseEvent('click', {bubbles: true}));\n });\n expect(container.childNodes.length).toBe(2);\n@@ -1411,19 +1416,19 @@ describe('ReactFresh', () => {\n $RefreshReg$(Hello, 'Hello');\n });\n \n- \/\/ Colors inside both trees should change:\n+ \/\/ Only update color in the visible child\n expect(container.childNodes.length).toBe(2);\n expect(container.childNodes[0]).toBe(primaryChild);\n expect(container.childNodes[1]).toBe(fallbackChild);\n expect(primaryChild.textContent).toBe('Content 1');\n- expect(primaryChild.style.color).toBe('red');\n+ expect(primaryChild.style.color).toBe('green');\n expect(primaryChild.style.display).toBe('none');\n expect(fallbackChild.textContent).toBe('Fallback 1');\n expect(fallbackChild.style.color).toBe('red');\n expect(fallbackChild.style.display).toBe('');\n \n \/\/ Only primary tree should exist now:\n- render(() => AppV1, {shouldSuspend: false});\n+ await render(() => AppV1, {shouldSuspend: false});\n expect(container.childNodes.length).toBe(1);\n expect(container.childNodes[0]).toBe(primaryChild);\n expect(primaryChild.textContent).toBe('Content 1');\n@@ -1450,11 +1455,11 @@ describe('ReactFresh', () => {\n }\n });\n \n- it('does not re-render ancestor components unnecessarily during a hot update', () => {\n+ it('does not re-render ancestor components unnecessarily during a hot update', async () => {\n if (__DEV__) {\n let appRenders = 0;\n \n- render(() => {\n+ await render(() => {\n function Hello() {\n const [val, setVal] = React.useState(0);\n return (\n@@ -1478,7 +1483,7 @@ describe('ReactFresh', () => {\n const el = container.firstChild;\n expect(el.textContent).toBe('0');\n expect(el.style.color).toBe('blue');\n- act(() => {\n+ await act(() => {\n el.dispatchEvent(new MouseEvent('click', {bubbles: true}));\n });\n expect(el.textContent).toBe('1');\n@@ -1508,7 +1513,7 @@ describe('ReactFresh', () => {\n expect(appRenders).toBe(1);\n \n \/\/ Bump the state.\n- act(() => {\n+ await act(() => {\n el.dispatchEvent(new MouseEvent('click', {bubbles: true}));\n });\n expect(el.textContent).toBe('2');\n@@ -1518,11 +1523,11 @@ describe('ReactFresh', () => {\n }\n });\n \n- it('batches re-renders during a hot update', () => {\n+ it('batches re-renders during a hot update', async () => {\n if (__DEV__) {\n let helloRenders = 0;\n \n- render(() => {\n+ await render(() => {\n function Hello({children}) {\n helloRenders++;\n return

X{children}X<\/div>;\n@@ -1559,9 +1564,9 @@ describe('ReactFresh', () => {\n }\n });\n \n- it('does not leak state between components', () => {\n+ it('does not leak state between components', async () => {\n if (__DEV__) {\n- const AppV1 = render(\n+ const AppV1 = await render(\n () => {\n function Hello1() {\n const [val, setVal] = React.useState(0);\n@@ -1594,21 +1599,21 @@ describe('ReactFresh', () => {\n const el = container.firstChild;\n expect(el.textContent).toBe('0');\n expect(el.style.color).toBe('blue');\n- act(() => {\n+ await act(() => {\n el.dispatchEvent(new MouseEvent('click', {bubbles: true}));\n });\n expect(el.textContent).toBe('1');\n \n \/\/ Switch the condition, flipping inner content.\n \/\/ This should reset the state.\n- render(() => AppV1, {cond: true});\n+ await render(() => AppV1, {cond: true});\n const el2 = container.firstChild;\n expect(el2).not.toBe(el);\n expect(el2.textContent).toBe('0');\n expect(el2.style.color).toBe('blue');\n \n \/\/ Bump it again.\n- act(() => {\n+ await act(() => {\n el2.dispatchEvent(new MouseEvent('click', {bubbles: true}));\n });\n expect(el2.textContent).toBe('1');\n@@ -1641,7 +1646,7 @@ describe('ReactFresh', () => {\n expect(el2.style.color).toBe('red');\n \n \/\/ Flip the condition again.\n- render(() => AppV1, {cond: false});\n+ await render(() => AppV1, {cond: false});\n const el3 = container.firstChild;\n expect(el3).not.toBe(el2);\n expect(el3.textContent).toBe('0');\n@@ -1649,9 +1654,9 @@ describe('ReactFresh', () => {\n }\n });\n \n- it('can force remount by changing signature', () => {\n+ it('can force remount by changing signature', async () => {\n if (__DEV__) {\n- const HelloV1 = render(() => {\n+ const HelloV1 = await render(() => {\n function Hello() {\n const [val, setVal] = React.useState(0);\n return (\n@@ -1670,7 +1675,7 @@ describe('ReactFresh', () => {\n const el = container.firstChild;\n expect(el.textContent).toBe('0');\n expect(el.style.color).toBe('blue');\n- act(() => {\n+ await act(() => {\n el.dispatchEvent(new MouseEvent('click', {bubbles: true}));\n });\n expect(el.textContent).toBe('1');\n@@ -1719,7 +1724,7 @@ describe('ReactFresh', () => {\n expect(newEl.style.color).toBe('yellow');\n \n \/\/ Bump state again.\n- act(() => {\n+ await act(() => {\n newEl.dispatchEvent(new MouseEvent('click', {bubbles: true}));\n });\n expect(newEl.textContent).toBe('1');\n@@ -1728,11 +1733,11 @@ describe('ReactFresh', () => {\n \/\/ Perform top-down renders with both fresh and stale types.\n \/\/ Neither should change the state or color.\n \/\/ They should always resolve to the latest version.\n- render(() => HelloV1);\n- render(() => HelloV2);\n- render(() => HelloV3);\n- render(() => HelloV2);\n- render(() => HelloV1);\n+ await render(() => HelloV1);\n+ await render(() => HelloV2);\n+ await render(() => HelloV3);\n+ await render(() => HelloV2);\n+ await render(() => HelloV1);\n expect(container.firstChild).toBe(newEl);\n expect(newEl.textContent).toBe('1');\n expect(newEl.style.color).toBe('yellow');\n@@ -1780,7 +1785,7 @@ describe('ReactFresh', () => {\n }\n });\n \n- it('keeps a valid tree when forcing remount', () => {\n+ it('keeps a valid tree when forcing remount', async () => {\n if (__DEV__) {\n const HelloV1 = prepare(() => {\n function Hello() {\n@@ -1910,26 +1915,31 @@ describe('ReactFresh', () => {\n <\/HelloV1>,\n ];\n \n- \/\/ First, check that each tree handles remounts in isolation.\n- ReactDOM.render(null, container);\n+ await act(() => {\n+ root.render(null);\n+ });\n+\n for (let i = 0; i < trees.length; i++) {\n- runRemountingStressTest(trees[i]);\n+ await runRemountingStressTest(trees[i]);\n }\n \n \/\/ Then check that each tree is resilient to updates from another tree.\n for (let i = 0; i < trees.length; i++) {\n for (let j = 0; j < trees.length; j++) {\n- ReactDOM.render(null, container);\n+ await act(() => {\n+ root.render(null);\n+ });\n+\n \/\/ Intentionally don't clean up between the tests:\n- runRemountingStressTest(trees[i]);\n- runRemountingStressTest(trees[j]);\n- runRemountingStressTest(trees[i]);\n+ await runRemountingStressTest(trees[i]);\n+ await runRemountingStressTest(trees[j]);\n+ await runRemountingStressTest(trees[i]);\n }\n }\n }\n- });\n+ }, 10000);\n \n- function runRemountingStressTest(tree) {\n+ async function runRemountingStressTest(tree) {\n patch(() => {\n function Hello({children}) {\n return

{children}<\/section>;\n@@ -1939,7 +1949,10 @@ describe('ReactFresh', () => {\n return Hello;\n });\n \n- ReactDOM.render(tree, container);\n+ await act(() => {\n+ root.render(tree);\n+ });\n+\n const elements = container.querySelectorAll('section');\n \/\/ Each tree above produces exactly three

elements:\n expect(elements.length).toBe(3);\n@@ -2003,8 +2016,10 @@ describe('ReactFresh', () => {\n expect(el.dataset.color).toBe('black');\n });\n \n- \/\/ Do another render just in case.\n- ReactDOM.render(tree, container);\n+ await act(() => {\n+ root.render(tree);\n+ });\n+\n expect(container.querySelectorAll('section').length).toBe(3);\n container.querySelectorAll('section').forEach((el, index) => {\n expect(el).toBe(elementsAfterRemount[index]);\n@@ -2012,21 +2027,21 @@ describe('ReactFresh', () => {\n });\n }\n \n- it('can remount on signature change within a wrapper', () => {\n+ it('can remount on signature change within a wrapper', async () => {\n if (__DEV__) {\n- testRemountingWithWrapper(Hello => Hello);\n+ await testRemountingWithWrapper(Hello => Hello);\n }\n });\n \n- it('can remount on signature change within a simple memo wrapper', () => {\n+ it('can remount on signature change within a simple memo wrapper', async () => {\n if (__DEV__) {\n- testRemountingWithWrapper(Hello => React.memo(Hello));\n+ await testRemountingWithWrapper(Hello => React.memo(Hello));\n }\n });\n \n- it('can remount on signature change within a lazy simple memo wrapper', () => {\n+ it('can remount on signature change within a lazy simple memo wrapper', async () => {\n if (__DEV__) {\n- testRemountingWithWrapper(Hello =>\n+ await testRemountingWithWrapper(Hello =>\n React.lazy(() => ({\n then(cb) {\n cb({default: React.memo(Hello)});\n@@ -2036,35 +2051,37 @@ describe('ReactFresh', () => {\n }\n });\n \n- it('can remount on signature change within forwardRef', () => {\n+ it('can remount on signature change within forwardRef', async () => {\n if (__DEV__) {\n- testRemountingWithWrapper(Hello => React.forwardRef(Hello));\n+ await testRemountingWithWrapper(Hello => React.forwardRef(Hello));\n }\n });\n \n- it('can remount on signature change within forwardRef render function', () => {\n+ it('can remount on signature change within forwardRef render function', async () => {\n if (__DEV__) {\n- testRemountingWithWrapper(Hello => React.forwardRef(() => ));\n+ await testRemountingWithWrapper(Hello =>\n+ React.forwardRef(() => ),\n+ );\n }\n });\n \n- it('can remount on signature change within nested memo', () => {\n+ it('can remount on signature change within nested memo', async () => {\n if (__DEV__) {\n- testRemountingWithWrapper(Hello =>\n+ await testRemountingWithWrapper(Hello =>\n React.memo(React.memo(React.memo(Hello))),\n );\n }\n });\n \n- it('can remount on signature change within a memo wrapper and custom comparison', () => {\n+ it('can remount on signature change within a memo wrapper and custom comparison', async () => {\n if (__DEV__) {\n- testRemountingWithWrapper(Hello => React.memo(Hello, () => true));\n+ await testRemountingWithWrapper(Hello => React.memo(Hello, () => true));\n }\n });\n \n- it('can remount on signature change within a class', () => {\n+ it('can remount on signature change within a class', async () => {\n if (__DEV__) {\n- testRemountingWithWrapper(Hello => {\n+ await testRemountingWithWrapper(Hello => {\n const child = ;\n return class Wrapper extends React.PureComponent {\n render() {\n@@ -2075,9 +2092,9 @@ describe('ReactFresh', () => {\n }\n });\n \n- it('can remount on signature change within a context provider', () => {\n+ it('can remount on signature change within a context provider', async () => {\n if (__DEV__) {\n- testRemountingWithWrapper(Hello => {\n+ await testRemountingWithWrapper(Hello => {\n const Context = React.createContext();\n const child = (\n \n@@ -2091,9 +2108,9 @@ describe('ReactFresh', () => {\n }\n });\n \n- it('can remount on signature change within a context consumer', () => {\n+ it('can remount on signature change within a context consumer', async () => {\n if (__DEV__) {\n- testRemountingWithWrapper(Hello => {\n+ await testRemountingWithWrapper(Hello => {\n const Context = React.createContext();\n const child = {() => }<\/Context.Consumer>;\n return function Wrapper() {\n@@ -2103,9 +2120,9 @@ describe('ReactFresh', () => {\n }\n });\n \n- it('can remount on signature change within a suspense node', () => {\n+ it('can remount on signature change within a suspense node', async () => {\n if (__DEV__) {\n- testRemountingWithWrapper(Hello => {\n+ await testRemountingWithWrapper(Hello => {\n \/\/ TODO: we'll probably want to test fallback trees too.\n const child = (\n \n@@ -2119,9 +2136,9 @@ describe('ReactFresh', () => {\n }\n });\n \n- it('can remount on signature change within a mode node', () => {\n+ it('can remount on signature change within a mode node', async () => {\n if (__DEV__) {\n- testRemountingWithWrapper(Hello => {\n+ await testRemountingWithWrapper(Hello => {\n const child = (\n \n \n@@ -2134,9 +2151,9 @@ describe('ReactFresh', () => {\n }\n });\n \n- it('can remount on signature change within a fragment node', () => {\n+ it('can remount on signature change within a fragment node', async () => {\n if (__DEV__) {\n- testRemountingWithWrapper(Hello => {\n+ await testRemountingWithWrapper(Hello => {\n const child = (\n <>\n \n@@ -2149,9 +2166,9 @@ describe('ReactFresh', () => {\n }\n });\n \n- it('can remount on signature change within multiple siblings', () => {\n+ it('can remount on signature change within multiple siblings', async () => {\n if (__DEV__) {\n- testRemountingWithWrapper(Hello => {\n+ await testRemountingWithWrapper(Hello => {\n const child = (\n <>\n <>\n@@ -2168,9 +2185,9 @@ describe('ReactFresh', () => {\n }\n });\n \n- it('can remount on signature change within a profiler node', () => {\n+ it('can remount on signature change within a profiler node', async () => {\n if (__DEV__) {\n- testRemountingWithWrapper(Hello => {\n+ await testRemountingWithWrapper(Hello => {\n const child = ;\n return function Wrapper() {\n return (\n@@ -2183,8 +2200,8 @@ describe('ReactFresh', () => {\n }\n });\n \n- function testRemountingWithWrapper(wrap) {\n- render(() => {\n+ async function testRemountingWithWrapper(wrap) {\n+ await render(() => {\n function Hello() {\n const [val, setVal] = React.useState(0);\n return (\n@@ -2206,7 +2223,7 @@ describe('ReactFresh', () => {\n const el = container.firstChild;\n expect(el.textContent).toBe('0');\n expect(el.style.color).toBe('blue');\n- act(() => {\n+ await act(() => {\n el.dispatchEvent(new MouseEvent('click', {bubbles: true}));\n });\n expect(el.textContent).toBe('1');\n@@ -2255,7 +2272,7 @@ describe('ReactFresh', () => {\n expect(newEl.style.color).toBe('yellow');\n \n \/\/ Bump state again.\n- act(() => {\n+ await act(() => {\n newEl.dispatchEvent(new MouseEvent('click', {bubbles: true}));\n });\n expect(newEl.textContent).toBe('1');\n@@ -2303,11 +2320,11 @@ describe('ReactFresh', () => {\n expect(finalEl.style.color).toBe('orange');\n }\n \n- it('resets hooks with dependencies on hot reload', () => {\n+ it('resets hooks with dependencies on hot reload', async () => {\n if (__DEV__) {\n let useEffectWithEmptyArrayCalls = 0;\n \n- render(() => {\n+ await render(() => {\n function Hello() {\n const [val, setVal] = React.useState(0);\n const tranformed = React.useMemo(() => val * 2, [val]);\n@@ -2332,33 +2349,31 @@ describe('ReactFresh', () => {\n expect(el.textContent).toBe('0');\n expect(el.style.color).toBe('blue');\n expect(useEffectWithEmptyArrayCalls).toBe(1); \/\/ useEffect ran\n- act(() => {\n+ await act(() => {\n el.dispatchEvent(new MouseEvent('click', {bubbles: true}));\n });\n expect(el.textContent).toBe('2'); \/\/ val * 2\n expect(useEffectWithEmptyArrayCalls).toBe(1); \/\/ useEffect didn't re-run\n \n \/\/ Perform a hot update.\n- act(() => {\n- patch(() => {\n- function Hello() {\n- const [val, setVal] = React.useState(0);\n- const tranformed = React.useMemo(() => val * 10, [val]);\n- const handleClick = React.useCallback(() => setVal(v => v - 1), []);\n+ patch(() => {\n+ function Hello() {\n+ const [val, setVal] = React.useState(0);\n+ const tranformed = React.useMemo(() => val * 10, [val]);\n+ const handleClick = React.useCallback(() => setVal(v => v - 1), []);\n \n- React.useEffect(() => {\n- useEffectWithEmptyArrayCalls++;\n- }, []);\n+ React.useEffect(() => {\n+ useEffectWithEmptyArrayCalls++;\n+ }, []);\n \n- return (\n-

\n- {tranformed}\n- <\/p>\n- );\n- }\n- $RefreshReg$(Hello, 'Hello');\n- return Hello;\n- });\n+ return (\n+

\n+ {tranformed}\n+ <\/p>\n+ );\n+ }\n+ $RefreshReg$(Hello, 'Hello');\n+ return Hello;\n });\n \n \/\/ Assert the state was preserved but memo was evicted.\n@@ -2368,7 +2383,7 @@ describe('ReactFresh', () => {\n expect(useEffectWithEmptyArrayCalls).toBe(2); \/\/ useEffect re-ran\n \n \/\/ This should fire the new callback which decreases the counter.\n- act(() => {\n+ await act(() => {\n el.dispatchEvent(new MouseEvent('click', {bubbles: true}));\n });\n expect(el.textContent).toBe('0');\n@@ -2378,9 +2393,9 @@ describe('ReactFresh', () => {\n });\n \n \/\/ This pattern is inspired by useSubscription and similar mechanisms.\n- it('does not get into infinite loops during render phase updates', () => {\n+ it('does not get into infinite loops during render phase updates', async () => {\n if (__DEV__) {\n- render(() => {\n+ await render(() => {\n function Hello() {\n const source = React.useMemo(() => ({value: 10}), []);\n const [state, setState] = React.useState({value: null});\n@@ -2398,20 +2413,18 @@ describe('ReactFresh', () => {\n expect(el.style.color).toBe('blue');\n \n \/\/ Perform a hot update.\n- act(() => {\n- patch(() => {\n- function Hello() {\n- const source = React.useMemo(() => ({value: 20}), []);\n- const [state, setState] = React.useState({value: null});\n- if (state !== source) {\n- \/\/ This should perform a single render-phase update.\n- setState(source);\n- }\n- return

{state.value}<\/p>;\n+ patch(() => {\n+ function Hello() {\n+ const source = React.useMemo(() => ({value: 20}), []);\n+ const [state, setState] = React.useState({value: null});\n+ if (state !== source) {\n+ \/\/ This should perform a single render-phase update.\n+ setState(source);\n }\n- $RefreshReg$(Hello, 'Hello');\n- return Hello;\n- });\n+ return

{state.value}<\/p>;\n+ }\n+ $RefreshReg$(Hello, 'Hello');\n+ return Hello;\n });\n \n expect(container.firstChild).toBe(el);\n@@ -2448,7 +2461,6 @@ describe('ReactFresh', () => {\n };\n });\n \n- const root = ReactDOMClient.createRoot(container);\n root.render();\n await waitFor(['App#layout']);\n const el = container.firstChild;\n@@ -2482,7 +2494,7 @@ describe('ReactFresh', () => {\n expect(el.firstChild.textContent).toBe('0');\n expect(el.firstChild.style.color).toBe('red');\n \n- await internalAct(() => {\n+ await act(() => {\n el.firstChild.dispatchEvent(\n new MouseEvent('click', {\n bubbles: true,\n@@ -2522,9 +2534,9 @@ describe('ReactFresh', () => {\n expect(el.firstChild.style.color).toBe('orange');\n });\n \n- it('remounts failed error boundaries (componentDidCatch)', () => {\n+ it('remounts failed error boundaries (componentDidCatch)', async () => {\n if (__DEV__) {\n- render(() => {\n+ await render(() => {\n function Hello() {\n return

Hi<\/h1>;\n }\n@@ -2600,9 +2612,9 @@ describe('ReactFresh', () => {\n }\n });\n \n- it('remounts failed error boundaries (getDerivedStateFromError)', () => {\n+ it('remounts failed error boundaries (getDerivedStateFromError)', async () => {\n if (DEV) {\n- render(() => {\n+ await render(() => {\n function Hello() {\n return

Hi<\/h1>;\n }\n@@ -2678,9 +2690,9 @@ describe('ReactFresh', () => {\n }\n });\n \n- it('remounts error boundaries that failed asynchronously after hot update', () => {\n+ it('remounts error boundaries that failed asynchronously after hot update', async () => {\n if (DEV) {\n- render(() => {\n+ await render(() => {\n function Hello() {\n const [x] = React.useState('');\n React.useEffect(() => {}, []);\n@@ -2722,26 +2734,25 @@ describe('ReactFresh', () => {\n const secondP = firstP.nextSibling.nextSibling;\n \n \/\/ Perform a hot update that fails.\n- act(() => {\n- patch(() => {\n- function Hello() {\n- const [x, setX] = React.useState('');\n- React.useEffect(() => {\n- setTimeout(() => {\n- setX(42); \/\/ This will crash next render.\n- }, 1);\n- }, []);\n- x.slice();\n- return

Hi<\/h1>;\n- }\n- $RefreshReg$(Hello, 'Hello');\n- });\n+ let crash;\n+ patch(() => {\n+ function Hello() {\n+ const [x, setX] = React.useState('');\n+ React.useEffect(() => {\n+ crash = () => {\n+ setX(42); \/\/ This will crash next render.\n+ };\n+ }, []);\n+ x.slice();\n+ return

Hi<\/h1>;\n+ }\n+ $RefreshReg$(Hello, 'Hello');\n });\n \n expect(container.innerHTML).toBe('
A<\/p>

Hi<\/h1>
B<\/p>');\n \/\/ Run timeout inside effect:\n- act(() => {\n- jest.runAllTimers();\n+ await act(() => {\n+ crash();\n });\n expect(container.innerHTML).toBe(\n '
A<\/p>

Oops: x.slice is not a function<\/h1>
B<\/p>',\n@@ -2750,16 +2761,14 @@ describe('ReactFresh', () => {\n expect(container.firstChild.nextSibling.nextSibling).toBe(secondP);\n \n \/\/ Perform a hot update that fixes the error.\n- act(() => {\n- patch(() => {\n- function Hello() {\n- const [x] = React.useState('');\n- React.useEffect(() => {}, []); \/\/ Removes the bad effect code.\n- x.slice(); \/\/ Doesn't throw initially.\n- return

Fixed!<\/h1>;\n- }\n- $RefreshReg$(Hello, 'Hello');\n- });\n+ patch(() => {\n+ function Hello() {\n+ const [x] = React.useState('');\n+ React.useEffect(() => {}, []); \/\/ Removes the bad effect code.\n+ x.slice(); \/\/ Doesn't throw initially.\n+ return

Fixed!<\/h1>;\n+ }\n+ $RefreshReg$(Hello, 'Hello');\n });\n \n \/\/ This should remount the error boundary (but not anything above it).\n@@ -2769,16 +2778,14 @@ describe('ReactFresh', () => {\n \n \/\/ Verify next hot reload doesn't remount anything.\n const helloNode = container.firstChild.nextSibling;\n- act(() => {\n- patch(() => {\n- function Hello() {\n- const [x] = React.useState('');\n- React.useEffect(() => {}, []);\n- x.slice();\n- return

Nice.<\/h1>;\n- }\n- $RefreshReg$(Hello, 'Hello');\n- });\n+ patch(() => {\n+ function Hello() {\n+ const [x] = React.useState('');\n+ React.useEffect(() => {}, []);\n+ x.slice();\n+ return

Nice.<\/h1>;\n+ }\n+ $RefreshReg$(Hello, 'Hello');\n });\n \n expect(container.firstChild.nextSibling).toBe(helloNode);\n@@ -2786,9 +2793,9 @@ describe('ReactFresh', () => {\n }\n });\n \n- it('remounts a failed root on mount', () => {\n+ it('remounts a failed root on mount', async () => {\n if (DEV) {\n- expect(() => {\n+ await expect(\n render(() => {\n function Hello() {\n throw new Error('No');\n@@ -2796,8 +2803,8 @@ describe('ReactFresh', () => {\n $RefreshReg$(Hello, 'Hello');\n \n return Hello;\n- });\n- }).toThrow('No');\n+ }),\n+ ).rejects.toThrow('No');\n expect(container.innerHTML).toBe('');\n \n \/\/ A bad retry\n@@ -2849,7 +2856,9 @@ describe('ReactFresh', () => {\n expect(container.innerHTML).toBe('

Fixed 2!<\/h1>');\n \n \/\/ Updates after intentional unmount are ignored.\n- ReactDOM.unmountComponentAtNode(container);\n+ await act(() => {\n+ root.unmount();\n+ });\n patch(() => {\n function Hello() {\n throw new Error('Ignored');\n@@ -2867,9 +2876,9 @@ describe('ReactFresh', () => {\n }\n });\n \n- it('does not retry an intentionally unmounted failed root', () => {\n+ it('does not retry an intentionally unmounted failed root', async () => {\n if (DEV) {\n- expect(() => {\n+ await expect(\n render(() => {\n function Hello() {\n throw new Error('No');\n@@ -2877,12 +2886,14 @@ describe('ReactFresh', () => {\n $RefreshReg$(Hello, 'Hello');\n \n return Hello;\n- });\n- }).toThrow('No');\n+ }),\n+ ).rejects.toThrow('No');\n expect(container.innerHTML).toBe('');\n \n \/\/ Intentional unmount.\n- ReactDOM.unmountComponentAtNode(container);\n+ await act(() => {\n+ root.unmount();\n+ });\n \n \/\/ Perform a hot update that fixes the error.\n patch(() => {\n@@ -2896,9 +2907,9 @@ describe('ReactFresh', () => {\n }\n });\n \n- it('remounts a failed root on update', () => {\n+ it('remounts a failed root on update', async () => {\n if (DEV) {\n- render(() => {\n+ await render(() => {\n function Hello() {\n return

Hi<\/h1>;\n }\n@@ -2974,7 +2985,9 @@ describe('ReactFresh', () => {\n expect(container.innerHTML).toBe('

At last.<\/h1>');\n \n \/\/ Check we don't attempt to reverse an intentional unmount.\n- ReactDOM.unmountComponentAtNode(container);\n+ await act(() => {\n+ root.unmount();\n+ });\n expect(container.innerHTML).toBe('');\n patch(() => {\n function Hello() {\n@@ -2985,7 +2998,8 @@ describe('ReactFresh', () => {\n expect(container.innerHTML).toBe('');\n \n \/\/ Mount a new container.\n- render(() => {\n+ root = ReactDOMClient.createRoot(container);\n+ await render(() => {\n function Hello() {\n return

Hi<\/h1>;\n }\n@@ -3007,7 +3021,9 @@ describe('ReactFresh', () => {\n expect(container.innerHTML).toBe('');\n \n \/\/ Check we don't attempt to reverse an intentional unmount, even after an error.\n- ReactDOM.unmountComponentAtNode(container);\n+ await act(() => {\n+ root.unmount();\n+ });\n expect(container.innerHTML).toBe('');\n patch(() => {\n function Hello() {\n@@ -3019,10 +3035,12 @@ describe('ReactFresh', () => {\n }\n });\n \n- it('regression test: does not get into an infinite loop', () => {\n+ it('regression test: does not get into an infinite loop', async () => {\n if (DEV) {\n const containerA = document.createElement('div');\n const containerB = document.createElement('div');\n+ const rootA = ReactDOMClient.createRoot(containerA);\n+ const rootB = ReactDOMClient.createRoot(containerB);\n \n \/\/ Initially, nothing interesting.\n const RootAV1 = () => {\n@@ -3034,9 +3052,9 @@ describe('ReactFresh', () => {\n };\n $RefreshReg$(RootBV1, 'RootB');\n \n- act(() => {\n- ReactDOM.render(, containerA);\n- ReactDOM.render(, containerB);\n+ await act(() => {\n+ rootA.render();\n+ rootB.render();\n });\n expect(containerA.innerHTML).toBe('A1');\n expect(containerB.innerHTML).toBe('B1');\n@@ -3046,7 +3064,11 @@ describe('ReactFresh', () => {\n throw new Error('A2!');\n };\n $RefreshReg$(RootAV2, 'RootA');\n- expect(() => ReactFreshRuntime.performReactRefresh()).toThrow('A2!');\n+ await expect(\n+ act(() => {\n+ ReactFreshRuntime.performReactRefresh();\n+ }),\n+ ).rejects.toThrow('A2!');\n expect(containerA.innerHTML).toBe('');\n expect(containerB.innerHTML).toBe('B1');\n \n@@ -3060,7 +3082,11 @@ describe('ReactFresh', () => {\n return 'A3';\n };\n $RefreshReg$(RootAV3, 'RootA');\n- expect(() => ReactFreshRuntime.performReactRefresh()).toThrow('A3!');\n+ await expect(\n+ act(() => {\n+ ReactFreshRuntime.performReactRefresh();\n+ }),\n+ ).rejects.toThrow('A3!');\n expect(containerA.innerHTML).toBe('');\n expect(containerB.innerHTML).toBe('B1');\n \n@@ -3068,15 +3094,17 @@ describe('ReactFresh', () => {\n return 'A4';\n };\n $RefreshReg$(RootAV4, 'RootA');\n- ReactFreshRuntime.performReactRefresh();\n+ await act(() => {\n+ ReactFreshRuntime.performReactRefresh();\n+ });\n expect(containerA.innerHTML).toBe('A4');\n expect(containerB.innerHTML).toBe('B1');\n }\n });\n \n- it('remounts classes on every edit', () => {\n+ it('remounts classes on every edit', async () => {\n if (DEV) {\n- const HelloV1 = render(() => {\n+ const HelloV1 = await render(() => {\n class Hello extends React.Component {\n state = {count: 0};\n handleClick = () => {\n@@ -3105,7 +3133,7 @@ describe('ReactFresh', () => {\n const el = container.firstChild;\n expect(el.textContent).toBe('0');\n expect(el.style.color).toBe('blue');\n- act(() => {\n+ await act(() => {\n el.dispatchEvent(new MouseEvent('click', {bubbles: true}));\n });\n expect(el.textContent).toBe('1');\n@@ -3136,14 +3164,14 @@ describe('ReactFresh', () => {\n const newEl = container.firstChild;\n expect(newEl.textContent).toBe('0');\n expect(newEl.style.color).toBe('red');\n- act(() => {\n+ await act(() => {\n newEl.dispatchEvent(new MouseEvent('click', {bubbles: true}));\n });\n expect(newEl.textContent).toBe('1');\n \n \/\/ Now top-level renders of both types resolve to latest.\n- render(() => HelloV1);\n- render(() => HelloV2);\n+ await render(() => HelloV1);\n+ await render(() => HelloV2);\n expect(container.firstChild).toBe(newEl);\n expect(newEl.style.color).toBe('red');\n expect(newEl.textContent).toBe('1');\n@@ -3173,24 +3201,24 @@ describe('ReactFresh', () => {\n const finalEl = container.firstChild;\n expect(finalEl.textContent).toBe('0');\n expect(finalEl.style.color).toBe('orange');\n- act(() => {\n+ await act(() => {\n finalEl.dispatchEvent(new MouseEvent('click', {bubbles: true}));\n });\n expect(finalEl.textContent).toBe('1');\n \n- render(() => HelloV3);\n- render(() => HelloV2);\n- render(() => HelloV1);\n+ await render(() => HelloV3);\n+ await render(() => HelloV2);\n+ await render(() => HelloV1);\n expect(container.firstChild).toBe(finalEl);\n expect(finalEl.style.color).toBe('orange');\n expect(finalEl.textContent).toBe('1');\n }\n });\n \n- it('updates refs when remounting', () => {\n+ it('updates refs when remounting', async () => {\n if (DEV) {\n const testRef = React.createRef();\n- render(\n+ await render(\n () => {\n class Hello extends React.Component {\n getColor() {\n@@ -3261,9 +3289,9 @@ describe('ReactFresh', () => {\n }\n });\n \n- it('remounts on conversion from class to function and back', () => {\n+ it('remounts on conversion from class to function and back', async () => {\n if (DEV) {\n- const HelloV1 = render(() => {\n+ const HelloV1 = await render(() => {\n function Hello() {\n const [val, setVal] = React.useState(0);\n return (\n@@ -3280,7 +3308,7 @@ describe('ReactFresh', () => {\n const el = container.firstChild;\n expect(el.textContent).toBe('0');\n expect(el.style.color).toBe('blue');\n- act(() => {\n+ await act(() => {\n el.dispatchEvent(new MouseEvent('click', {bubbles: true}));\n });\n expect(el.textContent).toBe('1');\n@@ -3311,14 +3339,14 @@ describe('ReactFresh', () => {\n const newEl = container.firstChild;\n expect(newEl.textContent).toBe('0');\n expect(newEl.style.color).toBe('red');\n- act(() => {\n+ await act(() => {\n newEl.dispatchEvent(new MouseEvent('click', {bubbles: true}));\n });\n expect(newEl.textContent).toBe('1');\n \n \/\/ Now top-level renders of both types resolve to latest.\n- render(() => HelloV1);\n- render(() => HelloV2);\n+ await render(() => HelloV1);\n+ await render(() => HelloV2);\n expect(container.firstChild).toBe(newEl);\n expect(newEl.style.color).toBe('red');\n expect(newEl.textContent).toBe('1');\n@@ -3342,14 +3370,14 @@ describe('ReactFresh', () => {\n const finalEl = container.firstChild;\n expect(finalEl.textContent).toBe('0');\n expect(finalEl.style.color).toBe('orange');\n- act(() => {\n+ await act(() => {\n finalEl.dispatchEvent(new MouseEvent('click', {bubbles: true}));\n });\n expect(finalEl.textContent).toBe('1');\n \n- render(() => HelloV3);\n- render(() => HelloV2);\n- render(() => HelloV1);\n+ await render(() => HelloV3);\n+ await render(() => HelloV2);\n+ await render(() => HelloV1);\n expect(container.firstChild).toBe(finalEl);\n expect(finalEl.style.color).toBe('orange');\n expect(finalEl.textContent).toBe('1');\n@@ -3373,9 +3401,9 @@ describe('ReactFresh', () => {\n }\n });\n \n- it('can find host instances for a family', () => {\n+ it('can find host instances for a family', async () => {\n if (DEV) {\n- render(() => {\n+ await render(() => {\n function Child({children}) {\n return
{children}<\/div>;\n }\n@@ -3481,7 +3509,7 @@ describe('ReactFresh', () => {\n });\n }\n \n- it('can update multiple roots independently', () => {\n+ it('can update multiple roots independently', async () => {\n if (DEV) {\n \/\/ Declare the first version.\n const HelloV1 = () => {\n@@ -3504,7 +3532,9 @@ describe('ReactFresh', () => {\n );\n };\n $RefreshReg$(HelloV2, 'Hello');\n- ReactFreshRuntime.performReactRefresh();\n+ await act(() => {\n+ ReactFreshRuntime.performReactRefresh();\n+ });\n \n \/\/ Mount three roots.\n const cont1 = document.createElement('div');\n@@ -3513,10 +3543,19 @@ describe('ReactFresh', () => {\n document.body.appendChild(cont1);\n document.body.appendChild(cont2);\n document.body.appendChild(cont3);\n+ const root1 = ReactDOMClient.createRoot(cont1);\n+ const root2 = ReactDOMClient.createRoot(cont2);\n+ const root3 = ReactDOMClient.createRoot(cont3);\n try {\n- ReactDOM.render(, cont1);\n- ReactDOM.render(, cont2);\n- ReactDOM.render(, cont3);\n+ await act(() => {\n+ root1.render();\n+ });\n+ await act(() => {\n+ root2.render();\n+ });\n+ await act(() => {\n+ root3.render();\n+ });\n \n \/\/ Expect we see the V2 color.\n expect(cont1.firstChild.style.color).toBe('red');\n@@ -3527,7 +3566,7 @@ describe('ReactFresh', () => {\n expect(cont3.firstChild.textContent).toBe('0');\n \n \/\/ Bump the state for each of them.\n- act(() => {\n+ await act(() => {\n cont1.firstChild.dispatchEvent(\n new MouseEvent('click', {bubbles: true}),\n );\n@@ -3555,7 +3594,9 @@ describe('ReactFresh', () => {\n );\n };\n $RefreshReg$(HelloV3, 'Hello');\n- ReactFreshRuntime.performReactRefresh();\n+ await act(() => {\n+ ReactFreshRuntime.performReactRefresh();\n+ });\n \n \/\/ It should affect all roots.\n expect(cont1.firstChild.style.color).toBe('green');\n@@ -3566,7 +3607,9 @@ describe('ReactFresh', () => {\n expect(cont3.firstChild.textContent).toBe('1');\n \n \/\/ Unmount the second root.\n- ReactDOM.unmountComponentAtNode(cont2);\n+ await act(() => {\n+ root2.unmount();\n+ });\n \/\/ Make the first root throw and unmount on hot update.\n const HelloV4 = ({id}) => {\n if (id === 1) {\n@@ -3580,9 +3623,11 @@ describe('ReactFresh', () => {\n );\n };\n $RefreshReg$(HelloV4, 'Hello');\n- expect(() => {\n- ReactFreshRuntime.performReactRefresh();\n- }).toThrow('Oops.');\n+ await expect(\n+ act(() => {\n+ ReactFreshRuntime.performReactRefresh();\n+ }),\n+ ).rejects.toThrow('Oops.');\n \n \/\/ Still, we expect the last root to be updated.\n expect(cont1.innerHTML).toBe('');\n@@ -3791,18 +3836,20 @@ describe('ReactFresh', () => {\n jest.resetModules();\n React = require('react');\n ReactDOM = require('react-dom');\n+ ReactDOMClient = require('react-dom\/client');\n Scheduler = require('scheduler');\n- act = React.act;\n- internalAct = require('internal-test-utils').act;\n+ act = require('internal-test-utils').act;\n \n \/\/ Important! Inject into the global hook after ReactDOM runs:\n ReactFreshRuntime = require('react-refresh\/runtime');\n ReactFreshRuntime.injectIntoGlobalHook(global);\n \n+ root = ReactDOMClient.createRoot(container);\n+\n \/\/ We're verifying that we're able to track roots mounted after this point.\n \/\/ The rest of this test is taken from the simplest first test case.\n \n- render(() => {\n+ await render(() => {\n function Hello() {\n const [val, setVal] = React.useState(0);\n return (\n@@ -3819,7 +3866,7 @@ describe('ReactFresh', () => {\n const el = container.firstChild;\n expect(el.textContent).toBe('0');\n expect(el.style.color).toBe('blue');\n- act(() => {\n+ await act(() => {\n el.dispatchEvent(new MouseEvent('click', {bubbles: true}));\n });\n expect(el.textContent).toBe('1');\n@@ -3846,7 +3893,7 @@ describe('ReactFresh', () => {\n });\n \n \/\/ This simulates the scenario in https:\/\/github.com\/facebook\/react\/issues\/20100\n- it('does not block DevTools when an unsupported renderer is injected', () => {\n+ it('does not block DevTools when an unsupported legacy renderer is injected', () => {\n if (DEV) {\n initFauxDevToolsHook();\n \n@@ -3872,13 +3919,12 @@ describe('ReactFresh', () => {\n ReactFreshRuntime = require('react-refresh\/runtime');\n ReactFreshRuntime.injectIntoGlobalHook(global);\n \n- render(() => {\n- function Hello() {\n- return
Hi!<\/div>;\n- }\n- $RefreshReg$(Hello, 'Hello');\n- return Hello;\n- });\n+ const Hello = () => {\n+ return
Hi!<\/div>;\n+ };\n+ $RefreshReg$(Hello, 'Hello');\n+ const Component = Hello;\n+ ReactDOM.render(, container);\n \n expect(onCommitFiberRoot).toHaveBeenCalled();\n }\n"}

dillon1000/react

Files changed