diff --git a/packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js b/packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js index 0e0993268343b..8dbdc9919793a 100644 --- a/packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js +++ b/packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js @@ -51,7 +51,12 @@ describe('ReactHooksInspectionIntegration', () => { ); } - const renderer = ReactTestRenderer.create(); + let renderer; + await act(() => { + renderer = ReactTestRenderer.create(, { + unstable_isConcurrent: true, + }); + }); let childFiber = renderer.root.findByType(Foo)._currentFiber(); let tree = ReactDebugTools.inspectHooksOfFiber(childFiber); @@ -204,7 +209,9 @@ describe('ReactHooksInspectionIntegration', () => { } let renderer; await act(() => { - renderer = ReactTestRenderer.create(); + renderer = ReactTestRenderer.create(, { + unstable_isConcurrent: true, + }); }); let childFiber = renderer.root.findByType(Foo)._currentFiber(); @@ -434,7 +441,7 @@ describe('ReactHooksInspectionIntegration', () => { "isStateEditable": false, "name": "Memo", "subHooks": [], - "value": "Ab", + "value": "AB", }, { "debugInfo": null, @@ -492,7 +499,9 @@ describe('ReactHooksInspectionIntegration', () => { } let renderer; await act(() => { - renderer = ReactTestRenderer.create(); + renderer = ReactTestRenderer.create(, { + unstable_isConcurrent: true, + }); }); let childFiber = renderer.root.findByType(Foo)._currentFiber(); @@ -750,7 +759,7 @@ describe('ReactHooksInspectionIntegration', () => { "isStateEditable": false, "name": "Memo", "subHooks": [], - "value": "Ab", + "value": "AB", }, { "debugInfo": null, @@ -770,7 +779,7 @@ describe('ReactHooksInspectionIntegration', () => { `); }); - it('should inspect the value of the current provider in useContext', () => { + it('should inspect the value of the current provider in useContext', async () => { const MyContext = React.createContext('default'); const ThemeContext = React.createContext('default'); ThemeContext.displayName = 'Theme'; @@ -779,11 +788,15 @@ describe('ReactHooksInspectionIntegration', () => { React.useContext(ThemeContext); return
{value}
; } - const renderer = ReactTestRenderer.create( - - - , - ); + let renderer; + await act(() => { + renderer = ReactTestRenderer.create( + + + , + {unstable_isConcurrent: true}, + ); + }); const childFiber = renderer.root.findByType(Foo)._currentFiber(); const tree = ReactDebugTools.inspectHooksOfFiber(childFiber); expect(normalizeSourceLoc(tree)).toMatchInlineSnapshot(` @@ -820,14 +833,19 @@ describe('ReactHooksInspectionIntegration', () => { `); }); - it('should inspect forwardRef', () => { + it('should inspect forwardRef', async () => { const obj = function () {}; const Foo = React.forwardRef(function (props, ref) { React.useImperativeHandle(ref, () => obj); return
; }); const ref = React.createRef(); - const renderer = ReactTestRenderer.create(); + let renderer; + await act(() => { + renderer = ReactTestRenderer.create(, { + unstable_isConcurrent: true, + }); + }); const childFiber = renderer.root.findByType(Foo)._currentFiber(); const tree = ReactDebugTools.inspectHooksOfFiber(childFiber); @@ -851,13 +869,18 @@ describe('ReactHooksInspectionIntegration', () => { `); }); - it('should inspect memo', () => { + it('should inspect memo', async () => { function InnerFoo(props) { const [value] = React.useState('hello'); return
{value}
; } const Foo = React.memo(InnerFoo); - const renderer = ReactTestRenderer.create(); + let renderer; + await act(() => { + renderer = ReactTestRenderer.create(, { + unstable_isConcurrent: true, + }); + }); // TODO: Test renderer findByType is broken for memo. Have to search for the inner. const childFiber = renderer.root.findByType(InnerFoo)._currentFiber(); const tree = ReactDebugTools.inspectHooksOfFiber(childFiber); @@ -881,7 +904,7 @@ describe('ReactHooksInspectionIntegration', () => { `); }); - it('should inspect custom hooks', () => { + it('should inspect custom hooks', async () => { function useCustom() { const [value] = React.useState('hello'); return value; @@ -890,7 +913,12 @@ describe('ReactHooksInspectionIntegration', () => { const value = useCustom(); return
{value}
; } - const renderer = ReactTestRenderer.create(); + let renderer; + await act(() => { + renderer = ReactTestRenderer.create(, { + unstable_isConcurrent: true, + }); + }); const childFiber = renderer.root.findByType(Foo)._currentFiber(); const tree = ReactDebugTools.inspectHooksOfFiber(childFiber); expect(normalizeSourceLoc(tree)).toMatchInlineSnapshot(` @@ -928,14 +956,19 @@ describe('ReactHooksInspectionIntegration', () => { `); }); - it('should support composite useTransition hook', () => { + it('should support composite useTransition hook', async () => { function Foo(props) { React.useTransition(); const memoizedValue = React.useMemo(() => 'hello', []); React.useMemo(() => 'not used', []); return
{memoizedValue}
; } - const renderer = ReactTestRenderer.create(); + let renderer; + await act(() => { + renderer = ReactTestRenderer.create(, { + unstable_isConcurrent: true, + }); + }); const childFiber = renderer.root.findByType(Foo)._currentFiber(); const tree = ReactDebugTools.inspectHooksOfFiber(childFiber); expect(normalizeSourceLoc(tree)).toMatchInlineSnapshot(` @@ -1148,14 +1181,19 @@ describe('ReactHooksInspectionIntegration', () => { `); }); - it('should support useDeferredValue hook', () => { + it('should support useDeferredValue hook', async () => { function Foo(props) { React.useDeferredValue('abc'); const memoizedValue = React.useMemo(() => 1, []); React.useMemo(() => 2, []); return
{memoizedValue}
; } - const renderer = ReactTestRenderer.create(); + let renderer; + await act(() => { + renderer = ReactTestRenderer.create(, { + unstable_isConcurrent: true, + }); + }); const childFiber = renderer.root.findByType(Foo)._currentFiber(); const tree = ReactDebugTools.inspectHooksOfFiber(childFiber); expect(normalizeSourceLoc(tree)).toMatchInlineSnapshot(` @@ -1464,14 +1502,19 @@ describe('ReactHooksInspectionIntegration', () => { `); }); - it('should support useId hook', () => { + it('should support useId hook', async () => { function Foo(props) { const id = React.useId(); const [state] = React.useState('hello'); return
{state}
; } - const renderer = ReactTestRenderer.create(); + let renderer; + await act(() => { + renderer = ReactTestRenderer.create(, { + unstable_isConcurrent: true, + }); + }); const childFiber = renderer.root.findByType(Foo)._currentFiber(); const tree = ReactDebugTools.inspectHooksOfFiber(childFiber); @@ -1502,7 +1545,7 @@ describe('ReactHooksInspectionIntegration', () => { describe('useMemoCache', () => { // @gate enableUseMemoCacheHook - it('should not be inspectable', () => { + it('should not be inspectable', async () => { function Foo() { const $ = useMemoCache(1); let t0; @@ -1517,7 +1560,12 @@ describe('ReactHooksInspectionIntegration', () => { return t0; } - const renderer = ReactTestRenderer.create(); + let renderer; + await act(() => { + renderer = ReactTestRenderer.create(, { + unstable_isConcurrent: true, + }); + }); const childFiber = renderer.root.findByType(Foo)._currentFiber(); const tree = ReactDebugTools.inspectHooksOfFiber(childFiber); @@ -1525,7 +1573,7 @@ describe('ReactHooksInspectionIntegration', () => { }); // @gate enableUseMemoCacheHook - it('should work in combination with other hooks', () => { + it('should work in combination with other hooks', async () => { function useSomething() { const [something] = React.useState(null); const changeOtherSomething = React.useCallback(() => {}, [something]); @@ -1552,7 +1600,12 @@ describe('ReactHooksInspectionIntegration', () => { return t0; } - const renderer = ReactTestRenderer.create(); + let renderer; + await act(() => { + renderer = ReactTestRenderer.create(, { + unstable_isConcurrent: true, + }); + }); const childFiber = renderer.root.findByType(Foo)._currentFiber(); const tree = ReactDebugTools.inspectHooksOfFiber(childFiber); @@ -1561,7 +1614,7 @@ describe('ReactHooksInspectionIntegration', () => { }); describe('useDebugValue', () => { - it('should support inspectable values for multiple custom hooks', () => { + it('should support inspectable values for multiple custom hooks', async () => { function useLabeledValue(label) { const [value] = React.useState(label); React.useDebugValue(`custom label ${label}`); @@ -1578,7 +1631,12 @@ describe('ReactHooksInspectionIntegration', () => { useLabeledValue('d'); return null; } - const renderer = ReactTestRenderer.create(); + let renderer; + await act(() => { + renderer = ReactTestRenderer.create(, { + unstable_isConcurrent: true, + }); + }); const childFiber = renderer.root.findByType(Example)._currentFiber(); const tree = ReactDebugTools.inspectHooksOfFiber(childFiber); if (__DEV__) { @@ -1795,7 +1853,7 @@ describe('ReactHooksInspectionIntegration', () => { `); }); - it('should support inspectable values for nested custom hooks', () => { + it('should support inspectable values for nested custom hooks', async () => { function useInner() { React.useDebugValue('inner'); React.useState(0); @@ -1808,7 +1866,12 @@ describe('ReactHooksInspectionIntegration', () => { useOuter(); return null; } - const renderer = ReactTestRenderer.create(); + let renderer; + await act(() => { + renderer = ReactTestRenderer.create(, { + unstable_isConcurrent: true, + }); + }); const childFiber = renderer.root.findByType(Example)._currentFiber(); const tree = ReactDebugTools.inspectHooksOfFiber(childFiber); if (__DEV__) { @@ -1911,7 +1974,7 @@ describe('ReactHooksInspectionIntegration', () => { `); }); - it('should support multiple inspectable values per custom hooks', () => { + it('should support multiple inspectable values per custom hooks', async () => { function useMultiLabelCustom() { React.useDebugValue('one'); React.useDebugValue('two'); @@ -1928,7 +1991,12 @@ describe('ReactHooksInspectionIntegration', () => { useSingleLabelCustom('two'); return null; } - const renderer = ReactTestRenderer.create(); + let renderer; + await act(() => { + renderer = ReactTestRenderer.create(, { + unstable_isConcurrent: true, + }); + }); const childFiber = renderer.root.findByType(Example)._currentFiber(); const tree = ReactDebugTools.inspectHooksOfFiber(childFiber); if (__DEV__) { @@ -2121,18 +2189,23 @@ describe('ReactHooksInspectionIntegration', () => { `); }); - it('should ignore useDebugValue() made outside of a custom hook', () => { + it('should ignore useDebugValue() made outside of a custom hook', async () => { function Example() { React.useDebugValue('this is invalid'); return null; } - const renderer = ReactTestRenderer.create(); + let renderer; + await act(() => { + renderer = ReactTestRenderer.create(, { + unstable_isConcurrent: true, + }); + }); const childFiber = renderer.root.findByType(Example)._currentFiber(); const tree = ReactDebugTools.inspectHooksOfFiber(childFiber); expect(tree).toHaveLength(0); }); - it('should support an optional formatter function param', () => { + it('should support an optional formatter function param', async () => { function useCustom() { React.useDebugValue({bar: 123}, object => `bar:${object.bar}`); React.useState(0); @@ -2141,7 +2214,12 @@ describe('ReactHooksInspectionIntegration', () => { useCustom(); return null; } - const renderer = ReactTestRenderer.create(); + let renderer; + await act(() => { + renderer = ReactTestRenderer.create(, { + unstable_isConcurrent: true, + }); + }); const childFiber = renderer.root.findByType(Example)._currentFiber(); const tree = ReactDebugTools.inspectHooksOfFiber(childFiber); if (__DEV__) { @@ -2266,7 +2344,7 @@ describe('ReactHooksInspectionIntegration', () => { `); }); - it('should support an injected dispatcher', () => { + it('should support an injected dispatcher', async () => { function Foo(props) { const [state] = React.useState('hello world'); return
{state}
; @@ -2287,7 +2365,12 @@ describe('ReactHooksInspectionIntegration', () => { }, }; - const renderer = ReactTestRenderer.create(); + let renderer; + await act(() => { + renderer = ReactTestRenderer.create(, { + unstable_isConcurrent: true, + }); + }); const childFiber = renderer.root._currentFiber(); let didCatch = false; @@ -2332,7 +2415,12 @@ describe('ReactHooksInspectionIntegration', () => { return
count: {data.count}
; } - const renderer = ReactTestRenderer.create(); + let renderer; + await act(() => { + renderer = ReactTestRenderer.create(, { + unstable_isConcurrent: true, + }); + }); expect(renderer.toJSON()).toEqual({ type: 'div', props: {}, @@ -2384,7 +2472,7 @@ describe('ReactHooksInspectionIntegration', () => { `); }); - it('should support composite useSyncExternalStore hook', () => { + it('should support composite useSyncExternalStore hook', async () => { const useSyncExternalStore = React.useSyncExternalStore; function Foo() { const value = useSyncExternalStore( @@ -2396,7 +2484,12 @@ describe('ReactHooksInspectionIntegration', () => { return value; } - const renderer = ReactTestRenderer.create(); + let renderer; + await act(() => { + renderer = ReactTestRenderer.create(, { + unstable_isConcurrent: true, + }); + }); const childFiber = renderer.root.findByType(Foo)._currentFiber(); const tree = ReactDebugTools.inspectHooksOfFiber(childFiber); expect(normalizeSourceLoc(tree)).toMatchInlineSnapshot(` @@ -2447,7 +2540,7 @@ describe('ReactHooksInspectionIntegration', () => { `); }); - it('should support use(Context) hook', () => { + it('should support use(Context) hook', async () => { const Context = React.createContext('default'); function Foo() { const value = React.use(Context); @@ -2457,7 +2550,12 @@ describe('ReactHooksInspectionIntegration', () => { return value; } - const renderer = ReactTestRenderer.create(); + let renderer; + await act(() => { + renderer = ReactTestRenderer.create(, { + unstable_isConcurrent: true, + }); + }); const childFiber = renderer.root.findByType(Foo)._currentFiber(); const tree = ReactDebugTools.inspectHooksOfFiber(childFiber); expect(normalizeSourceLoc(tree)).toMatchInlineSnapshot(` @@ -2509,7 +2607,7 @@ describe('ReactHooksInspectionIntegration', () => { }); // @gate enableAsyncActions - it('should support useOptimistic hook', () => { + it('should support useOptimistic hook', async () => { const useOptimistic = React.useOptimistic; function Foo() { const [value] = useOptimistic('abc', currentState => currentState); @@ -2518,7 +2616,12 @@ describe('ReactHooksInspectionIntegration', () => { return value; } - const renderer = ReactTestRenderer.create(); + let renderer; + await act(() => { + renderer = ReactTestRenderer.create(, { + unstable_isConcurrent: true, + }); + }); const childFiber = renderer.root.findByType(Foo)._currentFiber(); const tree = ReactDebugTools.inspectHooksOfFiber(childFiber); expect(normalizeSourceLoc(tree)).toMatchInlineSnapshot(` @@ -2570,7 +2673,7 @@ describe('ReactHooksInspectionIntegration', () => { }); // @gate enableFormActions && enableAsyncActions - it('should support useFormState hook', () => { + it('should support useFormState hook', async () => { function Foo() { const [value] = ReactDOM.useFormState(function increment(n) { return n; @@ -2581,7 +2684,12 @@ describe('ReactHooksInspectionIntegration', () => { return value; } - const renderer = ReactTestRenderer.create(); + let renderer; + await act(() => { + renderer = ReactTestRenderer.create(, { + unstable_isConcurrent: true, + }); + }); const childFiber = renderer.root.findByType(Foo)._currentFiber(); const tree = ReactDebugTools.inspectHooksOfFiber(childFiber); expect(normalizeSourceLoc(tree)).toMatchInlineSnapshot(`