{"body":"Convert ReactFreshIntegration-test to createRoot","commit":{"revision":"772475457354c7c417bee4caf15311d28c9b3a2c","authorName":"Jan Kassens","authoredAt":"2024-01-25T15:07:57-05:00","authorEmail":"jkassens@meta.com","subject":"Convert ReactFreshIntegration-test to createRoot (#28073)","shortRevision":"7724754573"},"files":[{"path":"packages\/react-refresh\/src\/__tests__\/ReactFreshIntegration-test.js","status":"M"}],"patch":"diff --git a\/packages\/react-refresh\/src\/__tests__\/ReactFreshIntegration-test.js b\/packages\/react-refresh\/src\/__tests__\/ReactFreshIntegration-test.js\nindex cc0bebf392..aca7ad9e0e 100644\n--- a\/packages\/react-refresh\/src\/__tests__\/ReactFreshIntegration-test.js\n+++ b\/packages\/react-refresh\/src\/__tests__\/ReactFreshIntegration-test.js\n@@ -12,9 +12,11 @@\n 'use strict';\n \n let React;\n-let ReactDOM;\n+let ReactDOMClient;\n let ReactFreshRuntime;\n+let Scheduler;\n let act;\n+let assertLog;\n \n const babel = require('@babel\/core');\n const freshPlugin = require('react-refresh\/babel');\n@@ -22,6 +24,7 @@ const ts = require('typescript');\n \n describe('ReactFreshIntegration', () => {\n let container;\n+ let root;\n let exportsObj;\n \n beforeEach(() => {\n@@ -30,17 +33,19 @@ describe('ReactFreshIntegration', () => {\n React = require('react');\n ReactFreshRuntime = require('react-refresh\/runtime');\n ReactFreshRuntime.injectIntoGlobalHook(global);\n- ReactDOM = require('react-dom');\n- act = React.unstable_act;\n+ ReactDOMClient = require('react-dom\/client');\n+ Scheduler = require('scheduler\/unstable_mock');\n+ ({act, assertLog} = require('internal-test-utils'));\n container = document.createElement('div');\n document.body.appendChild(container);\n+ root = ReactDOMClient.createRoot(container);\n exportsObj = undefined;\n }\n });\n \n afterEach(() => {\n if (__DEV__) {\n- ReactDOM.unmountComponentAtNode(container);\n+ root.unmount();\n \/\/ Ensure we don't leak memory by holding onto dead roots.\n expect(ReactFreshRuntime._getMountedRootCount()).toBe(0);\n document.body.removeChild(container);\n@@ -82,11 +87,12 @@ describe('ReactFreshIntegration', () => {\n new Function(\n 'global',\n 'React',\n+ 'Scheduler',\n 'exports',\n '$RefreshReg$',\n '$RefreshSig$',\n compiled,\n- )(global, React, exportsObj, $RefreshReg$, $RefreshSig$);\n+ )(global, React, Scheduler, exportsObj, $RefreshReg$, $RefreshSig$);\n \/\/ Module systems will register exports as a fallback.\n \/\/ This is useful for cases when e.g. a class is exported,\n \/\/ and we don't want to propagate the update beyond this module.\n@@ -115,16 +121,16 @@ describe('ReactFreshIntegration', () => {\n ],\n ['TypeScript syntax', executeTypescript, testTypeScript],\n ])('%s', (language, execute, test) => {\n- function render(source) {\n+ async function render(source) {\n const Component = execute(source);\n- act(() => {\n- ReactDOM.render(, container);\n+ await act(() => {\n+ root.render();\n });\n \/\/ Module initialization shouldn't be counted as a hot update.\n expect(ReactFreshRuntime.performReactRefresh()).toBe(null);\n }\n \n- function patch(source) {\n+ async function patch(source) {\n const prevExports = exportsObj;\n execute(source);\n const nextExports = exportsObj;\n@@ -142,11 +148,11 @@ describe('ReactFreshIntegration', () => {\n \/\/ This makes adding\/removing\/renaming exports re-render references to them.\n \/\/ Here, we'll just force a re-render using the newer type to emulate this.\n const NextComponent = nextExports.default;\n- act(() => {\n- ReactDOM.render(, container);\n+ await act(() => {\n+ root.render();\n });\n }\n- act(() => {\n+ await act(() => {\n const result = ReactFreshRuntime.performReactRefresh();\n if (!didExportsChange) {\n \/\/ Normally we expect that some components got updated in our tests.\n@@ -164,9 +170,9 @@ describe('ReactFreshIntegration', () => {\n });\n \n function testJavaScript(render, patch) {\n- it('reloads function declarations', () => {\n+ it('reloads function declarations', async () => {\n if (__DEV__) {\n- render(`\n+ await render(`\n function Parent() {\n return ;\n };\n@@ -179,7 +185,7 @@ describe('ReactFreshIntegration', () => {\n `);\n const el = container.firstChild;\n expect(el.textContent).toBe('A1');\n- patch(`\n+ await patch(`\n function Parent() {\n return ;\n };\n@@ -195,9 +201,9 @@ describe('ReactFreshIntegration', () => {\n }\n });\n \n- it('reloads arrow functions', () => {\n+ it('reloads arrow functions', async () => {\n if (__DEV__) {\n- render(`\n+ await render(`\n const Parent = () => {\n return ;\n };\n@@ -210,7 +216,7 @@ describe('ReactFreshIntegration', () => {\n `);\n const el = container.firstChild;\n expect(el.textContent).toBe('A1');\n- patch(`\n+ await patch(`\n const Parent = () => {\n return ;\n };\n@@ -226,9 +232,9 @@ describe('ReactFreshIntegration', () => {\n }\n });\n \n- it('reloads a combination of memo and forwardRef', () => {\n+ it('reloads a combination of memo and forwardRef', async () => {\n if (__DEV__) {\n- render(`\n+ await render(`\n const {memo} = React;\n \n const Parent = memo(React.forwardRef(function (props, ref) {\n@@ -243,7 +249,7 @@ describe('ReactFreshIntegration', () => {\n `);\n const el = container.firstChild;\n expect(el.textContent).toBe('A1');\n- patch(`\n+ await patch(`\n const {memo} = React;\n \n const Parent = memo(React.forwardRef(function (props, ref) {\n@@ -261,9 +267,9 @@ describe('ReactFreshIntegration', () => {\n }\n });\n \n- it('reloads default export with named memo', () => {\n+ it('reloads default export with named memo', async () => {\n if (__DEV__) {\n- render(`\n+ await render(`\n const {memo} = React;\n \n const Child = React.memo(({prop}) => {\n@@ -276,7 +282,7 @@ describe('ReactFreshIntegration', () => {\n `);\n const el = container.firstChild;\n expect(el.textContent).toBe('A1');\n- patch(`\n+ await patch(`\n const {memo} = React;\n \n const Child = React.memo(({prop}) => {\n@@ -292,9 +298,9 @@ describe('ReactFreshIntegration', () => {\n }\n });\n \n- it('reloads HOCs if they return functions', () => {\n+ it('reloads HOCs if they return functions', async () => {\n if (__DEV__) {\n- render(`\n+ await render(`\n function hoc(letter) {\n return function() {\n return

{letter}1<\/h1>;\n@@ -309,7 +315,7 @@ describe('ReactFreshIntegration', () => {\n `);\n const el = container.firstChild;\n expect(el.textContent).toBe('A1');\n- patch(`\n+ await patch(`\n function hoc(letter) {\n return function() {\n return

{letter}2<\/h1>;\n@@ -327,9 +333,9 @@ describe('ReactFreshIntegration', () => {\n }\n });\n \n- it('resets state when renaming a state variable', () => {\n+ it('resets state when renaming a state variable', async () => {\n if (DEV) {\n- render(`\n+ await render(`\n const {useState} = React;\n const S = 1;\n \n@@ -341,7 +347,7 @@ describe('ReactFreshIntegration', () => {\n const el = container.firstChild;\n expect(el.textContent).toBe('A1');\n \n- patch(`\n+ await patch(`\n const {useState} = React;\n const S = 2;\n \n@@ -354,7 +360,7 @@ describe('ReactFreshIntegration', () => {\n expect(container.firstChild).toBe(el);\n expect(el.textContent).toBe('B1');\n \n- patch(`\n+ await patch(`\n const {useState} = React;\n const S = 3;\n \n@@ -370,9 +376,9 @@ describe('ReactFreshIntegration', () => {\n }\n });\n \n- it('resets state when renaming a state variable in a HOC', () => {\n+ it('resets state when renaming a state variable in a HOC', async () => {\n if (DEV) {\n- render(`\n+ await render(`\n const {useState} = React;\n const S = 1;\n \n@@ -390,7 +396,7 @@ describe('ReactFreshIntegration', () => {\n const el = container.firstChild;\n expect(el.textContent).toBe('A1');\n \n- patch(`\n+ await patch(`\n const {useState} = React;\n const S = 2;\n \n@@ -409,7 +415,7 @@ describe('ReactFreshIntegration', () => {\n expect(container.firstChild).toBe(el);\n expect(el.textContent).toBe('B1');\n \n- patch(`\n+ await patch(`\n const {useState} = React;\n const S = 3;\n \n@@ -431,9 +437,9 @@ describe('ReactFreshIntegration', () => {\n }\n });\n \n- it('resets state when renaming a state variable in a HOC with indirection', () => {\n+ it('resets state when renaming a state variable in a HOC with indirection', async () => {\n if (DEV) {\n- render(`\n+ await render(`\n const {useState} = React;\n const S = 1;\n \n@@ -453,7 +459,7 @@ describe('ReactFreshIntegration', () => {\n const el = container.firstChild;\n expect(el.textContent).toBe('A1');\n \n- patch(`\n+ await patch(`\n const {useState} = React;\n const S = 2;\n \n@@ -474,7 +480,7 @@ describe('ReactFreshIntegration', () => {\n expect(container.firstChild).toBe(el);\n expect(el.textContent).toBe('B1');\n \n- patch(`\n+ await patch(`\n const {useState} = React;\n const S = 3;\n \n@@ -498,9 +504,9 @@ describe('ReactFreshIntegration', () => {\n }\n });\n \n- it('resets state when renaming a state variable inside a HOC with direct call', () => {\n+ it('resets state when renaming a state variable inside a HOC with direct call', async () => {\n if (DEV) {\n- render(`\n+ await render(`\n const {useState} = React;\n const S = 1;\n \n@@ -518,7 +524,7 @@ describe('ReactFreshIntegration', () => {\n const el = container.firstChild;\n expect(el.textContent).toBe('A1');\n \n- patch(`\n+ await patch(`\n const {useState} = React;\n const S = 2;\n \n@@ -537,7 +543,7 @@ describe('ReactFreshIntegration', () => {\n expect(container.firstChild).toBe(el);\n expect(el.textContent).toBe('B1');\n \n- patch(`\n+ await patch(`\n const {useState} = React;\n const S = 3;\n \n@@ -559,9 +565,9 @@ describe('ReactFreshIntegration', () => {\n }\n });\n \n- it('does not crash when changing Hook order inside a HOC with direct call', () => {\n+ it('does not crash when changing Hook order inside a HOC with direct call', async () => {\n if (DEV) {\n- render(`\n+ await render(`\n const {useEffect} = React;\n \n function hocWithDirectCall(Wrapped) {\n@@ -578,7 +584,7 @@ describe('ReactFreshIntegration', () => {\n const el = container.firstChild;\n expect(el.textContent).toBe('A');\n \n- patch(`\n+ await patch(`\n const {useEffect} = React;\n \n function hocWithDirectCall(Wrapped) {\n@@ -600,9 +606,9 @@ describe('ReactFreshIntegration', () => {\n }\n });\n \n- it('does not crash when changing Hook order inside a memo-ed HOC with direct call', () => {\n+ it('does not crash when changing Hook order inside a memo-ed HOC with direct call', async () => {\n if (DEV) {\n- render(`\n+ await render(`\n const {useEffect, memo} = React;\n \n function hocWithDirectCall(Wrapped) {\n@@ -619,7 +625,7 @@ describe('ReactFreshIntegration', () => {\n const el = container.firstChild;\n expect(el.textContent).toBe('A');\n \n- patch(`\n+ await patch(`\n const {useEffect, memo} = React;\n \n function hocWithDirectCall(Wrapped) {\n@@ -641,9 +647,9 @@ describe('ReactFreshIntegration', () => {\n }\n });\n \n- it('does not crash when changing Hook order inside a memo+forwardRef-ed HOC with direct call', () => {\n+ it('does not crash when changing Hook order inside a memo+forwardRef-ed HOC with direct call', async () => {\n if (DEV) {\n- render(`\n+ await render(`\n const {useEffect, memo, forwardRef} = React;\n \n function hocWithDirectCall(Wrapped) {\n@@ -660,7 +666,7 @@ describe('ReactFreshIntegration', () => {\n const el = container.firstChild;\n expect(el.textContent).toBe('A');\n \n- patch(`\n+ await patch(`\n const {useEffect, memo, forwardRef} = React;\n \n function hocWithDirectCall(Wrapped) {\n@@ -682,9 +688,9 @@ describe('ReactFreshIntegration', () => {\n }\n });\n \n- it('does not crash when changing Hook order inside a HOC returning an object', () => {\n+ it('does not crash when changing Hook order inside a HOC returning an object', async () => {\n if (DEV) {\n- render(`\n+ await render(`\n const {useEffect} = React;\n \n function hocWithDirectCall(Wrapped) {\n@@ -699,7 +705,7 @@ describe('ReactFreshIntegration', () => {\n const el = container.firstChild;\n expect(el.textContent).toBe('A');\n \n- patch(`\n+ await patch(`\n const {useEffect} = React;\n \n function hocWithDirectCall(Wrapped) {\n@@ -719,9 +725,9 @@ describe('ReactFreshIntegration', () => {\n }\n });\n \n- it('resets effects while preserving state', () => {\n+ it('resets effects while preserving state', async () => {\n if (DEV) {\n- render(`\n+ await render(`\n const {useState} = React;\n \n export default function App() {\n@@ -733,41 +739,39 @@ describe('ReactFreshIntegration', () => {\n expect(el.textContent).toBe('A0');\n \n \/\/ Add an effect.\n- patch(`\n+ await patch(`\n const {useState} = React;\n \n export default function App() {\n const [value, setValue] = useState(0);\n React.useEffect(() => {\n- const id = setInterval(() => {\n- setValue(v => v + 1);\n- }, 1000);\n- return () => clearInterval(id);\n+ Scheduler.log('B mount');\n+ setValue(1)\n+ return () => {\n+ Scheduler.log('B unmount');\n+ };\n }, []);\n return

B{value}<\/h1>;\n }\n `);\n+\n \/\/ We added an effect, thereby changing Hook order.\n \/\/ This causes a remount.\n expect(container.firstChild).not.toBe(el);\n el = container.firstChild;\n- expect(el.textContent).toBe('B0');\n-\n- act(() => {\n- jest.advanceTimersByTime(1000);\n- });\n expect(el.textContent).toBe('B1');\n+ assertLog(['B mount']);\n \n- patch(`\n+ await patch(`\n const {useState} = React;\n \n export default function App() {\n const [value, setValue] = useState(0);\n React.useEffect(() => {\n- const id = setInterval(() => {\n- setValue(v => v + 10);\n- }, 1000);\n- return () => clearInterval(id);\n+ Scheduler.log('C mount');\n+ return () => {\n+ Scheduler.log('C unmount');\n+ };\n }, []);\n return

C{value}<\/h1>;\n }\n@@ -776,14 +780,10 @@ describe('ReactFreshIntegration', () => {\n expect(container.firstChild).toBe(el);\n expect(el.textContent).toBe('C1');\n \n- \/\/ Effects are always reset, so timer was reinstalled.\n- \/\/ The new version increments by 10 rather than 1.\n- act(() => {\n- jest.advanceTimersByTime(1000);\n- });\n- expect(el.textContent).toBe('C11');\n+ \/\/ Effects are always reset, so effect B was unmounted and C was mounted.\n+ assertLog(['B unmount', 'C mount']);\n \n- patch(`\n+ await patch(`\n const {useState} = React;\n \n export default function App() {\n@@ -796,12 +796,13 @@ describe('ReactFreshIntegration', () => {\n expect(container.firstChild).not.toBe(el);\n el = container.firstChild;\n expect(el.textContent).toBe('D0');\n+ assertLog(['C unmount']);\n }\n });\n \n- it('does not get confused when custom hooks are reordered', () => {\n+ it('does not get confused when custom hooks are reordered', async () => {\n if (DEV) {\n- render(`\n+ await render(`\n function useFancyState(initialState) {\n return React.useState(initialState);\n }\n@@ -817,7 +818,7 @@ describe('ReactFreshIntegration', () => {\n let el = container.firstChild;\n expect(el.textContent).toBe('AXY');\n \n- patch(`\n+ await patch(`\n function useFancyState(initialState) {\n return React.useState(initialState);\n }\n@@ -834,7 +835,7 @@ describe('ReactFreshIntegration', () => {\n expect(container.firstChild).toBe(el);\n expect(el.textContent).toBe('BXY');\n \n- patch(`\n+ await patch(`\n function useFancyState(initialState) {\n return React.useState(initialState);\n }\n@@ -855,9 +856,9 @@ describe('ReactFreshIntegration', () => {\n }\n });\n \n- it('does not get confused when component is called early', () => {\n+ it('does not get confused when component is called early', async () => {\n if (DEV) {\n- render(`\n+ await render(`\n \/\/ This isn't really a valid pattern but it's close enough\n \/\/ to simulate what happens when you call ReactDOM.render\n \/\/ in the same file. We want to ensure this doesn't confuse\n@@ -881,7 +882,7 @@ describe('ReactFreshIntegration', () => {\n let el = container.firstChild;\n expect(el.textContent).toBe('AXY');\n \n- patch(`\n+ await patch(`\n \/\/ This isn't really a valid pattern but it's close enough\n \/\/ to simulate what happens when you call ReactDOM.render\n \/\/ in the same file. We want to ensure this doesn't confuse\n@@ -906,7 +907,7 @@ describe('ReactFreshIntegration', () => {\n expect(container.firstChild).toBe(el);\n expect(el.textContent).toBe('BXY');\n \n- patch(`\n+ await patch(`\n \/\/ This isn't really a valid pattern but it's close enough\n \/\/ to simulate what happens when you call ReactDOM.render\n \/\/ in the same file. We want to ensure this doesn't confuse\n@@ -935,10 +936,10 @@ describe('ReactFreshIntegration', () => {\n }\n });\n \n- it('does not get confused by Hooks defined inline', () => {\n+ it('does not get confused by Hooks defined inline', async () => {\n \/\/ This is not a recommended pattern but at least it shouldn't break.\n if (DEV) {\n- render(`\n+ await render(`\n const App = () => {\n const useFancyState = (initialState) => {\n const result = React.useState(initialState);\n@@ -954,7 +955,7 @@ describe('ReactFreshIntegration', () => {\n let el = container.firstChild;\n expect(el.textContent).toBe('AX1Y1');\n \n- patch(`\n+ await patch(`\n const App = () => {\n const useFancyState = (initialState) => {\n const result = React.useState(initialState);\n@@ -978,9 +979,9 @@ describe('ReactFreshIntegration', () => {\n }\n });\n \n- it('remounts component if custom hook it uses changes order', () => {\n+ it('remounts component if custom hook it uses changes order', async () => {\n if (DEV) {\n- render(`\n+ await render(`\n const App = () => {\n const [x, setX] = useFancyState('X');\n const [y, setY] = useFancyState('Y');\n@@ -1001,7 +1002,7 @@ describe('ReactFreshIntegration', () => {\n let el = container.firstChild;\n expect(el.textContent).toBe('AXY');\n \n- patch(`\n+ await patch(`\n const App = () => {\n const [x, setX] = useFancyState('X');\n const [y, setY] = useFancyState('Y');\n@@ -1024,7 +1025,7 @@ describe('ReactFreshIntegration', () => {\n expect(container.firstChild).toBe(el);\n expect(el.textContent).toBe('BXY');\n \n- patch(`\n+ await patch(`\n const App = () => {\n const [x, setX] = useFancyState('X');\n const [y, setY] = useFancyState('Y');\n@@ -1049,7 +1050,7 @@ describe('ReactFreshIntegration', () => {\n el = container.firstChild;\n expect(el.textContent).toBe('CXY');\n \n- patch(`\n+ await patch(`\n const App = () => {\n const [x, setX] = useFancyState('X');\n const [y, setY] = useFancyState('Y');\n@@ -1075,9 +1076,9 @@ describe('ReactFreshIntegration', () => {\n }\n });\n \n- it('does not lose the inferred arrow names', () => {\n+ it('does not lose the inferred arrow names', async () => {\n if (DEV) {\n- render(`\n+ await render(`\n const Parent = () => {\n return ;\n };\n@@ -1097,9 +1098,9 @@ describe('ReactFreshIntegration', () => {\n }\n });\n \n- it('does not lose the inferred function names', () => {\n+ it('does not lose the inferred function names', async () => {\n if (DEV) {\n- render(`\n+ await render(`\n var Parent = function() {\n return ;\n };\n@@ -1119,9 +1120,9 @@ describe('ReactFreshIntegration', () => {\n }\n });\n \n- it('resets state on every edit with @refresh reset annotation', () => {\n+ it('resets state on every edit with @refresh reset annotation', async () => {\n if (DEV) {\n- render(`\n+ await render(`\n const {useState} = React;\n const S = 1;\n \n@@ -1133,7 +1134,7 @@ describe('ReactFreshIntegration', () => {\n let el = container.firstChild;\n expect(el.textContent).toBe('A1');\n \n- patch(`\n+ await patch(`\n const {useState} = React;\n const S = 2;\n \n@@ -1146,7 +1147,7 @@ describe('ReactFreshIntegration', () => {\n expect(container.firstChild).toBe(el);\n expect(el.textContent).toBe('B1');\n \n- patch(`\n+ await patch(`\n const {useState} = React;\n const S = 3;\n \n@@ -1162,7 +1163,7 @@ describe('ReactFreshIntegration', () => {\n el = container.firstChild;\n expect(el.textContent).toBe('C3');\n \n- patch(`\n+ await patch(`\n const {useState} = React;\n const S = 4;\n \n@@ -1179,7 +1180,7 @@ describe('ReactFreshIntegration', () => {\n el = container.firstChild;\n expect(el.textContent).toBe('D4');\n \n- patch(`\n+ await patch(`\n const {useState} = React;\n const S = 5;\n \n@@ -1193,7 +1194,7 @@ describe('ReactFreshIntegration', () => {\n expect(container.firstChild).toBe(el);\n expect(el.textContent).toBe('E4');\n \n- patch(`\n+ await patch(`\n const {useState} = React;\n const S = 6;\n \n@@ -1206,7 +1207,7 @@ describe('ReactFreshIntegration', () => {\n expect(container.firstChild).toBe(el);\n expect(el.textContent).toBe('F4');\n \n- patch(`\n+ await patch(`\n const {useState} = React;\n const S = 7;\n \n@@ -1227,9 +1228,9 @@ describe('ReactFreshIntegration', () => {\n \n \/\/ This is best effort for simple cases.\n \/\/ We won't attempt to resolve identifiers.\n- it('resets state when useState initial state is edited', () => {\n+ it('resets state when useState initial state is edited', async () => {\n if (DEV) {\n- render(`\n+ await render(`\n const {useState} = React;\n \n export default function App() {\n@@ -1240,7 +1241,7 @@ describe('ReactFreshIntegration', () => {\n let el = container.firstChild;\n expect(el.textContent).toBe('A1');\n \n- patch(`\n+ await patch(`\n const {useState} = React;\n \n export default function App() {\n@@ -1252,7 +1253,7 @@ describe('ReactFreshIntegration', () => {\n expect(container.firstChild).toBe(el);\n expect(el.textContent).toBe('B1');\n \n- patch(`\n+ await patch(`\n const {useState} = React;\n \n export default function App() {\n@@ -1269,9 +1270,9 @@ describe('ReactFreshIntegration', () => {\n \n \/\/ This is best effort for simple cases.\n \/\/ We won't attempt to resolve identifiers.\n- it('resets state when useReducer initial state is edited', () => {\n+ it('resets state when useReducer initial state is edited', async () => {\n if (DEV) {\n- render(`\n+ await render(`\n const {useReducer} = React;\n \n export default function App() {\n@@ -1282,7 +1283,7 @@ describe('ReactFreshIntegration', () => {\n let el = container.firstChild;\n expect(el.textContent).toBe('A1');\n \n- patch(`\n+ await patch(`\n const {useReducer} = React;\n \n export default function App() {\n@@ -1294,7 +1295,7 @@ describe('ReactFreshIntegration', () => {\n expect(container.firstChild).toBe(el);\n expect(el.textContent).toBe('B1');\n \n- patch(`\n+ await patch(`\n const {useReducer} = React;\n \n export default function App() {\n@@ -1309,16 +1310,16 @@ describe('ReactFreshIntegration', () => {\n }\n });\n \n- it('remounts when switching export from function to class', () => {\n+ it('remounts when switching export from function to class', async () => {\n if (DEV) {\n- render(`\n+ await render(`\n export default function App() {\n return
A1<\/h1>;\n }\n `);\n let el = container.firstChild;\n expect(el.textContent).toBe('A1');\n- patch(`\n+ await patch(`\n export default function App() {\n return
A2<\/h1>;\n }\n@@ -1327,7 +1328,7 @@ describe('ReactFreshIntegration', () => {\n expect(container.firstChild).toBe(el);\n expect(el.textContent).toBe('A2');\n \n- patch(`\n+ await patch(`\n export default class App extends React.Component {\n render() {\n return
B1<\/h1>\n@@ -1338,7 +1339,7 @@ describe('ReactFreshIntegration', () => {\n expect(container.firstChild).not.toBe(el);\n el = container.firstChild;\n expect(el.textContent).toBe('B1');\n- patch(`\n+ await patch(`\n export default class App extends React.Component {\n render() {\n return
B2<\/h1>\n@@ -1350,7 +1351,7 @@ describe('ReactFreshIntegration', () => {\n el = container.firstChild;\n expect(el.textContent).toBe('B2');\n \n- patch(`\n+ await patch(`\n export default function App() {\n return
C1<\/h1>;\n }\n@@ -1359,7 +1360,7 @@ describe('ReactFreshIntegration', () => {\n expect(container.firstChild).not.toBe(el);\n el = container.firstChild;\n expect(el.textContent).toBe('C1');\n- patch(`\n+ await patch(`\n export default function App() {\n return
C2<\/h1>;\n }\n@@ -1367,14 +1368,14 @@ describe('ReactFreshIntegration', () => {\n expect(container.firstChild).toBe(el);\n expect(el.textContent).toBe('C2');\n \n- patch(`\n+ await patch(`\n export default function App() {\n return
D1<\/h1>;\n }\n `);\n el = container.firstChild;\n expect(el.textContent).toBe('D1');\n- patch(`\n+ await patch(`\n export default function App() {\n return
D2<\/h1>;\n }\n@@ -1385,9 +1386,9 @@ describe('ReactFreshIntegration', () => {\n }\n });\n \n- it('remounts when switching export from class to function', () => {\n+ it('remounts when switching export from class to function', async () => {\n if (DEV) {\n- render(`\n+ await render(`\n export default class App extends React.Component {\n render() {\n return
A1<\/h1>\n@@ -1396,7 +1397,7 @@ describe('ReactFreshIntegration', () => {\n `);\n let el = container.firstChild;\n expect(el.textContent).toBe('A1');\n- patch(`\n+ await patch(`\n export default class App extends React.Component {\n render() {\n return
A2<\/h1>\n@@ -1408,7 +1409,7 @@ describe('ReactFreshIntegration', () => {\n el = container.firstChild;\n expect(el.textContent).toBe('A2');\n \n- patch(`\n+ await patch(`\n export default function App() {\n return
B1<\/h1>;\n }\n@@ -1417,7 +1418,7 @@ describe('ReactFreshIntegration', () => {\n expect(container.firstChild).not.toBe(el);\n el = container.firstChild;\n expect(el.textContent).toBe('B1');\n- patch(`\n+ await patch(`\n export default function App() {\n return
B2<\/h1>;\n }\n@@ -1426,7 +1427,7 @@ describe('ReactFreshIntegration', () => {\n expect(container.firstChild).toBe(el);\n expect(el.textContent).toBe('B2');\n \n- patch(`\n+ await patch(`\n export default class App extends React.Component {\n render() {\n return
C1<\/h1>\n@@ -1440,16 +1441,16 @@ describe('ReactFreshIntegration', () => {\n }\n });\n \n- it('remounts when wrapping export in a HOC', () => {\n+ it('remounts when wrapping export in a HOC', async () => {\n if (DEV) {\n- render(`\n+ await render(`\n export default function App() {\n return
A1<\/h1>;\n }\n `);\n let el = container.firstChild;\n expect(el.textContent).toBe('A1');\n- patch(`\n+ await patch(`\n export default function App() {\n return
A2<\/h1>;\n }\n@@ -1458,7 +1459,7 @@ describe('ReactFreshIntegration', () => {\n expect(container.firstChild).toBe(el);\n expect(el.textContent).toBe('A2');\n \n- patch(`\n+ await patch(`\n function hoc(Inner) {\n return function Wrapper() {\n return ;\n@@ -1475,7 +1476,7 @@ describe('ReactFreshIntegration', () => {\n expect(container.firstChild).not.toBe(el);\n el = container.firstChild;\n expect(el.textContent).toBe('B1');\n- patch(`\n+ await patch(`\n function hoc(Inner) {\n return function Wrapper() {\n return ;\n@@ -1492,7 +1493,7 @@ describe('ReactFreshIntegration', () => {\n expect(container.firstChild).toBe(el);\n expect(el.textContent).toBe('B2');\n \n- patch(`\n+ await patch(`\n export default function App() {\n return
C1<\/h1>;\n }\n@@ -1501,7 +1502,7 @@ describe('ReactFreshIntegration', () => {\n expect(container.firstChild).not.toBe(el);\n el = container.firstChild;\n expect(el.textContent).toBe('C1');\n- patch(`\n+ await patch(`\n export default function App() {\n return
C2<\/h1>;\n }\n@@ -1511,16 +1512,16 @@ describe('ReactFreshIntegration', () => {\n }\n });\n \n- it('remounts when wrapping export in memo()', () => {\n+ it('remounts when wrapping export in memo()', async () => {\n if (DEV) {\n- render(`\n+ await render(`\n export default function App() {\n return
A1<\/h1>;\n }\n `);\n let el = container.firstChild;\n expect(el.textContent).toBe('A1');\n- patch(`\n+ await patch(`\n export default function App() {\n return
A2<\/h1>;\n }\n@@ -1529,7 +1530,7 @@ describe('ReactFreshIntegration', () => {\n expect(container.firstChild).toBe(el);\n expect(el.textContent).toBe('A2');\n \n- patch(`\n+ await patch(`\n function App() {\n return
B1<\/h1>;\n }\n@@ -1540,7 +1541,7 @@ describe('ReactFreshIntegration', () => {\n expect(container.firstChild).not.toBe(el);\n el = container.firstChild;\n expect(el.textContent).toBe('B1');\n- patch(`\n+ await patch(`\n function App() {\n return
B2<\/h1>;\n }\n@@ -1551,7 +1552,7 @@ describe('ReactFreshIntegration', () => {\n expect(container.firstChild).toBe(el);\n expect(el.textContent).toBe('B2');\n \n- patch(`\n+ await patch(`\n export default function App() {\n return
C1<\/h1>;\n }\n@@ -1560,7 +1561,7 @@ describe('ReactFreshIntegration', () => {\n expect(container.firstChild).not.toBe(el);\n el = container.firstChild;\n expect(el.textContent).toBe('C1');\n- patch(`\n+ await patch(`\n export default function App() {\n return
C2<\/h1>;\n }\n@@ -1570,16 +1571,16 @@ describe('ReactFreshIntegration', () => {\n }\n });\n \n- it('remounts when wrapping export in forwardRef()', () => {\n+ it('remounts when wrapping export in forwardRef()', async () => {\n if (DEV) {\n- render(`\n+ await render(`\n export default function App() {\n return
A1<\/h1>;\n }\n `);\n let el = container.firstChild;\n expect(el.textContent).toBe('A1');\n- patch(`\n+ await patch(`\n export default function App() {\n return
A2<\/h1>;\n }\n@@ -1588,7 +1589,7 @@ describe('ReactFreshIntegration', () => {\n expect(container.firstChild).toBe(el);\n expect(el.textContent).toBe('A2');\n \n- patch(`\n+ await patch(`\n function App() {\n return
B1<\/h1>;\n }\n@@ -1599,7 +1600,7 @@ describe('ReactFreshIntegration', () => {\n expect(container.firstChild).not.toBe(el);\n el = container.firstChild;\n expect(el.textContent).toBe('B1');\n- patch(`\n+ await patch(`\n function App() {\n return
B2<\/h1>;\n }\n@@ -1610,7 +1611,7 @@ describe('ReactFreshIntegration', () => {\n expect(container.firstChild).toBe(el);\n expect(el.textContent).toBe('B2');\n \n- patch(`\n+ await patch(`\n export default function App() {\n return
C1<\/h1>;\n }\n@@ -1619,7 +1620,7 @@ describe('ReactFreshIntegration', () => {\n expect(container.firstChild).not.toBe(el);\n el = container.firstChild;\n expect(el.textContent).toBe('C1');\n- patch(`\n+ await patch(`\n export default function App() {\n return
C2<\/h1>;\n }\n@@ -1630,10 +1631,10 @@ describe('ReactFreshIntegration', () => {\n });\n \n if (!require('shared\/ReactFeatureFlags').disableModulePatternComponents) {\n- it('remounts deprecated factory components', () => {\n+ it('remounts deprecated factory components', async () => {\n if (DEV) {\n- expect(() => {\n- render(`\n+ await expect(async () => {\n+ await render(`\n function Parent() {\n return {\n render() {\n@@ -1654,7 +1655,7 @@ describe('ReactFreshIntegration', () => {\n );\n const el = container.firstChild;\n expect(el.textContent).toBe('A1');\n- patch(`\n+ await patch(`\n function Parent() {\n return {\n render() {\n@@ -1686,14 +1687,14 @@ describe('ReactFreshIntegration', () => {\n delete global.FakeModuleSystem;\n });\n \n- it('remounts component if custom hook it uses changes order on first edit', () => {\n+ it('remounts component if custom hook it uses changes order on first edit', async () => {\n \/\/ This test verifies that remounting works even if calls to custom Hooks\n \/\/ were transformed with an inline requires transform, like we have on RN.\n \/\/ Inline requires make it harder to compare previous and next signatures\n \/\/ because useFancyState inline require always resolves to the newest version.\n \/\/ We're not actually using inline requires in the test, but it has similar semantics.\n if (DEV) {\n- render(`\n+ await render(`\n const FakeModuleSystem = global.FakeModuleSystem;\n \n FakeModuleSystem.useFancyState = function(initialState) {\n@@ -1711,7 +1712,7 @@ describe('ReactFreshIntegration', () => {\n let el = container.firstChild;\n expect(el.textContent).toBe('AXY');\n \n- patch(`\n+ await patch(`\n const FakeModuleSystem = global.FakeModuleSystem;\n \n FakeModuleSystem.useFancyState = function(initialState) {\n@@ -1733,7 +1734,7 @@ describe('ReactFreshIntegration', () => {\n el = container.firstChild;\n expect(el.textContent).toBe('BXY');\n \n- patch(`\n+ await patch(`\n const FakeModuleSystem = global.FakeModuleSystem;\n \n FakeModuleSystem.useFancyState = function(initialState) {\n@@ -1756,9 +1757,9 @@ describe('ReactFreshIntegration', () => {\n }\n });\n \n- it('remounts component if custom hook it uses changes order on second edit', () => {\n+ it('remounts component if custom hook it uses changes order on second edit', async () => {\n if (DEV) {\n- render(`\n+ await render(`\n const FakeModuleSystem = global.FakeModuleSystem;\n \n FakeModuleSystem.useFancyState = function(initialState) {\n@@ -1776,7 +1777,7 @@ describe('ReactFreshIntegration', () => {\n let el = container.firstChild;\n expect(el.textContent).toBe('AXY');\n \n- patch(`\n+ await patch(`\n const FakeModuleSystem = global.FakeModuleSystem;\n \n FakeModuleSystem.useFancyState = function(initialState) {\n@@ -1794,7 +1795,7 @@ describe('ReactFreshIntegration', () => {\n expect(container.firstChild).toBe(el);\n expect(el.textContent).toBe('BXY');\n \n- patch(`\n+ await patch(`\n const FakeModuleSystem = global.FakeModuleSystem;\n \n FakeModuleSystem.useFancyState = function(initialState) {\n@@ -1816,7 +1817,7 @@ describe('ReactFreshIntegration', () => {\n el = container.firstChild;\n expect(el.textContent).toBe('CXY');\n \n- patch(`\n+ await patch(`\n const FakeModuleSystem = global.FakeModuleSystem;\n \n FakeModuleSystem.useFancyState = function(initialState) {\n@@ -1839,9 +1840,9 @@ describe('ReactFreshIntegration', () => {\n }\n });\n \n- it('recovers if evaluating Hook list throws', () => {\n+ it('recovers if evaluating Hook list throws', async () => {\n if (DEV) {\n- render(`\n+ await render(`\n let FakeModuleSystem = null;\n \n global.FakeModuleSystem.useFancyState = function(initialState) {\n@@ -1860,7 +1861,7 @@ describe('ReactFreshIntegration', () => {\n let el = container.firstChild;\n expect(el.textContent).toBe('AXY');\n \n- patch(`\n+ await patch(`\n let FakeModuleSystem = null;\n \n global.FakeModuleSystem.useFancyState = function(initialState) {\n@@ -1885,9 +1886,9 @@ describe('ReactFreshIntegration', () => {\n }\n });\n \n- it('remounts component if custom hook it uses changes order behind an indirection', () => {\n+ it('remounts component if custom hook it uses changes order behind an indirection', async () => {\n if (DEV) {\n- render(`\n+ await render(`\n const FakeModuleSystem = global.FakeModuleSystem;\n \n FakeModuleSystem.useFancyState = function(initialState) {\n@@ -1913,7 +1914,7 @@ describe('ReactFreshIntegration', () => {\n let el = container.firstChild;\n expect(el.textContent).toBe('AXY');\n \n- patch(`\n+ await patch(`\n const FakeModuleSystem = global.FakeModuleSystem;\n \n FakeModuleSystem.useFancyState = function(initialState) {\n@@ -1944,7 +1945,7 @@ describe('ReactFreshIntegration', () => {\n el = container.firstChild;\n expect(el.textContent).toBe('BXY');\n \n- patch(`\n+ await patch(`\n const FakeModuleSystem = global.FakeModuleSystem;\n \n FakeModuleSystem.useFancyState = function(initialState) {\n@@ -1978,9 +1979,9 @@ describe('ReactFreshIntegration', () => {\n }\n \n function testTypeScript(render, patch) {\n- it('reloads component exported in typescript namespace', () => {\n+ it('reloads component exported in typescript namespace', async () => {\n if (DEV) {\n- render(`\n+ await render(`\n namespace Foo {\n export namespace Bar {\n export const Child = ({prop}) => {\n@@ -1995,7 +1996,7 @@ describe('ReactFreshIntegration', () => {\n `);\n const el = container.firstChild;\n expect(el.textContent).toBe('A1');\n- patch(`\n+ await patch(`\n namespace Foo {\n export namespace Bar {\n export const Child = ({prop}) => {\n","parents":["a7fa58d8b6e8306f9c4f4135e702f1bc7a099a49"]}

{letter}1<\/h1>;\n@@ -309,7 +315,7 @@ describe('ReactFreshIntegration', () => {\n `);\n const el = container.firstChild;\n expect(el.textContent).toBe('A1');\n- patch(`\n+ await patch(`\n function hoc(letter) {\n return function() {\n return

A1<\/h1>;\n }\n `);\n let el = container.firstChild;\n expect(el.textContent).toBe('A1');\n- patch(`\n+ await patch(`\n export default function App() {\n return

A2<\/h1>;\n }\n@@ -1327,7 +1328,7 @@ describe('ReactFreshIntegration', () => {\n expect(container.firstChild).toBe(el);\n expect(el.textContent).toBe('A2');\n \n- patch(`\n+ await patch(`\n export default class App extends React.Component {\n render() {\n return

B1<\/h1>\n@@ -1338,7 +1339,7 @@ describe('ReactFreshIntegration', () => {\n expect(container.firstChild).not.toBe(el);\n el = container.firstChild;\n expect(el.textContent).toBe('B1');\n- patch(`\n+ await patch(`\n export default class App extends React.Component {\n render() {\n return

B2<\/h1>\n@@ -1350,7 +1351,7 @@ describe('ReactFreshIntegration', () => {\n el = container.firstChild;\n expect(el.textContent).toBe('B2');\n \n- patch(`\n+ await patch(`\n export default function App() {\n return

C1<\/h1>;\n }\n@@ -1359,7 +1360,7 @@ describe('ReactFreshIntegration', () => {\n expect(container.firstChild).not.toBe(el);\n el = container.firstChild;\n expect(el.textContent).toBe('C1');\n- patch(`\n+ await patch(`\n export default function App() {\n return

C2<\/h1>;\n }\n@@ -1367,14 +1368,14 @@ describe('ReactFreshIntegration', () => {\n expect(container.firstChild).toBe(el);\n expect(el.textContent).toBe('C2');\n \n- patch(`\n+ await patch(`\n export default function App() {\n return

D1<\/h1>;\n }\n `);\n el = container.firstChild;\n expect(el.textContent).toBe('D1');\n- patch(`\n+ await patch(`\n export default function App() {\n return

A1<\/h1>\n@@ -1396,7 +1397,7 @@ describe('ReactFreshIntegration', () => {\n `);\n let el = container.firstChild;\n expect(el.textContent).toBe('A1');\n- patch(`\n+ await patch(`\n export default class App extends React.Component {\n render() {\n return

A2<\/h1>\n@@ -1408,7 +1409,7 @@ describe('ReactFreshIntegration', () => {\n el = container.firstChild;\n expect(el.textContent).toBe('A2');\n \n- patch(`\n+ await patch(`\n export default function App() {\n return

B1<\/h1>;\n }\n@@ -1417,7 +1418,7 @@ describe('ReactFreshIntegration', () => {\n expect(container.firstChild).not.toBe(el);\n el = container.firstChild;\n expect(el.textContent).toBe('B1');\n- patch(`\n+ await patch(`\n export default function App() {\n return

B2<\/h1>;\n }\n@@ -1426,7 +1427,7 @@ describe('ReactFreshIntegration', () => {\n expect(container.firstChild).toBe(el);\n expect(el.textContent).toBe('B2');\n \n- patch(`\n+ await patch(`\n export default class App extends React.Component {\n render() {\n return

C1<\/h1>\n@@ -1440,16 +1441,16 @@ describe('ReactFreshIntegration', () => {\n }\n });\n \n- it('remounts when wrapping export in a HOC', () => {\n+ it('remounts when wrapping export in a HOC', async () => {\n if (__DEV__) {\n- render(`\n+ await render(`\n export default function App() {\n return

A1<\/h1>;\n }\n `);\n let el = container.firstChild;\n expect(el.textContent).toBe('A1');\n- patch(`\n+ await patch(`\n export default function App() {\n return

C1<\/h1>;\n }\n@@ -1501,7 +1502,7 @@ describe('ReactFreshIntegration', () => {\n expect(container.firstChild).not.toBe(el);\n el = container.firstChild;\n expect(el.textContent).toBe('C1');\n- patch(`\n+ await patch(`\n export default function App() {\n return

A1<\/h1>;\n }\n `);\n let el = container.firstChild;\n expect(el.textContent).toBe('A1');\n- patch(`\n+ await patch(`\n export default function App() {\n return

A2<\/h1>;\n }\n@@ -1529,7 +1530,7 @@ describe('ReactFreshIntegration', () => {\n expect(container.firstChild).toBe(el);\n expect(el.textContent).toBe('A2');\n \n- patch(`\n+ await patch(`\n function App() {\n return

B1<\/h1>;\n }\n@@ -1540,7 +1541,7 @@ describe('ReactFreshIntegration', () => {\n expect(container.firstChild).not.toBe(el);\n el = container.firstChild;\n expect(el.textContent).toBe('B1');\n- patch(`\n+ await patch(`\n function App() {\n return

B2<\/h1>;\n }\n@@ -1551,7 +1552,7 @@ describe('ReactFreshIntegration', () => {\n expect(container.firstChild).toBe(el);\n expect(el.textContent).toBe('B2');\n \n- patch(`\n+ await patch(`\n export default function App() {\n return

C1<\/h1>;\n }\n@@ -1560,7 +1561,7 @@ describe('ReactFreshIntegration', () => {\n expect(container.firstChild).not.toBe(el);\n el = container.firstChild;\n expect(el.textContent).toBe('C1');\n- patch(`\n+ await patch(`\n export default function App() {\n return

A1<\/h1>;\n }\n `);\n let el = container.firstChild;\n expect(el.textContent).toBe('A1');\n- patch(`\n+ await patch(`\n export default function App() {\n return

A2<\/h1>;\n }\n@@ -1588,7 +1589,7 @@ describe('ReactFreshIntegration', () => {\n expect(container.firstChild).toBe(el);\n expect(el.textContent).toBe('A2');\n \n- patch(`\n+ await patch(`\n function App() {\n return

B1<\/h1>;\n }\n@@ -1599,7 +1600,7 @@ describe('ReactFreshIntegration', () => {\n expect(container.firstChild).not.toBe(el);\n el = container.firstChild;\n expect(el.textContent).toBe('B1');\n- patch(`\n+ await patch(`\n function App() {\n return

B2<\/h1>;\n }\n@@ -1610,7 +1611,7 @@ describe('ReactFreshIntegration', () => {\n expect(container.firstChild).toBe(el);\n expect(el.textContent).toBe('B2');\n \n- patch(`\n+ await patch(`\n export default function App() {\n return

C1<\/h1>;\n }\n@@ -1619,7 +1620,7 @@ describe('ReactFreshIntegration', () => {\n expect(container.firstChild).not.toBe(el);\n el = container.firstChild;\n expect(el.textContent).toBe('C1');\n- patch(`\n+ await patch(`\n export default function App() {\n return

C1<\/h1>\n@@ -1440,16 +1441,16 @@ describe('ReactFreshIntegration', () => {\n }\n });\n \n- it('remounts when wrapping export in a HOC', () => {\n+ it('remounts when wrapping export in a HOC', async () => {\n if (DEV) {\n- render(`\n+ await render(`\n export default function App() {\n return

dillon1000/react

Files changed