@samitouri / QOS-React-2
Code Commits Issues Pulls Sessions CI/CD
main
main
js 101 lines 2.62 KB
Raw
1 /**
2 * Copyright (c) Meta Platforms, Inc. and affiliates.
3 *
4 * This source code is licensed under the MIT license found in the
5 * LICENSE file in the root directory of this source tree.
6 *
7 * @flow
8 */
9
10 import {getVersionedRenderImplementation} from './utils';
11
12 describe('CompilerIntegration', () => {
13 global.IS_REACT_ACT_ENVIRONMENT = true;
14 let React;
15 let act;
16 let useMemoCache;
17
18 beforeEach(() => {
19 React = require('react');
20 require('react-dom');
21 require('react-dom/client');
22 useMemoCache = require('react/compiler-runtime').c;
23
24 const utils = require('./utils');
25 act = utils.act;
26 });
27
28 afterEach(() => {
29 jest.restoreAllMocks();
30 });
31
32 const {render} = getVersionedRenderImplementation();
33
34 // @reactVersion >= 18.2
35 it('By default, component display names should not have Forget prefix', () => {
36 const hook = global.__REACT_DEVTOOLS_GLOBAL_HOOK__;
37 const reactDOMFiberRendererInterface = hook.rendererInterfaces.get(1);
38 expect(reactDOMFiberRendererInterface).not.toBeFalsy();
39
40 const Foo = () => {
41 // eslint-disable-next-line no-unused-vars
42 const [val, setVal] = React.useState(null);
43
44 return (
45 <div>
46 <Bar />
47 </div>
48 );
49 };
50 const Bar = () => <div>Hi!</div>;
51
52 act(() => render(<Foo />));
53
54 expect(
55 reactDOMFiberRendererInterface
56 .getDisplayNameForElementID(2)
57 .indexOf('Forget'),
58 ).toBe(-1);
59 expect(
60 reactDOMFiberRendererInterface
61 .getDisplayNameForElementID(3)
62 .indexOf('Forget'),
63 ).toBe(-1);
64 });
65
66 // For React 18.2, this will install uMC polyfill from react-compiler-runtime available on npm.
67 // @reactVersion >= 18.2
68 it('If useMemoCache used, the corresponding displayName for a component should have Forget prefix', () => {
69 const hook = global.__REACT_DEVTOOLS_GLOBAL_HOOK__;
70 const reactDOMFiberRendererInterface = hook.rendererInterfaces.get(1);
71 expect(reactDOMFiberRendererInterface).not.toBeFalsy();
72
73 const Foo = () => {
74 // eslint-disable-next-line no-unused-vars
75 const $ = useMemoCache(1);
76 // eslint-disable-next-line no-unused-vars
77 const [val, setVal] = React.useState(null);
78
79 return (
80 <div>
81 <Bar />
82 </div>
83 );
84 };
85 const Bar = () => <div>Hi!</div>;
86
87 act(() => render(<Foo />));
88
89 // useMemoCache is only used by Foo component
90 expect(
91 reactDOMFiberRendererInterface
92 .getDisplayNameForElementID(2)
93 .indexOf('Forget'),
94 ).toBe(0);
95 expect(
96 reactDOMFiberRendererInterface
97 .getDisplayNameForElementID(3)
98 .indexOf('Forget'),
99 ).toBe(-1);
100 });
101 });