Skip to content

Commit 6e9a816

Browse files
rubennortefacebook-github-bot
rubennorte
authored and
facebook-github-bot
committed
Migrate test to use React.createRef insted of ref functions (#51345)
Summary: Pull Request resolved: #51345 Changelog: [internal] I just realized there were some tests where we didn't migrate to the new recommended pattern. Reviewed By: rshest Differential Revision: D74803018 fbshipit-source-id: b74468f1be35fba8d20d3b96ea2b55452a8175ee
1 parent c7611e0 commit 6e9a816

File tree

2 files changed

+58
-110
lines changed

2 files changed

+58
-110
lines changed

‎packages/react-native-fantom/src/__tests__/Fantom-itest.js

+12-14
Original file line numberDiff line numberDiff line change
@@ -912,26 +912,21 @@ describe('Fantom', () => {
912912

913913
it('change size of <Modal />', () => {
914914
const root = Fantom.createRoot();
915-
let maybeModalNode;
916-
let maybeViewNode;
915+
const modalNodeRef = React.createRef<HostInstance>();
916+
const viewNodeRef = React.createRef<HostInstance>();
917917

918918
Fantom.runTask(() => {
919919
root.render(
920-
<Modal
921-
ref={(node: ?HostInstance) => {
922-
maybeModalNode = node;
923-
}}>
924-
<View
925-
style={{width: '50%', height: '25%'}}
926-
ref={node => {
927-
maybeViewNode = node;
928-
}}
929-
/>
920+
<Modal ref={modalNodeRef}>
921+
<View style={{width: '50%', height: '25%'}} ref={viewNodeRef} />
930922
</Modal>,
931923
);
932924
});
933925

934-
const modalElement = ensureInstance(maybeModalNode, ReactNativeElement);
926+
const modalElement = ensureInstance(
927+
modalNodeRef.current,
928+
ReactNativeElement,
929+
);
935930

936931
Fantom.runOnUIThread(() => {
937932
Fantom.enqueueModalSizeUpdate(modalElement, {
@@ -942,7 +937,10 @@ describe('Fantom', () => {
942937

943938
Fantom.runWorkLoop();
944939

945-
const viewElement = ensureInstance(maybeViewNode, ReactNativeElement);
940+
const viewElement = ensureInstance(
941+
viewNodeRef.current,
942+
ReactNativeElement,
943+
);
946944

947945
const boundingClientRect = viewElement.getBoundingClientRect();
948946
expect(boundingClientRect.height).toBe(25);

‎packages/react-native/Libraries/ReactNative/ReactFabricPublicInstance/__tests__/setUpReactFabricPublicInstanceFantomTests.js

+46-96
Original file line numberDiff line numberDiff line change
@@ -26,19 +26,15 @@ export default function setUpTests({isModern}: {isModern: boolean}) {
2626
// TODO: move these tests to the test file for `ReactNativeElement` when the legacy implementation is removed.
2727
describe(`ReactFabricPublicInstance (${isModern ? 'modern' : 'legacy'})`, () => {
2828
it('should provide instances of the right class as refs in host components', () => {
29-
let node;
29+
const nodeRef = React.createRef<HostInstance>();
3030

3131
const root = Fantom.createRoot();
3232
Fantom.runTask(() => {
33-
root.render(
34-
<View
35-
ref={receivedNode => {
36-
node = receivedNode;
37-
}}
38-
/>,
39-
);
33+
root.render(<View ref={nodeRef} />);
4034
});
4135

36+
const node = nullthrows(nodeRef.current);
37+
4238
expect(node).toBeInstanceOf(
4339
isModern ? ReactNativeElement : ReactFabricHostComponent,
4440
);
@@ -47,20 +43,13 @@ export default function setUpTests({isModern}: {isModern: boolean}) {
4743
describe('blur', () => {
4844
test('blur() invokes TextInputState', () => {
4945
const root = Fantom.createRoot();
50-
51-
let maybeNode;
46+
const nodeRef = React.createRef<HostInstance>();
5247

5348
Fantom.runTask(() => {
54-
root.render(
55-
<View
56-
ref={node => {
57-
maybeNode = node;
58-
}}
59-
/>,
60-
);
49+
root.render(<View ref={nodeRef} />);
6150
});
6251

63-
const node = nullthrows(maybeNode);
52+
const node = nullthrows(nodeRef.current);
6453

6554
const blurTextInput = jest.fn();
6655

@@ -79,20 +68,13 @@ export default function setUpTests({isModern}: {isModern: boolean}) {
7968
describe('focus', () => {
8069
test('focus() invokes TextInputState', () => {
8170
const root = Fantom.createRoot();
82-
83-
let maybeNode;
71+
const ref = React.createRef<HostInstance>();
8472

8573
Fantom.runTask(() => {
86-
root.render(
87-
<View
88-
ref={node => {
89-
maybeNode = node;
90-
}}
91-
/>,
92-
);
74+
root.render(<View ref={ref} />);
9375
});
9476

95-
const node = nullthrows(maybeNode);
77+
const node = nullthrows(ref.current);
9678

9779
const focusTextInput = jest.fn();
9880

@@ -111,21 +93,18 @@ export default function setUpTests({isModern}: {isModern: boolean}) {
11193
describe('measure', () => {
11294
it('component.measure(...) invokes callback', () => {
11395
const root = Fantom.createRoot();
114-
115-
let maybeNode;
96+
const ref = React.createRef<HostInstance>();
11697

11798
Fantom.runTask(() => {
11899
root.render(
119100
<View
120101
style={{width: 100, height: 100, left: 10, top: 10}}
121-
ref={node => {
122-
maybeNode = node;
123-
}}
102+
ref={ref}
124103
/>,
125104
);
126105
});
127106

128-
const node = nullthrows(maybeNode);
107+
const node = nullthrows(ref.current);
129108

130109
const callback = jest.fn();
131110
node.measure(callback);
@@ -136,21 +115,18 @@ export default function setUpTests({isModern}: {isModern: boolean}) {
136115

137116
it('unmounted.measure(...) does nothing', () => {
138117
const root = Fantom.createRoot();
139-
140-
let maybeNode;
118+
const ref = React.createRef<HostInstance>();
141119

142120
Fantom.runTask(() => {
143121
root.render(
144122
<View
145123
style={{width: 100, height: 100, left: 10, top: 10}}
146-
ref={node => {
147-
maybeNode = node;
148-
}}
124+
ref={ref}
149125
/>,
150126
);
151127
});
152128

153-
const node = nullthrows(maybeNode);
129+
const node = nullthrows(ref.current);
154130

155131
Fantom.runTask(() => {
156132
root.render(<></>);
@@ -166,21 +142,18 @@ export default function setUpTests({isModern}: {isModern: boolean}) {
166142
describe('measureInWindow', () => {
167143
it('component.measureInWindow(...) invokes callback', () => {
168144
const root = Fantom.createRoot();
169-
170-
let maybeNode;
145+
const ref = React.createRef<HostInstance>();
171146

172147
Fantom.runTask(() => {
173148
root.render(
174149
<View
175150
style={{width: 100, height: 100, left: 10, top: 10}}
176-
ref={node => {
177-
maybeNode = node;
178-
}}
151+
ref={ref}
179152
/>,
180153
);
181154
});
182155

183-
const node = nullthrows(maybeNode);
156+
const node = nullthrows(ref.current);
184157

185158
const callback = jest.fn();
186159
node.measureInWindow(callback);
@@ -191,21 +164,18 @@ export default function setUpTests({isModern}: {isModern: boolean}) {
191164

192165
it('unmounted.measureInWindow(...) does nothing', () => {
193166
const root = Fantom.createRoot();
194-
195-
let maybeNode;
167+
const ref = React.createRef<HostInstance>();
196168

197169
Fantom.runTask(() => {
198170
root.render(
199171
<View
200172
style={{width: 100, height: 100, left: 10, top: 10}}
201-
ref={node => {
202-
maybeNode = node;
203-
}}
173+
ref={ref}
204174
/>,
205175
);
206176
});
207177

208-
const node = nullthrows(maybeNode);
178+
const node = nullthrows(ref.current);
209179

210180
Fantom.runTask(() => {
211181
root.render(<></>);
@@ -221,29 +191,24 @@ export default function setUpTests({isModern}: {isModern: boolean}) {
221191
describe('measureLayout', () => {
222192
it('component.measureLayout(component, ...) invokes callback', () => {
223193
const root = Fantom.createRoot();
224-
225-
let maybeParentNode;
226-
let maybeChildNode;
194+
const parentRef = React.createRef<HostInstance>();
195+
const childRef = React.createRef<HostInstance>();
227196

228197
Fantom.runTask(() => {
229198
root.render(
230199
<View
231200
style={{width: 100, height: 100, left: 10, top: 10}}
232-
ref={node => {
233-
maybeParentNode = node;
234-
}}>
201+
ref={parentRef}>
235202
<View
236203
style={{width: 10, height: 10, left: 20, top: 20}}
237-
ref={node => {
238-
maybeChildNode = node;
239-
}}
204+
ref={childRef}
240205
/>
241206
</View>,
242207
);
243208
});
244209

245-
const parentNode = nullthrows(maybeParentNode);
246-
const childNode = nullthrows(maybeChildNode);
210+
const parentNode = nullthrows(parentRef.current);
211+
const childNode = nullthrows(childRef.current);
247212

248213
const callback = jest.fn();
249214
childNode.measureLayout(parentNode, callback);
@@ -254,29 +219,24 @@ export default function setUpTests({isModern}: {isModern: boolean}) {
254219

255220
it('unmounted.measureLayout(component, ...) does nothing', () => {
256221
const root = Fantom.createRoot();
257-
258-
let maybeParentNode;
259-
let maybeChildNode;
222+
const parentRef = React.createRef<HostInstance>();
223+
const childRef = React.createRef<HostInstance>();
260224

261225
Fantom.runTask(() => {
262226
root.render(
263227
<View
264228
style={{width: 100, height: 100, left: 10, top: 10}}
265-
ref={node => {
266-
maybeParentNode = node;
267-
}}>
229+
ref={parentRef}>
268230
<View
269231
style={{width: 10, height: 10, left: 20, top: 20}}
270-
ref={node => {
271-
maybeChildNode = node;
272-
}}
232+
ref={childRef}
273233
/>
274234
</View>,
275235
);
276236
});
277237

278-
const parentNode = nullthrows(maybeParentNode);
279-
const childNode = nullthrows(maybeChildNode);
238+
const parentNode = nullthrows(parentRef.current);
239+
const childNode = nullthrows(childRef.current);
280240

281241
Fantom.runTask(() => {
282242
root.render(
@@ -292,29 +252,24 @@ export default function setUpTests({isModern}: {isModern: boolean}) {
292252

293253
it('component.measureLayout(unmounted, ...) does nothing', () => {
294254
const root = Fantom.createRoot();
295-
296-
let maybeParentNode;
297-
let maybeChildNode;
255+
const parentRef = React.createRef<HostInstance>();
256+
const childRef = React.createRef<HostInstance>();
298257

299258
Fantom.runTask(() => {
300259
root.render(
301260
<View
302261
style={{width: 100, height: 100, left: 10, top: 10}}
303-
ref={node => {
304-
maybeParentNode = node;
305-
}}>
262+
ref={parentRef}>
306263
<View
307264
style={{width: 10, height: 10, left: 20, top: 20}}
308-
ref={node => {
309-
maybeChildNode = node;
310-
}}
265+
ref={childRef}
311266
/>
312267
</View>,
313268
);
314269
});
315270

316-
const parentNode = nullthrows(maybeParentNode);
317-
const childNode = nullthrows(maybeChildNode);
271+
const parentNode = nullthrows(parentRef.current);
272+
const childNode = nullthrows(childRef.current);
318273

319274
Fantom.runTask(() => {
320275
root.render(
@@ -330,29 +285,24 @@ export default function setUpTests({isModern}: {isModern: boolean}) {
330285

331286
it('unmounted.measureLayout(unmounted, ...) does nothing', () => {
332287
const root = Fantom.createRoot();
333-
334-
let maybeParentNode;
335-
let maybeChildNode;
288+
const parentRef = React.createRef<HostInstance>();
289+
const childRef = React.createRef<HostInstance>();
336290

337291
Fantom.runTask(() => {
338292
root.render(
339293
<View
340294
style={{width: 100, height: 100, left: 10, top: 10}}
341-
ref={node => {
342-
maybeParentNode = node;
343-
}}>
295+
ref={parentRef}>
344296
<View
345297
style={{width: 10, height: 10, left: 20, top: 20}}
346-
ref={node => {
347-
maybeChildNode = node;
348-
}}
298+
ref={childRef}
349299
/>
350300
</View>,
351301
);
352302
});
353303

354-
const parentNode = nullthrows(maybeParentNode);
355-
const childNode = nullthrows(maybeChildNode);
304+
const parentNode = nullthrows(parentRef.current);
305+
const childNode = nullthrows(childRef.current);
356306

357307
Fantom.runTask(() => {
358308
root.render(<></>);

0 commit comments

Comments
 (0)