9
9
10
10
import type Store from 'react-devtools-shared/src/devtools/store' ;
11
11
12
+ import { getVersionedRenderImplementation } from './utils' ;
13
+
12
14
describe ( 'ProfilerStore' , ( ) => {
13
15
let React ;
14
- let ReactDOM ;
15
- let legacyRender ;
16
16
let store : Store ;
17
17
let utils ;
18
18
19
19
beforeEach ( ( ) => {
20
20
utils = require ( './utils' ) ;
21
21
utils . beforeEachProfiling ( ) ;
22
22
23
- legacyRender = utils . legacyRender ;
24
-
25
23
store = global . store ;
26
24
store . collapseNodesByDefault = false ;
27
25
store . recordChangeDescriptions = true ;
28
26
29
27
React = require ( 'react' ) ;
30
- ReactDOM = require ( 'react-dom' ) ;
31
28
} ) ;
32
29
30
+ const { render, unmount} = getVersionedRenderImplementation ( ) ;
31
+ const { render : renderOther , unmount : unmountOther } =
32
+ getVersionedRenderImplementation ( ) ;
33
+
33
34
// @reactVersion >= 16.9
34
35
it ( 'should not remove profiling data when roots are unmounted' , async ( ) => {
35
36
const Parent = ( { count} ) =>
@@ -38,32 +39,27 @@ describe('ProfilerStore', () => {
38
39
. map ( ( _ , index ) => < Child key = { index } duration = { index } /> ) ;
39
40
const Child = ( ) => < div > Hi!</ div > ;
40
41
41
- const containerA = document . createElement ( 'div' ) ;
42
- const containerB = document . createElement ( 'div' ) ;
43
-
44
42
utils . act ( ( ) => {
45
- legacyRender ( < Parent key = "A" count = { 3 } /> , containerA ) ;
46
- legacyRender ( < Parent key = "B" count = { 2 } /> , containerB ) ;
43
+ render ( < Parent key = "A" count = { 3 } /> ) ;
44
+ renderOther ( < Parent key = "B" count = { 2 } /> ) ;
47
45
} ) ;
48
46
49
47
utils . act ( ( ) => store . profilerStore . startProfiling ( ) ) ;
50
48
51
49
utils . act ( ( ) => {
52
- legacyRender ( < Parent key = "A" count = { 4 } /> , containerA ) ;
53
- legacyRender ( < Parent key = "B" count = { 1 } /> , containerB ) ;
50
+ render ( < Parent key = "A" count = { 4 } /> ) ;
51
+ renderOther ( < Parent key = "B" count = { 1 } /> ) ;
54
52
} ) ;
55
53
56
54
utils . act ( ( ) => store . profilerStore . stopProfiling ( ) ) ;
57
55
58
56
const rootA = store . roots [ 0 ] ;
59
57
const rootB = store . roots [ 1 ] ;
60
58
61
- utils . act ( ( ) => ReactDOM . unmountComponentAtNode ( containerB ) ) ;
62
-
59
+ utils . act ( ( ) => unmountOther ( ) ) ;
63
60
expect ( store . profilerStore . getDataForRoot ( rootA ) ) . not . toBeNull ( ) ;
64
61
65
- utils . act ( ( ) => ReactDOM . unmountComponentAtNode ( containerA ) ) ;
66
-
62
+ utils . act ( ( ) => unmount ( ) ) ;
67
63
expect ( store . profilerStore . getDataForRoot ( rootB ) ) . not . toBeNull ( ) ;
68
64
} ) ;
69
65
@@ -95,14 +91,9 @@ describe('ProfilerStore', () => {
95
91
return < input ref = { inputRef } value = { name } onChange = { handleChange } /> ;
96
92
} ;
97
93
98
- const container = document . createElement ( 'div' ) ;
99
-
100
- // This element has to be in the <body> for the event system to work.
101
- document . body . appendChild ( container ) ;
102
-
103
94
// It's important that this test uses legacy sync mode.
104
95
// The root API does not trigger this particular failing case.
105
- legacyRender ( < ControlledInput /> , container ) ;
96
+ utils . act ( ( ) => render ( < ControlledInput /> ) ) ;
106
97
107
98
utils . act ( ( ) => store . profilerStore . startProfiling ( ) ) ;
108
99
@@ -148,14 +139,9 @@ describe('ProfilerStore', () => {
148
139
return < input ref = { inputRef } onBlur = { handleBlur } /> ;
149
140
} ;
150
141
151
- const container = document . createElement ( 'div' ) ;
152
-
153
- // This element has to be in the <body> for the event system to work.
154
- document . body . appendChild ( container ) ;
155
-
156
142
// It's important that this test uses legacy sync mode.
157
143
// The root API does not trigger this particular failing case.
158
- legacyRender ( < Example /> , container ) ;
144
+ utils . act ( ( ) => render ( < Example /> ) ) ;
159
145
160
146
expect ( commitCount ) . toBe ( 1 ) ;
161
147
commitCount = 0 ;
@@ -164,10 +150,10 @@ describe('ProfilerStore', () => {
164
150
165
151
// Focus and blur.
166
152
const target = inputRef . current ;
167
- target . focus ( ) ;
168
- target . blur ( ) ;
169
- target . focus ( ) ;
170
- target . blur ( ) ;
153
+ utils . act ( ( ) => target . focus ( ) ) ;
154
+ utils . act ( ( ) => target . blur ( ) ) ;
155
+ utils . act ( ( ) => target . focus ( ) ) ;
156
+ utils . act ( ( ) => target . blur ( ) ) ;
171
157
expect ( commitCount ) . toBe ( 1 ) ;
172
158
173
159
utils . act ( ( ) => store . profilerStore . stopProfiling ( ) ) ;
@@ -204,14 +190,9 @@ describe('ProfilerStore', () => {
204
190
return state . hasOwnProperty ;
205
191
} ;
206
192
207
- const container = document . createElement ( 'div' ) ;
208
-
209
- // This element has to be in the <body> for the event system to work.
210
- document . body . appendChild ( container ) ;
211
-
212
193
// It's important that this test uses legacy sync mode.
213
194
// The root API does not trigger this particular failing case.
214
- legacyRender ( < ControlledInput /> , container ) ;
195
+ utils . act ( ( ) => render ( < ControlledInput /> ) ) ;
215
196
216
197
utils . act ( ( ) => store . profilerStore . startProfiling ( ) ) ;
217
198
utils . act ( ( ) =>
@@ -243,9 +224,7 @@ describe('ProfilerStore', () => {
243
224
) ;
244
225
} ;
245
226
246
- const container = document . createElement ( 'div' ) ;
247
-
248
- utils . act ( ( ) => legacyRender ( < App /> , container ) ) ;
227
+ utils . act ( ( ) => render ( < App /> ) ) ;
249
228
utils . act ( ( ) => store . profilerStore . startProfiling ( ) ) ;
250
229
} ) ;
251
230
} ) ;
0 commit comments