{"body":"Continued cleanup of legacy root usage from RTR","parents":["bc13750bdf9ca29c7d23a71c5760c21a78cf3fc4"],"files":[{"path":"packages\/react-reconciler\/src\/__tests__\/ReactHooks-test.internal.js","status":"M"}],"commit":{"subject":"Use RTR with concurrent root in ReactHooks-test.internal (#28578)","authorName":"Jack Pope","authorEmail":"jackpope1@gmail.com","authoredAt":"2024-03-18T15:49:30-04:00","revision":"e02f87f139fae4b17234c0cc592ff4e0825c18db","shortRevision":"e02f87f139"},"patch":"diff --git a\/packages\/react-reconciler\/src\/__tests__\/ReactHooks-test.internal.js b\/packages\/react-reconciler\/src\/__tests__\/ReactHooks-test.internal.js\nindex c43d4ac3e1..ce0a45be89 100644\n--- a\/packages\/react-reconciler\/src\/__tests__\/ReactHooks-test.internal.js\n+++ b\/packages\/react-reconciler\/src\/__tests__\/ReactHooks-test.internal.js\n@@ -25,7 +25,6 @@ let waitForThrow;\n describe('ReactHooks', () => {\n beforeEach(() => {\n jest.resetModules();\n-\n ReactFeatureFlags = require('shared\/ReactFeatureFlags');\n \n React = require('react');\n@@ -42,16 +41,20 @@ describe('ReactHooks', () => {\n \n if (__DEV__) {\n \/\/ useDebugValue is a DEV-only hook\n- it('useDebugValue throws when used in a class component', () => {\n+ it('useDebugValue throws when used in a class component', async () => {\n class Example extends React.Component {\n render() {\n React.useDebugValue('abc');\n return null;\n }\n }\n- expect(() => {\n- ReactTestRenderer.create();\n- }).toThrow(\n+ await expect(async () => {\n+ await act(() => {\n+ ReactTestRenderer.create(, {\n+ unstable_isConcurrent: true,\n+ });\n+ });\n+ }).rejects.toThrow(\n 'Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen' +\n ' for one of the following reasons:\\n' +\n '1. You might have mismatching versions of React and the renderer (such as React DOM)\\n' +\n@@ -569,7 +572,7 @@ describe('ReactHooks', () => {\n expect(root).toMatchRenderedOutput('105');\n });\n \n- it('warns about variable number of dependencies', () => {\n+ it('warns about variable number of dependencies', async () => {\n const {useLayoutEffect} = React;\n function App(props) {\n useLayoutEffect(() => {\n@@ -577,10 +580,17 @@ describe('ReactHooks', () => {\n }, props.dependencies);\n return props.dependencies;\n }\n- const root = ReactTestRenderer.create();\n+ let root;\n+ await act(() => {\n+ root = ReactTestRenderer.create(, {\n+ unstable_isConcurrent: true,\n+ });\n+ });\n assertLog(['Did commit: A']);\n- expect(() => {\n- root.update();\n+ await expect(async () => {\n+ await act(() => {\n+ root.update();\n+ });\n }).toErrorDev([\n 'Warning: The final argument passed to useLayoutEffect changed size ' +\n 'between renders. The order and size of this array must remain ' +\n@@ -590,7 +600,7 @@ describe('ReactHooks', () => {\n ]);\n });\n \n- it('warns if switching from dependencies to no dependencies', () => {\n+ it('warns if switching from dependencies to no dependencies', async () => {\n const {useMemo} = React;\n function App({text, hasDeps}) {\n const resolvedText = useMemo(\n@@ -603,13 +613,20 @@ describe('ReactHooks', () => {\n return resolvedText;\n }\n \n- const root = ReactTestRenderer.create(null);\n- root.update();\n+ let root;\n+ await act(() => {\n+ root = ReactTestRenderer.create(null, {unstable_isConcurrent: true});\n+ });\n+ await act(() => {\n+ root.update();\n+ });\n assertLog(['Compute']);\n expect(root).toMatchRenderedOutput('HELLO');\n \n- expect(() => {\n- root.update();\n+ await expect(async () => {\n+ await act(() => {\n+ root.update();\n+ });\n }).toErrorDev([\n 'Warning: useMemo received a final argument during this render, but ' +\n 'not during the previous render. Even though the final argument is ' +\n@@ -630,7 +647,9 @@ describe('ReactHooks', () => {\n \n await expect(async () => {\n await act(() => {\n- ReactTestRenderer.create();\n+ ReactTestRenderer.create(, {\n+ unstable_isConcurrent: true,\n+ });\n });\n }).toErrorDev([\n 'Warning: useEffect received a final argument that is not an array (instead, received `string`). ' +\n@@ -644,7 +663,9 @@ describe('ReactHooks', () => {\n ]);\n await expect(async () => {\n await act(() => {\n- ReactTestRenderer.create();\n+ ReactTestRenderer.create(, {\n+ unstable_isConcurrent: true,\n+ });\n });\n }).toErrorDev([\n 'Warning: useEffect received a final argument that is not an array (instead, received `number`). ' +\n@@ -658,7 +679,9 @@ describe('ReactHooks', () => {\n ]);\n await expect(async () => {\n await act(() => {\n- ReactTestRenderer.create();\n+ ReactTestRenderer.create(, {\n+ unstable_isConcurrent: true,\n+ });\n });\n }).toErrorDev([\n 'Warning: useEffect received a final argument that is not an array (instead, received `object`). ' +\n@@ -672,13 +695,19 @@ describe('ReactHooks', () => {\n ]);\n \n await act(() => {\n- ReactTestRenderer.create();\n- ReactTestRenderer.create();\n- ReactTestRenderer.create();\n+ ReactTestRenderer.create(, {\n+ unstable_isConcurrent: true,\n+ });\n+ ReactTestRenderer.create(, {\n+ unstable_isConcurrent: true,\n+ });\n+ ReactTestRenderer.create(, {\n+ unstable_isConcurrent: true,\n+ });\n });\n });\n \n- it('warns if deps is not an array for useImperativeHandle', () => {\n+ it('warns if deps is not an array for useImperativeHandle', async () => {\n const {useImperativeHandle} = React;\n \n const App = React.forwardRef((props, ref) => {\n@@ -686,15 +715,31 @@ describe('ReactHooks', () => {\n return null;\n });\n \n- expect(() => {\n- ReactTestRenderer.create();\n+ await expect(async () => {\n+ await act(() => {\n+ ReactTestRenderer.create(, {\n+ unstable_isConcurrent: true,\n+ });\n+ });\n }).toErrorDev([\n 'Warning: useImperativeHandle received a final argument that is not an array (instead, received `string`). ' +\n 'When specified, the final argument must be an array.',\n ]);\n- ReactTestRenderer.create();\n- ReactTestRenderer.create();\n- ReactTestRenderer.create();\n+ await act(() => {\n+ ReactTestRenderer.create(, {\n+ unstable_isConcurrent: true,\n+ });\n+ });\n+ await act(() => {\n+ ReactTestRenderer.create(, {\n+ unstable_isConcurrent: true,\n+ });\n+ });\n+ await act(() => {\n+ ReactTestRenderer.create(, {\n+ unstable_isConcurrent: true,\n+ });\n+ });\n });\n \n it('does not forget render phase useState updates inside an effect', async () => {\n@@ -713,7 +758,7 @@ describe('ReactHooks', () => {\n return counter;\n }\n \n- const root = ReactTestRenderer.create(null);\n+ const root = ReactTestRenderer.create(null, {unstable_isConcurrent: true});\n await act(() => {\n root.update();\n });\n@@ -737,7 +782,7 @@ describe('ReactHooks', () => {\n return counter;\n }\n \n- const root = ReactTestRenderer.create(null);\n+ const root = ReactTestRenderer.create(null, {unstable_isConcurrent: true});\n await act(() => {\n root.update();\n });\n@@ -760,14 +805,14 @@ describe('ReactHooks', () => {\n return counter;\n }\n \n- const root = ReactTestRenderer.create(null);\n+ const root = ReactTestRenderer.create(null, {unstable_isConcurrent: true});\n await act(() => {\n root.update();\n });\n expect(root).toMatchRenderedOutput('4');\n });\n \n- it('warns for bad useImperativeHandle first arg', () => {\n+ it('warns for bad useImperativeHandle first arg', async () => {\n const {useImperativeHandle} = React;\n function App() {\n useImperativeHandle({\n@@ -776,10 +821,12 @@ describe('ReactHooks', () => {\n return null;\n }\n \n- expect(() => {\n- expect(() => {\n- ReactTestRenderer.create();\n- }).toThrow('create is not a function');\n+ await expect(async () => {\n+ await expect(async () => {\n+ await act(() => {\n+ ReactTestRenderer.create(, {unstable_isConcurrent: true});\n+ });\n+ }).rejects.toThrow('create is not a function');\n }).toErrorDev([\n 'Expected useImperativeHandle() first argument to either be a ' +\n 'ref callback or React.createRef() object. ' +\n@@ -789,7 +836,7 @@ describe('ReactHooks', () => {\n ]);\n });\n \n- it('warns for bad useImperativeHandle second arg', () => {\n+ it('warns for bad useImperativeHandle second arg', async () => {\n const {useImperativeHandle} = React;\n const App = React.forwardRef((props, ref) => {\n useImperativeHandle(ref, {\n@@ -798,8 +845,10 @@ describe('ReactHooks', () => {\n return null;\n });\n \n- expect(() => {\n- ReactTestRenderer.create();\n+ await expect(async () => {\n+ await act(() => {\n+ ReactTestRenderer.create(, {unstable_isConcurrent: true});\n+ });\n }).toErrorDev([\n 'Expected useImperativeHandle() second argument to be a function ' +\n 'that creates a handle. Instead received: object.',\n@@ -807,7 +856,7 @@ describe('ReactHooks', () => {\n });\n \n \/\/ https:\/\/github.com\/facebook\/react\/issues\/14022\n- it('works with ReactDOMServer calls inside a component', () => {\n+ it('works with ReactDOMServer calls inside a component', async () => {\n const {useState} = React;\n function App(props) {\n const markup1 = ReactDOMServer.renderToString(

hello<\/p>);\n@@ -815,11 +864,14 @@ describe('ReactHooks', () => {\n const [counter] = useState(0);\n return markup1 + counter + markup2;\n }\n- const root = ReactTestRenderer.create();\n+ let root;\n+ await act(() => {\n+ root = ReactTestRenderer.create(, {unstable_isConcurrent: true});\n+ });\n expect(root.toJSON()).toMatchSnapshot();\n });\n \n- it(\"throws when calling hooks inside .memo's compare function\", () => {\n+ it(\"throws when calling hooks inside .memo's compare function\", async () => {\n const {useState} = React;\n function App() {\n useState(0);\n@@ -830,9 +882,18 @@ describe('ReactHooks', () => {\n return false;\n });\n \n- const root = ReactTestRenderer.create();\n+ let root;\n+ await act(() => {\n+ root = ReactTestRenderer.create(, {\n+ unstable_isConcurrent: true,\n+ });\n+ });\n \/\/ trying to render again should trigger comparison and throw\n- expect(() => root.update()).toThrow(\n+ await expect(\n+ act(() => {\n+ root.update();\n+ }),\n+ ).rejects.toThrow(\n 'Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for' +\n ' one of the following reasons:\\n' +\n '1. You might have mismatching versions of React and the renderer (such as React DOM)\\n' +\n@@ -841,7 +902,11 @@ describe('ReactHooks', () => {\n 'See https:\/\/react.dev\/link\/invalid-hook-call for tips about how to debug and fix this problem.',\n );\n \/\/ the next round, it does a fresh mount, so should render\n- expect(() => root.update()).not.toThrow(\n+ await expect(\n+ act(() => {\n+ root.update();\n+ }),\n+ ).resolves.not.toThrow(\n 'Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for' +\n ' one of the following reasons:\\n' +\n '1. You might have mismatching versions of React and the renderer (such as React DOM)\\n' +\n@@ -850,7 +915,11 @@ describe('ReactHooks', () => {\n 'See https:\/\/react.dev\/link\/invalid-hook-call for tips about how to debug and fix this problem.',\n );\n \/\/ and then again, fail\n- expect(() => root.update()).toThrow(\n+ await expect(\n+ act(() => {\n+ root.update();\n+ }),\n+ ).rejects.toThrow(\n 'Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for' +\n ' one of the following reasons:\\n' +\n '1. You might have mismatching versions of React and the renderer (such as React DOM)\\n' +\n@@ -860,7 +929,7 @@ describe('ReactHooks', () => {\n );\n });\n \n- it('warns when calling hooks inside useMemo', () => {\n+ it('warns when calling hooks inside useMemo', async () => {\n const {useMemo, useState} = React;\n function App() {\n useMemo(() => {\n@@ -868,12 +937,16 @@ describe('ReactHooks', () => {\n });\n return null;\n }\n- expect(() => ReactTestRenderer.create()).toErrorDev(\n+ await expect(async () => {\n+ await act(() => {\n+ ReactTestRenderer.create(, {unstable_isConcurrent: true});\n+ });\n+ }).toErrorDev(\n 'Do not call Hooks inside useEffect(...), useMemo(...), or other built-in Hooks.',\n );\n });\n \n- it('warns when reading context inside useMemo', () => {\n+ it('warns when reading context inside useMemo', async () => {\n const {useMemo, createContext} = React;\n const ReactCurrentDispatcher =\n React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED\n@@ -886,12 +959,14 @@ describe('ReactHooks', () => {\n }, []);\n }\n \n- expect(() => ReactTestRenderer.create()).toErrorDev(\n- 'Context can only be read while React is rendering',\n- );\n+ await expect(async () => {\n+ await act(() => {\n+ ReactTestRenderer.create(, {unstable_isConcurrent: true});\n+ });\n+ }).toErrorDev('Context can only be read while React is rendering');\n });\n \n- it('warns when reading context inside useMemo after reading outside it', () => {\n+ it('warns when reading context inside useMemo after reading outside it', async () => {\n const {useMemo, createContext} = React;\n const ReactCurrentDispatcher =\n React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED\n@@ -908,9 +983,11 @@ describe('ReactHooks', () => {\n }, []);\n }\n \n- expect(() => ReactTestRenderer.create()).toErrorDev(\n- 'Context can only be read while React is rendering',\n- );\n+ await expect(async () => {\n+ await act(() => {\n+ ReactTestRenderer.create(, {unstable_isConcurrent: true});\n+ });\n+ }).toErrorDev('Context can only be read while React is rendering');\n expect(firstRead).toBe('light');\n expect(secondRead).toBe('light');\n });\n@@ -931,14 +1008,14 @@ describe('ReactHooks', () => {\n }\n \n await act(async () => {\n- ReactTestRenderer.create();\n+ ReactTestRenderer.create(, {unstable_isConcurrent: true});\n \/\/ The exact message doesn't matter, just make sure we don't allow this\n await waitForThrow('Context can only be read while React is rendering');\n });\n });\n \n \/\/ Throws because there's no runtime cost for being strict here.\n- it('throws when reading context inside useLayoutEffect', () => {\n+ it('throws when reading context inside useLayoutEffect', async () => {\n const {useLayoutEffect, createContext} = React;\n const ReactCurrentDispatcher =\n React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED\n@@ -952,13 +1029,17 @@ describe('ReactHooks', () => {\n return null;\n }\n \n- expect(() => ReactTestRenderer.create()).toThrow(\n+ await expect(\n+ act(() => {\n+ ReactTestRenderer.create(, {unstable_isConcurrent: true});\n+ }),\n+ ).rejects.toThrow(\n \/\/ The exact message doesn't matter, just make sure we don't allow this\n 'Context can only be read while React is rendering',\n );\n });\n \n- it('warns when reading context inside useReducer', () => {\n+ it('warns when reading context inside useReducer', async () => {\n const {useReducer, createContext} = React;\n const ReactCurrentDispatcher =\n React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED\n@@ -976,13 +1057,15 @@ describe('ReactHooks', () => {\n return null;\n }\n \n- expect(() => ReactTestRenderer.create()).toErrorDev([\n- 'Context can only be read while React is rendering',\n- ]);\n+ await expect(async () => {\n+ await act(() => {\n+ ReactTestRenderer.create(, {unstable_isConcurrent: true});\n+ });\n+ }).toErrorDev(['Context can only be read while React is rendering']);\n });\n \n \/\/ Edge case.\n- it('warns when reading context inside eager useReducer', () => {\n+ it('warns when reading context inside eager useReducer', async () => {\n const {useState, createContext} = React;\n const ThemeContext = createContext('light');\n \n@@ -1007,20 +1090,23 @@ describe('ReactHooks', () => {\n }\n }\n \n- expect(() =>\n- ReactTestRenderer.create(\n- <>\n- \n- \n- <\/>,\n- ),\n- ).toErrorDev([\n+ await expect(async () => {\n+ await act(() => {\n+ ReactTestRenderer.create(\n+ <>\n+ \n+ \n+ <\/>,\n+ {unstable_isConcurrent: true},\n+ );\n+ });\n+ }).toErrorDev([\n 'Context can only be read while React is rendering',\n 'Cannot update a component (`Fn`) while rendering a different component (`Cls`).',\n ]);\n });\n \n- it('warns when calling hooks inside useReducer', () => {\n+ it('warns when calling hooks inside useReducer', async () => {\n const {useReducer, useState, useRef} = React;\n \n function App() {\n@@ -1035,10 +1121,12 @@ describe('ReactHooks', () => {\n return value;\n }\n \n- expect(() => {\n- expect(() => {\n- ReactTestRenderer.create();\n- }).toThrow(\n+ await expect(async () => {\n+ await expect(async () => {\n+ await act(() => {\n+ ReactTestRenderer.create(, {unstable_isConcurrent: true});\n+ });\n+ }).rejects.toThrow(\n 'Update hook called on initial render. This is likely a bug in React. Please file an issue.',\n );\n }).toErrorDev([\n@@ -1051,10 +1139,11 @@ describe('ReactHooks', () => {\n '1. useReducer useReducer\\n' +\n '2. useState useRef\\n' +\n ' ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^\\n\\n',\n+ 'Do not call Hooks inside useEffect(...), useMemo(...), or other built-in Hooks',\n ]);\n });\n \n- it(\"warns when calling hooks inside useState's initialize function\", () => {\n+ it(\"warns when calling hooks inside useState's initialize function\", async () => {\n const {useState, useRef} = React;\n function App() {\n useState(() => {\n@@ -1063,7 +1152,11 @@ describe('ReactHooks', () => {\n });\n return null;\n }\n- expect(() => ReactTestRenderer.create()).toErrorDev(\n+ await expect(async () => {\n+ await act(() => {\n+ ReactTestRenderer.create(, {unstable_isConcurrent: true});\n+ });\n+ }).toErrorDev(\n 'Do not call Hooks inside useEffect(...), useMemo(...), or other built-in Hooks.',\n );\n });\n@@ -1097,15 +1190,21 @@ describe('ReactHooks', () => {\n }\n }\n \n- expect(() => {\n- ReactTestRenderer.create(\n- \n- \n- <\/Boundary>,\n- );\n+ await expect(async () => {\n+ await act(() => {\n+ ReactTestRenderer.create(\n+ \n+ \n+ <\/Boundary>,\n+ {unstable_isConcurrent: true},\n+ );\n+ });\n }).toErrorDev([\n 'Context can only be read while React is rendering',\n 'Do not call Hooks inside useEffect(...), useMemo(...), or other built-in Hooks',\n+\n+ 'Context can only be read while React is rendering',\n+ 'Do not call Hooks inside useEffect(...), useMemo(...), or other built-in Hooks',\n ]);\n \n function Valid() {\n@@ -1128,23 +1227,29 @@ describe('ReactHooks', () => {\n \/\/ Verify it doesn't think we're still inside a Hook.\n \/\/ Should have no warnings.\n await act(() => {\n- ReactTestRenderer.create();\n+ ReactTestRenderer.create(, {unstable_isConcurrent: true});\n });\n \n \/\/ Verify warnings don't get permanently disabled.\n- expect(() => {\n- ReactTestRenderer.create(\n- \n- \n- <\/Boundary>,\n- );\n+ await expect(async () => {\n+ await act(() => {\n+ ReactTestRenderer.create(\n+ \n+ \n+ <\/Boundary>,\n+ {unstable_isConcurrent: true},\n+ );\n+ });\n }).toErrorDev([\n 'Context can only be read while React is rendering',\n 'Do not call Hooks inside useEffect(...), useMemo(...), or other built-in Hooks',\n+\n+ 'Context can only be read while React is rendering',\n+ 'Do not call Hooks inside useEffect(...), useMemo(...), or other built-in Hooks',\n ]);\n });\n \n- it('warns when reading context inside useMemo', () => {\n+ it('warns when reading context inside useMemo', async () => {\n const {useMemo, createContext} = React;\n const ReactCurrentDispatcher =\n React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED\n@@ -1157,12 +1262,14 @@ describe('ReactHooks', () => {\n }, []);\n }\n \n- expect(() => ReactTestRenderer.create()).toErrorDev(\n- 'Context can only be read while React is rendering',\n- );\n+ await expect(async () => {\n+ await act(() => {\n+ ReactTestRenderer.create(, {unstable_isConcurrent: true});\n+ });\n+ }).toErrorDev('Context can only be read while React is rendering');\n });\n \n- it('double-invokes components with Hooks in Strict Mode', () => {\n+ it('double-invokes components with Hooks in Strict Mode', async () => {\n ReactFeatureFlags.debugRenderPhaseSideEffectsForStrictMode = true;\n \n const {useState, StrictMode} = React;\n@@ -1211,74 +1318,105 @@ describe('ReactHooks', () => {\n };\n }\n \n- const renderer = ReactTestRenderer.create(null);\n+ let renderer;\n+ await act(() => {\n+ renderer = ReactTestRenderer.create(null, {unstable_isConcurrent: true});\n+ });\n \n renderCount = 0;\n- renderer.update();\n+ await act(() => {\n+ renderer.update();\n+ });\n expect(renderCount).toBe(1);\n renderCount = 0;\n- renderer.update();\n+ await act(() => {\n+ renderer.update();\n+ });\n expect(renderCount).toBe(1);\n renderCount = 0;\n- renderer.update(\n- \n- \n- <\/StrictMode>,\n- );\n+ await act(() => {\n+ renderer.update(\n+ \n+ \n+ <\/StrictMode>,\n+ );\n+ });\n expect(renderCount).toBe(__DEV__ ? 2 : 1);\n renderCount = 0;\n- renderer.update(\n- \n- \n- <\/StrictMode>,\n- );\n+ await act(() => {\n+ renderer.update(\n+ \n+ \n+ <\/StrictMode>,\n+ );\n+ });\n expect(renderCount).toBe(__DEV__ ? 2 : 1);\n \n renderCount = 0;\n- renderer.update();\n+ await act(() => {\n+ renderer.update();\n+ });\n expect(renderCount).toBe(1);\n renderCount = 0;\n- renderer.update();\n+ await act(() => {\n+ renderer.update();\n+ });\n expect(renderCount).toBe(1);\n renderCount = 0;\n- renderer.update(\n- \n- \n- <\/StrictMode>,\n- );\n+ await act(() => {\n+ renderer.update(\n+ \n+ \n+ <\/StrictMode>,\n+ );\n+ });\n expect(renderCount).toBe(__DEV__ ? 2 : 1);\n renderCount = 0;\n- renderer.update(\n- \n- \n- <\/StrictMode>,\n- );\n+ await act(() => {\n+ renderer.update(\n+ \n+ \n+ <\/StrictMode>,\n+ );\n+ });\n expect(renderCount).toBe(__DEV__ ? 2 : 1);\n \n renderCount = 0;\n- renderer.update();\n+ await act(() => {\n+ renderer.update();\n+ });\n expect(renderCount).toBe(1);\n renderCount = 0;\n- renderer.update();\n+ await act(() => {\n+ renderer.update();\n+ });\n expect(renderCount).toBe(1);\n renderCount = 0;\n- renderer.update(\n- \n- \n- <\/StrictMode>,\n- );\n+ await act(() => {\n+ renderer.update(\n+ \n+ \n+ <\/StrictMode>,\n+ );\n+ });\n expect(renderCount).toBe(__DEV__ ? 2 : 1);\n renderCount = 0;\n- renderer.update(\n- \n- \n- <\/StrictMode>,\n- );\n+ await act(() => {\n+ renderer.update(\n+ \n+ \n+ <\/StrictMode>,\n+ );\n+ });\n expect(renderCount).toBe(__DEV__ ? 2 : 1);\n \n if (!require('shared\/ReactFeatureFlags').disableModulePatternComponents) {\n renderCount = 0;\n- expect(() => renderer.update()).toErrorDev(\n+ await expect(async () => {\n+ await act(() => {\n+ renderer.update();\n+ });\n+ }).toErrorDev(\n 'Warning: The component appears to be a function component that returns a class instance. ' +\n 'Change Factory to a class that extends React.Component instead. ' +\n \"If you can't use a class try assigning the prototype on the function as a workaround. \" +\n@@ -1287,90 +1425,120 @@ describe('ReactHooks', () => {\n );\n expect(renderCount).toBe(1);\n renderCount = 0;\n- renderer.update();\n+ await act(() => {\n+ renderer.update();\n+ });\n expect(renderCount).toBe(1);\n \n renderCount = 0;\n- renderer.update(\n- \n- \n- <\/StrictMode>,\n- );\n+ await act(() => {\n+ renderer.update(\n+ \n+ \n+ <\/StrictMode>,\n+ );\n+ });\n expect(renderCount).toBe(__DEV__ ? 2 : 1); \/\/ Treated like a class\n renderCount = 0;\n- renderer.update(\n- \n- \n- <\/StrictMode>,\n- );\n+ await act(() => {\n+ renderer.update(\n+ \n+ \n+ <\/StrictMode>,\n+ );\n+ });\n expect(renderCount).toBe(__DEV__ ? 2 : 1); \/\/ Treated like a class\n }\n \n renderCount = 0;\n- renderer.update();\n+ await act(() => {\n+ renderer.update();\n+ });\n expect(renderCount).toBe(1);\n renderCount = 0;\n- renderer.update();\n+ await act(() => {\n+ renderer.update();\n+ });\n expect(renderCount).toBe(1);\n renderCount = 0;\n- renderer.update(\n- \n- \n- <\/StrictMode>,\n- );\n+ await act(() => {\n+ renderer.update(\n+ \n+ \n+ <\/StrictMode>,\n+ );\n+ });\n expect(renderCount).toBe(__DEV__ ? 2 : 1); \/\/ Has Hooks\n renderCount = 0;\n- renderer.update(\n- \n- \n- <\/StrictMode>,\n- );\n+ await act(() => {\n+ renderer.update(\n+ \n+ \n+ <\/StrictMode>,\n+ );\n+ });\n expect(renderCount).toBe(__DEV__ ? 2 : 1); \/\/ Has Hooks\n \n renderCount = 0;\n- renderer.update();\n+ await act(() => {\n+ renderer.update();\n+ });\n expect(renderCount).toBe(1);\n renderCount = 0;\n- renderer.update();\n+ await act(() => {\n+ renderer.update();\n+ });\n expect(renderCount).toBe(1);\n renderCount = 0;\n- renderer.update(\n- \n- \n- <\/StrictMode>,\n- );\n+ await act(() => {\n+ renderer.update(\n+ \n+ \n+ <\/StrictMode>,\n+ );\n+ });\n expect(renderCount).toBe(__DEV__ ? 2 : 1); \/\/ Has Hooks\n renderCount = 0;\n- renderer.update(\n- \n- \n- <\/StrictMode>,\n- );\n+ await act(() => {\n+ renderer.update(\n+ \n+ \n+ <\/StrictMode>,\n+ );\n+ });\n expect(renderCount).toBe(__DEV__ ? 2 : 1); \/\/ Has Hooks\n \n renderCount = 0;\n- renderer.update();\n+ await act(() => {\n+ renderer.update();\n+ });\n expect(renderCount).toBe(1);\n renderCount = 0;\n- renderer.update();\n+ await act(() => {\n+ renderer.update();\n+ });\n expect(renderCount).toBe(1);\n renderCount = 0;\n- renderer.update(\n- \n- \n- <\/StrictMode>,\n- );\n+ await act(() => {\n+ renderer.update(\n+ \n+ \n+ <\/StrictMode>,\n+ );\n+ });\n expect(renderCount).toBe(__DEV__ ? 2 : 1); \/\/ Has Hooks\n renderCount = 0;\n- renderer.update(\n- \n- \n- <\/StrictMode>,\n- );\n+ await act(() => {\n+ renderer.update(\n+ \n+ \n+ <\/StrictMode>,\n+ );\n+ });\n expect(renderCount).toBe(__DEV__ ? 2 : 1); \/\/ Has Hooks\n });\n \n- it('double-invokes useMemo in DEV StrictMode despite []', () => {\n+ it('double-invokes useMemo in DEV StrictMode despite []', async () => {\n ReactFeatureFlags.debugRenderPhaseSideEffectsForStrictMode = true;\n const {useMemo, StrictMode} = React;\n \n@@ -1383,11 +1551,14 @@ describe('ReactHooks', () => {\n }\n \n useMemoCount = 0;\n- ReactTestRenderer.create(\n- \n- \n- <\/StrictMode>,\n- );\n+ await act(() => {\n+ ReactTestRenderer.create(\n+ \n+ \n+ <\/StrictMode>,\n+ {unstable_isConcurrent: true},\n+ );\n+ });\n expect(useMemoCount).toBe(__DEV__ ? 2 : 1); \/\/ Has Hooks\n });\n \n@@ -1482,7 +1653,9 @@ describe('ReactHooks', () => {\n }\n let root;\n await act(() => {\n- root = ReactTestRenderer.create();\n+ root = ReactTestRenderer.create(, {\n+ unstable_isConcurrent: true,\n+ });\n });\n await expect(async () => {\n try {\n@@ -1531,7 +1704,9 @@ describe('ReactHooks', () => {\n }\n let root;\n await act(() => {\n- root = ReactTestRenderer.create();\n+ root = ReactTestRenderer.create(, {\n+ unstable_isConcurrent: true,\n+ });\n });\n \n await expect(async () => {\n@@ -1585,21 +1760,23 @@ describe('ReactHooks', () => {\n }\n let root;\n await act(() => {\n- root = ReactTestRenderer.create();\n+ root = ReactTestRenderer.create(, {\n+ unstable_isConcurrent: true,\n+ });\n });\n \n- await act(() => {\n- expect(() => {\n+ await expect(async () => {\n+ await act(() => {\n root.update();\n- }).toThrow('Rendered fewer hooks than expected. ');\n- });\n+ });\n+ }).rejects.toThrow('Rendered fewer hooks than expected. ');\n });\n });\n \n it(\n 'warns on using differently ordered hooks ' +\n '(useImperativeHandleHelper, useMemoHelper) on subsequent renders',\n- () => {\n+ async () => {\n function App(props) {\n \/* eslint-disable no-unused-vars *\/\n if (props.update) {\n@@ -1614,15 +1791,19 @@ describe('ReactHooks', () => {\n return null;\n \/* eslint-enable no-unused-vars *\/\n }\n- const root = ReactTestRenderer.create();\n- expect(() => {\n- try {\n+ let root;\n+ await act(() => {\n+ root = ReactTestRenderer.create(, {\n+ unstable_isConcurrent: true,\n+ });\n+ });\n+ await expect(async () => {\n+ await act(() => {\n root.update();\n- } catch (error) {\n- \/\/ Swapping certain types of hooks will cause runtime errors.\n- \/\/ This is okay as far as this test is concerned.\n- \/\/ We just want to verify that warnings are always logged.\n- }\n+ }).catch(e => {});\n+ \/\/ Swapping certain types of hooks will cause runtime errors.\n+ \/\/ This is okay as far as this test is concerned.\n+ \/\/ We just want to verify that warnings are always logged.\n }).toErrorDev([\n 'Warning: React has detected a change in the order of Hooks called by App. ' +\n 'This will lead to bugs and errors if not fixed. For more information, ' +\n@@ -1638,11 +1819,13 @@ describe('ReactHooks', () => {\n ]);\n \n \/\/ further warnings for this component are silenced\n- root.update();\n+ await act(() => {\n+ root.update();\n+ });\n },\n );\n \n- it('detects a bad hook order even if the component throws', () => {\n+ it('detects a bad hook order even if the component throws', async () => {\n const {useState, useReducer} = React;\n function useCustomHook() {\n useState(0);\n@@ -1660,11 +1843,18 @@ describe('ReactHooks', () => {\n return null;\n \/* eslint-enable no-unused-vars *\/\n }\n- const root = ReactTestRenderer.create();\n- expect(() => {\n- expect(() => root.update()).toThrow(\n- 'custom error',\n- );\n+ let root;\n+ await act(() => {\n+ root = ReactTestRenderer.create(, {\n+ unstable_isConcurrent: true,\n+ });\n+ });\n+ await expect(async () => {\n+ await expect(async () => {\n+ await act(() => {\n+ root.update();\n+ });\n+ }).rejects.toThrow('custom error');\n }).toErrorDev([\n 'Warning: React has detected a change in the order of Hooks called by App. ' +\n 'This will lead to bugs and errors if not fixed. For more information, ' +\n@@ -1696,14 +1886,17 @@ describe('ReactHooks', () => {\n return null;\n }\n \n- expect(() => {\n- ReactTestRenderer.create(\n- <>\n- \n- \n- <\/>,\n- );\n- }).toThrow('Hello');\n+ await expect(async () => {\n+ await act(() => {\n+ ReactTestRenderer.create(\n+ <>\n+ \n+ \n+ <\/>,\n+ {unstable_isConcurrent: true},\n+ );\n+ });\n+ }).rejects.toThrow('Hello');\n \n if (__DEV__) {\n expect(console.error).toHaveBeenCalledTimes(2);\n@@ -1752,18 +1945,17 @@ describe('ReactHooks', () => {\n }\n \n await act(() => {\n- ReactTestRenderer.create();\n+ ReactTestRenderer.create(, {unstable_isConcurrent: true});\n });\n \n- expect(() => {\n- globalListener();\n- globalListener();\n- }).toErrorDev([\n- 'An update to C inside a test was not wrapped in act',\n- 'An update to C inside a test was not wrapped in act',\n- \/\/ Note: should *not* warn about updates on unmounted component.\n- \/\/ Because there's no way for component to know it got unmounted.\n- ]);\n+ \/\/ Note: should *not* warn about updates on unmounted component.\n+ \/\/ Because there's no way for component to know it got unmounted.\n+ await expect(\n+ act(() => {\n+ globalListener();\n+ globalListener();\n+ }),\n+ ).resolves.not.toThrow();\n });\n \n \/\/ Regression test for https:\/\/github.com\/facebook\/react\/issues\/14790\n@@ -1771,11 +1963,12 @@ describe('ReactHooks', () => {\n const {Suspense, useState} = React;\n \n let wasSuspended = false;\n+ let resolve;\n function trySuspend() {\n if (!wasSuspended) {\n- throw new Promise(resolve => {\n+ throw new Promise(r => {\n wasSuspended = true;\n- resolve();\n+ resolve = r;\n });\n }\n }\n@@ -1787,14 +1980,17 @@ describe('ReactHooks', () => {\n }\n \n const Wrapper = React.memo(Child);\n- const root = ReactTestRenderer.create(\n- \n- \n- <\/Suspense>,\n- );\n+ let root;\n+ await act(() => {\n+ root = ReactTestRenderer.create(\n+ \n+ \n+ <\/Suspense>,\n+ {unstable_isConcurrent: true},\n+ );\n+ });\n expect(root).toMatchRenderedOutput('loading');\n- await Promise.resolve();\n- await waitForAll([]);\n+ await act(resolve);\n expect(root).toMatchRenderedOutput('hello');\n });\n \n@@ -1803,11 +1999,12 @@ describe('ReactHooks', () => {\n const {Suspense, useState} = React;\n \n let wasSuspended = false;\n+ let resolve;\n function trySuspend() {\n if (!wasSuspended) {\n- throw new Promise(resolve => {\n+ throw new Promise(r => {\n wasSuspended = true;\n- resolve();\n+ resolve = r;\n });\n }\n }\n@@ -1819,14 +2016,17 @@ describe('ReactHooks', () => {\n }\n \n const Wrapper = React.forwardRef(render);\n- const root = ReactTestRenderer.create(\n- \n- \n- <\/Suspense>,\n- );\n+ let root;\n+ await act(() => {\n+ root = ReactTestRenderer.create(\n+ \n+ \n+ <\/Suspense>,\n+ {unstable_isConcurrent: true},\n+ );\n+ });\n expect(root).toMatchRenderedOutput('loading');\n- await Promise.resolve();\n- await waitForAll([]);\n+ await act(resolve);\n expect(root).toMatchRenderedOutput('hello');\n });\n \n@@ -1835,11 +2035,12 @@ describe('ReactHooks', () => {\n const {Suspense, useState} = React;\n \n let wasSuspended = false;\n+ let resolve;\n function trySuspend() {\n if (!wasSuspended) {\n- throw new Promise(resolve => {\n+ throw new Promise(r => {\n wasSuspended = true;\n- resolve();\n+ resolve = r;\n });\n }\n }\n@@ -1851,14 +2052,17 @@ describe('ReactHooks', () => {\n }\n \n const Wrapper = React.memo(React.forwardRef(render));\n- const root = ReactTestRenderer.create(\n- \n- \n- <\/Suspense>,\n- );\n+ let root;\n+ await act(() => {\n+ root = ReactTestRenderer.create(\n+ \n+ \n+ <\/Suspense>,\n+ {unstable_isConcurrent: true},\n+ );\n+ });\n expect(root).toMatchRenderedOutput('loading');\n- await Promise.resolve();\n- await waitForAll([]);\n+ await act(resolve);\n expect(root).toMatchRenderedOutput('hello');\n });\n \n@@ -1906,6 +2110,7 @@ describe('ReactHooks', () => {\n \n \n <\/ErrorBoundary>,\n+ {unstable_isConcurrent: true},\n );\n });\n \n"}

dillon1000/react

Files changed