a4939017ff · samitouri/QOS-React-2

@@ -51,7 +51,12 @@ describe('ReactHooksInspectionIntegration', () => {

51 </div>

52 );

53 }

54 - const renderer = ReactTestRenderer.create(<Foo prop="prop" />);

54 + let renderer;

55 + await act(() => {

56 + renderer = ReactTestRenderer.create(<Foo prop="prop" />, {

57 + unstable_isConcurrent: true,

58 + });

59 + });

60

61 let childFiber = renderer.root.findByType(Foo)._currentFiber();

62 let tree = ReactDebugTools.inspectHooksOfFiber(childFiber);

@@ -204,7 +209,9 @@ describe('ReactHooksInspectionIntegration', () => {

209 }

210 let renderer;

211 await act(() => {

207 - renderer = ReactTestRenderer.create(<Foo prop="prop" />);

212 + renderer = ReactTestRenderer.create(<Foo prop="prop" />, {

213 + unstable_isConcurrent: true,

214 + });

215 });

216

217 let childFiber = renderer.root.findByType(Foo)._currentFiber();

@@ -434,7 +441,7 @@ describe('ReactHooksInspectionIntegration', () => {

441 "isStateEditable": false,

442 "name": "Memo",

443 "subHooks": [],

437 - "value": "Ab",

444 + "value": "AB",

445 },

446 {

447 "debugInfo": null,

@@ -492,7 +499,9 @@ describe('ReactHooksInspectionIntegration', () => {

499 }

500 let renderer;

501 await act(() => {

495 - renderer = ReactTestRenderer.create(<Foo prop="prop" />);

502 + renderer = ReactTestRenderer.create(<Foo prop="prop" />, {

503 + unstable_isConcurrent: true,

504 + });

505 });

506

507 let childFiber = renderer.root.findByType(Foo)._currentFiber();

@@ -750,7 +759,7 @@ describe('ReactHooksInspectionIntegration', () => {

759 "isStateEditable": false,

760 "name": "Memo",

761 "subHooks": [],

753 - "value": "Ab",

762 + "value": "AB",

763 },

764 {

765 "debugInfo": null,

@@ -770,7 +779,7 @@ describe('ReactHooksInspectionIntegration', () => {

779 `);

780 });

781

773 - it('should inspect the value of the current provider in useContext', () => {

782 + it('should inspect the value of the current provider in useContext', async () => {

783 const MyContext = React.createContext('default');

784 const ThemeContext = React.createContext('default');

785 ThemeContext.displayName = 'Theme';

@@ -779,11 +788,15 @@ describe('ReactHooksInspectionIntegration', () => {

788 React.useContext(ThemeContext);

789 return <div>{value}</div>;

790 }

782 - const renderer = ReactTestRenderer.create(

783 - <MyContext.Provider value="contextual">

784 - <Foo prop="prop" />

785 - </MyContext.Provider>,

786 - );

791 + let renderer;

792 + await act(() => {

793 + renderer = ReactTestRenderer.create(

794 + <MyContext.Provider value="contextual">

795 + <Foo prop="prop" />

796 + </MyContext.Provider>,

797 + {unstable_isConcurrent: true},

798 + );

799 + });

800 const childFiber = renderer.root.findByType(Foo)._currentFiber();

801 const tree = ReactDebugTools.inspectHooksOfFiber(childFiber);

802 expect(normalizeSourceLoc(tree)).toMatchInlineSnapshot(`

@@ -820,14 +833,19 @@ describe('ReactHooksInspectionIntegration', () => {

833 `);

834 });

835

823 - it('should inspect forwardRef', () => {

836 + it('should inspect forwardRef', async () => {

837 const obj = function () {};

838 const Foo = React.forwardRef(function (props, ref) {

839 React.useImperativeHandle(ref, () => obj);

840 return <div />;

841 });

842 const ref = React.createRef();

830 - const renderer = ReactTestRenderer.create(<Foo ref={ref} />);

843 + let renderer;

844 + await act(() => {

845 + renderer = ReactTestRenderer.create(<Foo ref={ref} />, {

846 + unstable_isConcurrent: true,

847 + });

848 + });

849

850 const childFiber = renderer.root.findByType(Foo)._currentFiber();

851 const tree = ReactDebugTools.inspectHooksOfFiber(childFiber);

@@ -851,13 +869,18 @@ describe('ReactHooksInspectionIntegration', () => {

869 `);

870 });

871

854 - it('should inspect memo', () => {

872 + it('should inspect memo', async () => {

873 function InnerFoo(props) {

874 const [value] = React.useState('hello');

875 return <div>{value}</div>;

876 }

877 const Foo = React.memo(InnerFoo);

860 - const renderer = ReactTestRenderer.create(<Foo />);

878 + let renderer;

879 + await act(() => {

880 + renderer = ReactTestRenderer.create(<Foo />, {

881 + unstable_isConcurrent: true,

882 + });

883 + });

884 // TODO: Test renderer findByType is broken for memo. Have to search for the inner.

885 const childFiber = renderer.root.findByType(InnerFoo)._currentFiber();

886 const tree = ReactDebugTools.inspectHooksOfFiber(childFiber);

@@ -881,7 +904,7 @@ describe('ReactHooksInspectionIntegration', () => {

904 `);

905 });

906

884 - it('should inspect custom hooks', () => {

907 + it('should inspect custom hooks', async () => {

908 function useCustom() {

909 const [value] = React.useState('hello');

910 return value;

@@ -890,7 +913,12 @@ describe('ReactHooksInspectionIntegration', () => {

913 const value = useCustom();

914 return <div>{value}</div>;

915 }

893 - const renderer = ReactTestRenderer.create(<Foo />);

916 + let renderer;

917 + await act(() => {

918 + renderer = ReactTestRenderer.create(<Foo />, {

919 + unstable_isConcurrent: true,

920 + });

921 + });

922 const childFiber = renderer.root.findByType(Foo)._currentFiber();

923 const tree = ReactDebugTools.inspectHooksOfFiber(childFiber);

924 expect(normalizeSourceLoc(tree)).toMatchInlineSnapshot(`

@@ -928,14 +956,19 @@ describe('ReactHooksInspectionIntegration', () => {

956 `);

957 });

958

931 - it('should support composite useTransition hook', () => {

959 + it('should support composite useTransition hook', async () => {

960 function Foo(props) {

961 React.useTransition();

962 const memoizedValue = React.useMemo(() => 'hello', []);

963 React.useMemo(() => 'not used', []);

964 return <div>{memoizedValue}</div>;

965 }

938 - const renderer = ReactTestRenderer.create(<Foo />);

966 + let renderer;

967 + await act(() => {

968 + renderer = ReactTestRenderer.create(<Foo />, {

969 + unstable_isConcurrent: true,

970 + });

971 + });

972 const childFiber = renderer.root.findByType(Foo)._currentFiber();

973 const tree = ReactDebugTools.inspectHooksOfFiber(childFiber);

974 expect(normalizeSourceLoc(tree)).toMatchInlineSnapshot(`

@@ -1148,14 +1181,19 @@ describe('ReactHooksInspectionIntegration', () => {

1181 `);

1182 });

1183

1151 - it('should support useDeferredValue hook', () => {

1184 + it('should support useDeferredValue hook', async () => {

1185 function Foo(props) {

1186 React.useDeferredValue('abc');

1187 const memoizedValue = React.useMemo(() => 1, []);

1188 React.useMemo(() => 2, []);

1189 return <div>{memoizedValue}</div>;

1190 }

1158 - const renderer = ReactTestRenderer.create(<Foo />);

1191 + let renderer;

1192 + await act(() => {

1193 + renderer = ReactTestRenderer.create(<Foo />, {

1194 + unstable_isConcurrent: true,

1195 + });

1196 + });

1197 const childFiber = renderer.root.findByType(Foo)._currentFiber();

1198 const tree = ReactDebugTools.inspectHooksOfFiber(childFiber);

1199 expect(normalizeSourceLoc(tree)).toMatchInlineSnapshot(`

@@ -1464,14 +1502,19 @@ describe('ReactHooksInspectionIntegration', () => {

1502 `);

1503 });

1504

1467 - it('should support useId hook', () => {

1505 + it('should support useId hook', async () => {

1506 function Foo(props) {

1507 const id = React.useId();

1508 const [state] = React.useState('hello');

1509 return <div id={id}>{state}</div>;

1510 }

1511

1474 - const renderer = ReactTestRenderer.create(<Foo />);

1512 + let renderer;

1513 + await act(() => {

1514 + renderer = ReactTestRenderer.create(<Foo />, {

1515 + unstable_isConcurrent: true,

1516 + });

1517 + });

1518 const childFiber = renderer.root.findByType(Foo)._currentFiber();

1519 const tree = ReactDebugTools.inspectHooksOfFiber(childFiber);

1520

@@ -1502,7 +1545,7 @@ describe('ReactHooksInspectionIntegration', () => {

1545

1546 describe('useMemoCache', () => {

1547 // @gate enableUseMemoCacheHook

1505 - it('should not be inspectable', () => {

1548 + it('should not be inspectable', async () => {

1549 function Foo() {

1550 const $ = useMemoCache(1);

1551 let t0;

@@ -1517,7 +1560,12 @@ describe('ReactHooksInspectionIntegration', () => {

1560 return t0;

1561 }

1562

1520 - const renderer = ReactTestRenderer.create(<Foo />);

1563 + let renderer;

1564 + await act(() => {

1565 + renderer = ReactTestRenderer.create(<Foo />, {

1566 + unstable_isConcurrent: true,

1567 + });

1568 + });

1569 const childFiber = renderer.root.findByType(Foo)._currentFiber();

1570 const tree = ReactDebugTools.inspectHooksOfFiber(childFiber);

1571

@@ -1525,7 +1573,7 @@ describe('ReactHooksInspectionIntegration', () => {

1573 });

1574

1575 // @gate enableUseMemoCacheHook

1528 - it('should work in combination with other hooks', () => {

1576 + it('should work in combination with other hooks', async () => {

1577 function useSomething() {

1578 const [something] = React.useState(null);

1579 const changeOtherSomething = React.useCallback(() => {}, [something]);

@@ -1552,7 +1600,12 @@ describe('ReactHooksInspectionIntegration', () => {

1600 return t0;

1601 }

1602

1555 - const renderer = ReactTestRenderer.create(<Foo />);

1603 + let renderer;

1604 + await act(() => {

1605 + renderer = ReactTestRenderer.create(<Foo />, {

1606 + unstable_isConcurrent: true,

1607 + });

1608 + });

1609 const childFiber = renderer.root.findByType(Foo)._currentFiber();

1610 const tree = ReactDebugTools.inspectHooksOfFiber(childFiber);

1611

@@ -1561,7 +1614,7 @@ describe('ReactHooksInspectionIntegration', () => {

1614 });

1615

1616 describe('useDebugValue', () => {

1564 - it('should support inspectable values for multiple custom hooks', () => {

1617 + it('should support inspectable values for multiple custom hooks', async () => {

1618 function useLabeledValue(label) {

1619 const [value] = React.useState(label);

1620 React.useDebugValue(`custom label ${label}`);

@@ -1578,7 +1631,12 @@ describe('ReactHooksInspectionIntegration', () => {

1631 useLabeledValue('d');

1632 return null;

1633 }

1581 - const renderer = ReactTestRenderer.create(<Example />);

1634 + let renderer;

1635 + await act(() => {

1636 + renderer = ReactTestRenderer.create(<Example />, {

1637 + unstable_isConcurrent: true,

1638 + });

1639 + });

1640 const childFiber = renderer.root.findByType(Example)._currentFiber();

1641 const tree = ReactDebugTools.inspectHooksOfFiber(childFiber);

1642 if (__DEV__) {

@@ -1795,7 +1853,7 @@ describe('ReactHooksInspectionIntegration', () => {

1853 `);

1854 });

1855

1798 - it('should support inspectable values for nested custom hooks', () => {

1856 + it('should support inspectable values for nested custom hooks', async () => {

1857 function useInner() {

1858 React.useDebugValue('inner');

1859 React.useState(0);

@@ -1808,7 +1866,12 @@ describe('ReactHooksInspectionIntegration', () => {

1866 useOuter();

1867 return null;

1868 }

1811 - const renderer = ReactTestRenderer.create(<Example />);

1869 + let renderer;

1870 + await act(() => {

1871 + renderer = ReactTestRenderer.create(<Example />, {

1872 + unstable_isConcurrent: true,

1873 + });

1874 + });

1875 const childFiber = renderer.root.findByType(Example)._currentFiber();

1876 const tree = ReactDebugTools.inspectHooksOfFiber(childFiber);

1877 if (__DEV__) {

@@ -1911,7 +1974,7 @@ describe('ReactHooksInspectionIntegration', () => {

1974 `);

1975 });

1976

1914 - it('should support multiple inspectable values per custom hooks', () => {

1977 + it('should support multiple inspectable values per custom hooks', async () => {

1978 function useMultiLabelCustom() {

1979 React.useDebugValue('one');

1980 React.useDebugValue('two');

@@ -1928,7 +1991,12 @@ describe('ReactHooksInspectionIntegration', () => {

1991 useSingleLabelCustom('two');

1992 return null;

1993 }

1931 - const renderer = ReactTestRenderer.create(<Example />);

1994 + let renderer;

1995 + await act(() => {

1996 + renderer = ReactTestRenderer.create(<Example />, {

1997 + unstable_isConcurrent: true,

1998 + });

1999 + });

2000 const childFiber = renderer.root.findByType(Example)._currentFiber();

2001 const tree = ReactDebugTools.inspectHooksOfFiber(childFiber);

2002 if (__DEV__) {

@@ -2121,18 +2189,23 @@ describe('ReactHooksInspectionIntegration', () => {

2189 `);

2190 });

2191

2124 - it('should ignore useDebugValue() made outside of a custom hook', () => {

2192 + it('should ignore useDebugValue() made outside of a custom hook', async () => {

2193 function Example() {

2194 React.useDebugValue('this is invalid');

2195 return null;

2196 }

2129 - const renderer = ReactTestRenderer.create(<Example />);

2197 + let renderer;

2198 + await act(() => {

2199 + renderer = ReactTestRenderer.create(<Example />, {

2200 + unstable_isConcurrent: true,

2201 + });

2202 + });

2203 const childFiber = renderer.root.findByType(Example)._currentFiber();

2204 const tree = ReactDebugTools.inspectHooksOfFiber(childFiber);

2205 expect(tree).toHaveLength(0);

2206 });

2207

2135 - it('should support an optional formatter function param', () => {

2208 + it('should support an optional formatter function param', async () => {

2209 function useCustom() {

2210 React.useDebugValue({bar: 123}, object => `bar:${object.bar}`);

2211 React.useState(0);

@@ -2141,7 +2214,12 @@ describe('ReactHooksInspectionIntegration', () => {

2214 useCustom();

2215 return null;

2216 }

2144 - const renderer = ReactTestRenderer.create(<Example />);

2217 + let renderer;

2218 + await act(() => {

2219 + renderer = ReactTestRenderer.create(<Example />, {

2220 + unstable_isConcurrent: true,

2221 + });

2222 + });

2223 const childFiber = renderer.root.findByType(Example)._currentFiber();

2224 const tree = ReactDebugTools.inspectHooksOfFiber(childFiber);

2225 if (__DEV__) {

@@ -2266,7 +2344,7 @@ describe('ReactHooksInspectionIntegration', () => {

2344 `);

2345 });

2346

2269 - it('should support an injected dispatcher', () => {

2347 + it('should support an injected dispatcher', async () => {

2348 function Foo(props) {

2349 const [state] = React.useState('hello world');

2350 return <div>{state}</div>;

@@ -2287,7 +2365,12 @@ describe('ReactHooksInspectionIntegration', () => {

2365 },

2366 };

2367

2290 - const renderer = ReactTestRenderer.create(<Foo />);

2368 + let renderer;

2369 + await act(() => {

2370 + renderer = ReactTestRenderer.create(<Foo />, {

2371 + unstable_isConcurrent: true,

2372 + });

2373 + });

2374 const childFiber = renderer.root._currentFiber();

2375

2376 let didCatch = false;

@@ -2332,7 +2415,12 @@ describe('ReactHooksInspectionIntegration', () => {

2415 return <div>count: {data.count}</div>;

2416 }

2417

2335 - const renderer = ReactTestRenderer.create(<Foo />);

2418 + let renderer;

2419 + await act(() => {

2420 + renderer = ReactTestRenderer.create(<Foo />, {

2421 + unstable_isConcurrent: true,

2422 + });

2423 + });

2424 expect(renderer.toJSON()).toEqual({

2425 type: 'div',

2426 props: {},

@@ -2384,7 +2472,7 @@ describe('ReactHooksInspectionIntegration', () => {

2472 `);

2473 });

2474

2387 - it('should support composite useSyncExternalStore hook', () => {

2475 + it('should support composite useSyncExternalStore hook', async () => {

2476 const useSyncExternalStore = React.useSyncExternalStore;

2477 function Foo() {

2478 const value = useSyncExternalStore(

@@ -2396,7 +2484,12 @@ describe('ReactHooksInspectionIntegration', () => {

2484 return value;

2485 }

2486

2399 - const renderer = ReactTestRenderer.create(<Foo />);

2487 + let renderer;

2488 + await act(() => {

2489 + renderer = ReactTestRenderer.create(<Foo />, {

2490 + unstable_isConcurrent: true,

2491 + });

2492 + });

2493 const childFiber = renderer.root.findByType(Foo)._currentFiber();

2494 const tree = ReactDebugTools.inspectHooksOfFiber(childFiber);

2495 expect(normalizeSourceLoc(tree)).toMatchInlineSnapshot(`

@@ -2447,7 +2540,7 @@ describe('ReactHooksInspectionIntegration', () => {

2540 `);

2541 });

2542

2450 - it('should support use(Context) hook', () => {

2543 + it('should support use(Context) hook', async () => {

2544 const Context = React.createContext('default');

2545 function Foo() {

2546 const value = React.use(Context);

@@ -2457,7 +2550,12 @@ describe('ReactHooksInspectionIntegration', () => {

2550 return value;

2551 }

2552

2460 - const renderer = ReactTestRenderer.create(<Foo />);

2553 + let renderer;

2554 + await act(() => {

2555 + renderer = ReactTestRenderer.create(<Foo />, {

2556 + unstable_isConcurrent: true,

2557 + });

2558 + });

2559 const childFiber = renderer.root.findByType(Foo)._currentFiber();

2560 const tree = ReactDebugTools.inspectHooksOfFiber(childFiber);

2561 expect(normalizeSourceLoc(tree)).toMatchInlineSnapshot(`

@@ -2509,7 +2607,7 @@ describe('ReactHooksInspectionIntegration', () => {

2607 });

2608

2609 // @gate enableAsyncActions

2512 - it('should support useOptimistic hook', () => {

2610 + it('should support useOptimistic hook', async () => {

2611 const useOptimistic = React.useOptimistic;

2612 function Foo() {

2613 const [value] = useOptimistic('abc', currentState => currentState);

@@ -2518,7 +2616,12 @@ describe('ReactHooksInspectionIntegration', () => {

2616 return value;

2617 }

2618

2521 - const renderer = ReactTestRenderer.create(<Foo />);

2619 + let renderer;

2620 + await act(() => {

2621 + renderer = ReactTestRenderer.create(<Foo />, {

2622 + unstable_isConcurrent: true,

2623 + });

2624 + });

2625 const childFiber = renderer.root.findByType(Foo)._currentFiber();

2626 const tree = ReactDebugTools.inspectHooksOfFiber(childFiber);

2627 expect(normalizeSourceLoc(tree)).toMatchInlineSnapshot(`

@@ -2570,7 +2673,7 @@ describe('ReactHooksInspectionIntegration', () => {

2673 });

2674

2675 // @gate enableFormActions && enableAsyncActions

2573 - it('should support useFormState hook', () => {

2676 + it('should support useFormState hook', async () => {

2677 function Foo() {

2678 const [value] = ReactDOM.useFormState(function increment(n) {

2679 return n;

@@ -2581,7 +2684,12 @@ describe('ReactHooksInspectionIntegration', () => {

2684 return value;

2685 }

2686

2584 - const renderer = ReactTestRenderer.create(<Foo />);

2687 + let renderer;

2688 + await act(() => {

2689 + renderer = ReactTestRenderer.create(<Foo />, {

2690 + unstable_isConcurrent: true,

2691 + });

2692 + });

2693 const childFiber = renderer.root.findByType(Foo)._currentFiber();

2694 const tree = ReactDebugTools.inspectHooksOfFiber(childFiber);

2695 expect(normalizeSourceLoc(tree)).toMatchInlineSnapshot(`

Concurrent RTR in ReactHooksInspectionIntegration-test (#28549)