@samitouri / QOS-React-2
Code Commits Issues Pulls Sessions CI/CD
main
main
js 156 lines 3.66 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 * @emails react-core
8 * @jest-environment node
9 */
10
11 'use strict';
12
13 let React;
14 let ReactNoop;
15 let act;
16
17 describe('ReactIncrementalUpdatesMinimalism', () => {
18 beforeEach(() => {
19 jest.resetModules();
20 React = require('react');
21 ReactNoop = require('react-noop-renderer');
22
23 act = require('internal-test-utils').act;
24 });
25
26 it('should render a simple component', async () => {
27 function Child() {
28 return <div>Hello World</div>;
29 }
30
31 function Parent() {
32 return <Child />;
33 }
34
35 ReactNoop.startTrackingHostCounters();
36 await act(() => ReactNoop.render(<Parent />));
37 expect(ReactNoop.stopTrackingHostCounters()).toEqual({
38 hostUpdateCounter: 0,
39 });
40
41 ReactNoop.startTrackingHostCounters();
42 await act(() => ReactNoop.render(<Parent />));
43 expect(ReactNoop.stopTrackingHostCounters()).toEqual({
44 hostUpdateCounter: 1,
45 });
46 });
47
48 it('should not diff referentially equal host elements', async () => {
49 function Leaf(props) {
50 return (
51 <span>
52 hello
53 <b />
54 {props.name}
55 </span>
56 );
57 }
58
59 const constEl = (
60 <div>
61 <Leaf name="world" />
62 </div>
63 );
64
65 function Child() {
66 return constEl;
67 }
68
69 function Parent() {
70 return <Child />;
71 }
72
73 ReactNoop.startTrackingHostCounters();
74 await act(() => ReactNoop.render(<Parent />));
75 expect(ReactNoop.stopTrackingHostCounters()).toEqual({
76 hostUpdateCounter: 0,
77 });
78
79 ReactNoop.startTrackingHostCounters();
80 await act(() => ReactNoop.render(<Parent />));
81 expect(ReactNoop.stopTrackingHostCounters()).toEqual({
82 hostUpdateCounter: 0,
83 });
84 });
85
86 it('should not diff parents of setState targets', async () => {
87 let childInst;
88
89 function Leaf(props) {
90 return (
91 <span>
92 hello
93 <b />
94 {props.name}
95 </span>
96 );
97 }
98
99 class Child extends React.Component {
100 state = {name: 'Batman'};
101 render() {
102 childInst = this;
103 return (
104 <div>
105 <Leaf name={this.state.name} />
106 </div>
107 );
108 }
109 }
110
111 function Parent() {
112 return (
113 <section>
114 <div>
115 <Leaf name="world" />
116 <Child />
117 <hr />
118 <Leaf name="world" />
119 </div>
120 </section>
121 );
122 }
123
124 ReactNoop.startTrackingHostCounters();
125 await act(() => ReactNoop.render(<Parent />));
126 expect(ReactNoop.stopTrackingHostCounters()).toEqual({
127 hostUpdateCounter: 0,
128 });
129
130 ReactNoop.startTrackingHostCounters();
131 await act(() => childInst.setState({name: 'Robin'}));
132 expect(ReactNoop.stopTrackingHostCounters()).toEqual({
133 // Child > div
134 // Child > Leaf > span
135 // Child > Leaf > span > b
136 // Child > Leaf > span > #text
137 hostUpdateCounter: 4,
138 });
139
140 ReactNoop.startTrackingHostCounters();
141 await act(() => ReactNoop.render(<Parent />));
142 expect(ReactNoop.stopTrackingHostCounters()).toEqual({
143 // Parent > section
144 // Parent > section > div
145 // Parent > section > div > Leaf > span
146 // Parent > section > div > Leaf > span > b
147 // Parent > section > div > Child > div
148 // Parent > section > div > Child > div > Leaf > span
149 // Parent > section > div > Child > div > Leaf > span > b
150 // Parent > section > div > hr
151 // Parent > section > div > Leaf > span
152 // Parent > section > div > Leaf > span > b
153 hostUpdateCounter: 10,
154 });
155 });
156 });