Skip to content

Commit 7583f13

Browse files
potetopoteto
committed
Update tests to pass event function via a closure instead
1 parent 691b1bd commit 7583f13

File tree

1 file changed

+47
-19
lines changed

1 file changed

+47
-19
lines changed

‎packages/react-reconciler/src/__tests__/useEvent-test.js

Lines changed: 47 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,7 @@ describe('useEvent', () => {
6868

6969
return (
7070
<>
71-
<IncrementButton onClick={onClick} ref={button} />
71+
<IncrementButton onClick={() => onClick()} ref={button} />
7272
<Text text={'Count: ' + count} />
7373
</>
7474
);
@@ -83,17 +83,15 @@ describe('useEvent', () => {
8383
]);
8484

8585
act(button.current.increment);
86-
expect(Scheduler).toHaveYielded([
87-
// Button should not re-render, because its props haven't changed
88-
'Count: 1',
89-
]);
86+
expect(Scheduler).toHaveYielded(['Increment', 'Count: 1']);
9087
expect(ReactNoop.getChildren()).toEqual([
9188
span('Increment'),
9289
span('Count: 1'),
9390
]);
9491

9592
act(button.current.increment);
9693
expect(Scheduler).toHaveYielded([
94+
'Increment',
9795
// Event should use the updated callback function closed over the new value.
9896
'Count: 2',
9997
]);
@@ -104,15 +102,15 @@ describe('useEvent', () => {
104102

105103
// Increase the increment prop amount
106104
ReactNoop.render(<Counter incrementBy={10} />);
107-
expect(Scheduler).toFlushAndYield(['Count: 2']);
105+
expect(Scheduler).toFlushAndYield(['Increment', 'Count: 2']);
108106
expect(ReactNoop.getChildren()).toEqual([
109107
span('Increment'),
110108
span('Count: 2'),
111109
]);
112110

113111
// Event uses the new prop
114112
act(button.current.increment);
115-
expect(Scheduler).toHaveYielded(['Count: 12']);
113+
expect(Scheduler).toHaveYielded(['Increment', 'Count: 12']);
116114
expect(ReactNoop.getChildren()).toEqual([
117115
span('Increment'),
118116
span('Count: 12'),
@@ -143,7 +141,7 @@ describe('useEvent', () => {
143141

144142
return (
145143
<>
146-
<GreetButton hello={hello} onClick={onClick} ref={button} />
144+
<GreetButton hello={hello} onClick={() => onClick()} ref={button} />
147145
<Text text={'Greeting: ' + greeting} />
148146
</>
149147
);
@@ -158,7 +156,10 @@ describe('useEvent', () => {
158156
]);
159157

160158
act(button.current.greet);
161-
expect(Scheduler).toHaveYielded(['Greeting: undefined says hej']);
159+
expect(Scheduler).toHaveYielded([
160+
'Say hej',
161+
'Greeting: undefined says hej',
162+
]);
162163
expect(ReactNoop.getChildren()).toEqual([
163164
span('Say hej'),
164165
span('Greeting: undefined says hej'),
@@ -186,7 +187,7 @@ describe('useEvent', () => {
186187

187188
return (
188189
<>
189-
<IncrementButton onClick={onClick} />
190+
<IncrementButton onClick={() => onClick()} />
190191
<Text text={'Count: ' + count} />
191192
</>
192193
);
@@ -197,6 +198,8 @@ describe('useEvent', () => {
197198
'An event from useEvent was called during render',
198199
);
199200

201+
// If something throws, we try one more time synchronously in case the error was
202+
// caused by a data race. See recoverFromConcurrentError
200203
expect(Scheduler).toHaveYielded(['Count: 0', 'Count: 0']);
201204
});
202205

@@ -224,7 +227,7 @@ describe('useEvent', () => {
224227

225228
return (
226229
<>
227-
<IncrementButton onClick={increment} ref={button} />
230+
<IncrementButton onClick={() => increment()} ref={button} />
228231
<Text text={'Count: ' + count} />
229232
</>
230233
);
@@ -237,6 +240,7 @@ describe('useEvent', () => {
237240
'Increment',
238241
'Count: 0',
239242
'Effect: by 2',
243+
'Increment',
240244
'Count: 2',
241245
]);
242246
expect(ReactNoop.getChildren()).toEqual([
@@ -246,6 +250,7 @@ describe('useEvent', () => {
246250

247251
act(button.current.increment);
248252
expect(Scheduler).toHaveYielded([
253+
'Increment',
249254
// Effect should not re-run because the dependency hasn't changed.
250255
'Count: 3',
251256
]);
@@ -256,6 +261,7 @@ describe('useEvent', () => {
256261

257262
act(button.current.increment);
258263
expect(Scheduler).toHaveYielded([
264+
'Increment',
259265
// Event should use the updated callback function closed over the new value.
260266
'Count: 4',
261267
]);
@@ -267,8 +273,10 @@ describe('useEvent', () => {
267273
// Increase the increment prop amount
268274
ReactNoop.render(<Counter incrementBy={10} />);
269275
expect(Scheduler).toFlushAndYield([
276+
'Increment',
270277
'Count: 4',
271278
'Effect: by 20',
279+
'Increment',
272280
'Count: 24',
273281
]);
274282
expect(ReactNoop.getChildren()).toEqual([
@@ -278,7 +286,7 @@ describe('useEvent', () => {
278286

279287
// Event uses the new prop
280288
act(button.current.increment);
281-
expect(Scheduler).toHaveYielded(['Count: 34']);
289+
expect(Scheduler).toHaveYielded(['Increment', 'Count: 34']);
282290
expect(ReactNoop.getChildren()).toEqual([
283291
span('Increment'),
284292
span('Count: 34'),
@@ -309,7 +317,7 @@ describe('useEvent', () => {
309317

310318
return (
311319
<>
312-
<IncrementButton onClick={increment} ref={button} />
320+
<IncrementButton onClick={() => increment()} ref={button} />
313321
<Text text={'Count: ' + count} />
314322
</>
315323
);
@@ -321,6 +329,7 @@ describe('useEvent', () => {
321329
'Increment',
322330
'Count: 0',
323331
'Effect: by 2',
332+
'Increment',
324333
'Count: 2',
325334
]);
326335
expect(ReactNoop.getChildren()).toEqual([
@@ -330,6 +339,7 @@ describe('useEvent', () => {
330339

331340
act(button.current.increment);
332341
expect(Scheduler).toHaveYielded([
342+
'Increment',
333343
// Effect should not re-run because the dependency hasn't changed.
334344
'Count: 3',
335345
]);
@@ -340,6 +350,7 @@ describe('useEvent', () => {
340350

341351
act(button.current.increment);
342352
expect(Scheduler).toHaveYielded([
353+
'Increment',
343354
// Event should use the updated callback function closed over the new value.
344355
'Count: 4',
345356
]);
@@ -351,8 +362,10 @@ describe('useEvent', () => {
351362
// Increase the increment prop amount
352363
ReactNoop.render(<Counter incrementBy={10} />);
353364
expect(Scheduler).toFlushAndYield([
365+
'Increment',
354366
'Count: 4',
355367
'Effect: by 20',
368+
'Increment',
356369
'Count: 24',
357370
]);
358371
expect(ReactNoop.getChildren()).toEqual([
@@ -362,7 +375,7 @@ describe('useEvent', () => {
362375

363376
// Event uses the new prop
364377
act(button.current.increment);
365-
expect(Scheduler).toHaveYielded(['Count: 34']);
378+
expect(Scheduler).toHaveYielded(['Increment', 'Count: 34']);
366379
expect(ReactNoop.getChildren()).toEqual([
367380
span('Increment'),
368381
span('Count: 34'),
@@ -399,7 +412,7 @@ describe('useEvent', () => {
399412

400413
return (
401414
<>
402-
<IncrementButton onClick={increment} ref={button} />
415+
<IncrementButton onClick={() => increment()} ref={button} />
403416
<Text text={'Count: ' + count} />
404417
</>
405418
);
@@ -411,6 +424,7 @@ describe('useEvent', () => {
411424
'Increment',
412425
'Count: 0',
413426
'Effect: by 2',
427+
'Increment',
414428
'Count: 2',
415429
]);
416430
expect(ReactNoop.getChildren()).toEqual([
@@ -420,6 +434,7 @@ describe('useEvent', () => {
420434

421435
act(button.current.increment);
422436
expect(Scheduler).toHaveYielded([
437+
'Increment',
423438
// Effect should not re-run because the dependency hasn't changed.
424439
'Count: 3',
425440
]);
@@ -430,6 +445,7 @@ describe('useEvent', () => {
430445

431446
act(button.current.increment);
432447
expect(Scheduler).toHaveYielded([
448+
'Increment',
433449
// Event should use the updated callback function closed over the new value.
434450
'Count: 4',
435451
]);
@@ -441,8 +457,10 @@ describe('useEvent', () => {
441457
// Increase the increment prop amount
442458
ReactNoop.render(<Counter incrementBy={10} />);
443459
expect(Scheduler).toFlushAndYield([
460+
'Increment',
444461
'Count: 4',
445462
'Effect: by 20',
463+
'Increment',
446464
'Count: 24',
447465
]);
448466
expect(ReactNoop.getChildren()).toEqual([
@@ -452,7 +470,7 @@ describe('useEvent', () => {
452470

453471
// Event uses the new prop
454472
act(button.current.increment);
455-
expect(Scheduler).toHaveYielded(['Count: 34']);
473+
expect(Scheduler).toHaveYielded(['Increment', 'Count: 34']);
456474
expect(ReactNoop.getChildren()).toEqual([
457475
span('Increment'),
458476
span('Count: 34'),
@@ -610,7 +628,14 @@ describe('useEvent', () => {
610628
onVisit(url);
611629
}, [url]);
612630

613-
return <AddToCartButton onClick={onClick} ref={button} />;
631+
return (
632+
<AddToCartButton
633+
onClick={() => {
634+
onClick();
635+
}}
636+
ref={button}
637+
/>
638+
);
614639
}
615640

616641
const button = React.createRef(null);
@@ -626,7 +651,7 @@ describe('useEvent', () => {
626651
'url: /shop/1, numberOfItems: 0',
627652
]);
628653
act(button.current.addToCart);
629-
expect(Scheduler).toFlushWithoutYielding();
654+
expect(Scheduler).toHaveYielded(['Add to cart']);
630655

631656
act(() =>
632657
ReactNoop.render(
@@ -635,6 +660,9 @@ describe('useEvent', () => {
635660
</AppShell>,
636661
),
637662
);
638-
expect(Scheduler).toHaveYielded(['url: /shop/2, numberOfItems: 1']);
663+
expect(Scheduler).toHaveYielded([
664+
'Add to cart',
665+
'url: /shop/2, numberOfItems: 1',
666+
]);
639667
});
640668
});

0 commit comments

Comments
 (0)