Skip to content

Commit 5768596

Browse files
eps1loneps1lon
committed
Assume renderHook from @testing-library/react 
1 parent 97efce5 commit 5768596

File tree

4 files changed

+687
-453
lines changed

4 files changed

+687
-453
lines changed

‎src/react/hooks/__tests__/useLazyQuery.test.tsx

Lines changed: 109 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React from 'react';
22
import gql from 'graphql-tag';
3+
import { waitFor } from '@testing-library/react';
34
import { renderHook } from '@testing-library/react-hooks';
45

56
import { ApolloClient, InMemoryCache } from '../../../core';
@@ -17,7 +18,7 @@ describe('useLazyQuery Hook', () => {
1718
delay: 20,
1819
},
1920
];
20-
const { result, waitForNextUpdate } = renderHook(
21+
const { result } = renderHook(
2122
() => useLazyQuery(query),
2223
{
2324
wrapper: ({ children }) => (
@@ -33,11 +34,13 @@ describe('useLazyQuery Hook', () => {
3334
const execute = result.current[0];
3435
setTimeout(() => execute());
3536

36-
await waitForNextUpdate();
37-
expect(result.current[1].loading).toBe(true);
37+
await waitFor(() => {
38+
expect(result.current[1].loading).toBe(true);
39+
}, { interval: 10 });
3840

39-
await waitForNextUpdate();
40-
expect(result.current[1].loading).toBe(false);
41+
await waitFor(() => {
42+
expect(result.current[1].loading).toBe(false);
43+
});
4144
expect(result.current[1].data).toEqual({ hello: 'world' });
4245
});
4346

@@ -76,7 +79,7 @@ describe('useLazyQuery Hook', () => {
7679
},
7780
];
7881

79-
const { result, waitForNextUpdate } = renderHook(
82+
const { result } = renderHook(
8083
() => useLazyQuery(query),
8184
{
8285
wrapper: ({ children }) => (
@@ -92,12 +95,14 @@ describe('useLazyQuery Hook', () => {
9295
const execute = result.current[0];
9396
setTimeout(() => execute());
9497

95-
await waitForNextUpdate();
96-
expect(result.current[1].loading).toBe(true);
98+
await waitFor(() => {
99+
expect(result.current[1].loading).toBe(true);
100+
}, { interval: 10 });
97101
expect(result.current[1].called).toBe(true);
98102

99-
await waitForNextUpdate();
100-
expect(result.current[1].loading).toBe(false);
103+
await waitFor(() => {
104+
expect(result.current[1].loading).toBe(false);
105+
});
101106
expect(result.current[1].called).toBe(true);
102107
});
103108

@@ -111,7 +116,7 @@ describe('useLazyQuery Hook', () => {
111116
},
112117
];
113118

114-
const { result, waitForNextUpdate } = renderHook(
119+
const { result } = renderHook(
115120
// skip isn’t actually an option on the types
116121
() => useLazyQuery(query, { skip: true } as any),
117122
{
@@ -128,12 +133,14 @@ describe('useLazyQuery Hook', () => {
128133
const execute = result.current[0];
129134
setTimeout(() => execute());
130135

131-
await waitForNextUpdate();
132-
expect(result.current[1].loading).toBe(true);
136+
await waitFor(() => {
137+
expect(result.current[1].loading).toBe(true);
138+
}, { interval: 10 });
133139
expect(result.current[1].called).toBe(true);
134140

135-
await waitForNextUpdate();
136-
expect(result.current[1].loading).toBe(false);
141+
await waitFor(() => {
142+
expect(result.current[1].loading).toBe(false);
143+
});
137144
expect(result.current[1].called).toBe(true);
138145
});
139146

@@ -152,7 +159,7 @@ describe('useLazyQuery Hook', () => {
152159
},
153160
];
154161

155-
const { result, waitForNextUpdate } = renderHook(
162+
const { result } = renderHook(
156163
() => useLazyQuery(query, {
157164
variables: { id: 1 },
158165
}),
@@ -168,12 +175,13 @@ describe('useLazyQuery Hook', () => {
168175
const execute = result.current[0];
169176
setTimeout(() => execute());
170177

171-
await waitForNextUpdate();
178+
await waitFor(() => {
179+
expect(result.current[1].loading).toBe(true);
180+
}, { interval: 10 });
172181

173-
expect(result.current[1].loading).toBe(true);
174-
await waitForNextUpdate();
175-
176-
expect(result.current[1].loading).toBe(false);
182+
await waitFor(() => {
183+
expect(result.current[1].loading).toBe(false);
184+
});
177185
expect(result.current[1].data).toEqual({ hello: 'world 1' });
178186
});
179187

@@ -197,7 +205,7 @@ describe('useLazyQuery Hook', () => {
197205
},
198206
];
199207

200-
const { result, waitForNextUpdate } = renderHook(
208+
const { result } = renderHook(
201209
() => useLazyQuery(query, {
202210
variables: { id: 1 },
203211
}),
@@ -213,11 +221,13 @@ describe('useLazyQuery Hook', () => {
213221
const execute = result.current[0];
214222
setTimeout(() => execute({ variables: { id: 2 } }));
215223

216-
await waitForNextUpdate();
217-
expect(result.current[1].loading).toBe(true);
224+
await waitFor(() => {
225+
expect(result.current[1].loading).toBe(true);
226+
}, { interval: 10 });
218227

219-
await waitForNextUpdate();
220-
expect(result.current[1].loading).toBe(false);
228+
await waitFor(() => {
229+
expect(result.current[1].loading).toBe(false);
230+
});
221231
expect(result.current[1].data).toEqual({ hello: 'world 2' });
222232
});
223233

@@ -236,7 +246,7 @@ describe('useLazyQuery Hook', () => {
236246
},
237247
];
238248

239-
const { result, waitForNextUpdate } = renderHook(
249+
const { result } = renderHook(
240250
() => useLazyQuery(query, {
241251
fetchPolicy: 'network-only',
242252
}),
@@ -253,22 +263,26 @@ describe('useLazyQuery Hook', () => {
253263
const execute = result.current[0];
254264
setTimeout(() => execute());
255265

256-
await waitForNextUpdate();
257-
expect(result.current[1].loading).toBe(true);
266+
await waitFor(() => {
267+
expect(result.current[1].loading).toBe(true);
268+
}, { interval: 10 });
258269

259-
await waitForNextUpdate();
260-
expect(result.current[1].loading).toBe(false);
270+
await waitFor(() => {
271+
expect(result.current[1].loading).toBe(false);
272+
});
261273
expect(result.current[1].data).toEqual({ hello: 'world 1' });
262274

263275
setTimeout(() => execute());
264276

265-
await waitForNextUpdate();
266-
expect(result.current[1].loading).toBe(false);
277+
await waitFor(() => {
278+
expect(result.current[1].loading).toBe(false);
279+
});
267280
expect(result.current[1].data).toEqual({ hello: 'world 1' });
268281

269-
await waitForNextUpdate();
282+
await waitFor(() => {
283+
expect(result.current[1].data).toEqual({ hello: 'world 2' });
284+
});
270285
expect(result.current[1].loading).toBe(false);
271-
expect(result.current[1].data).toEqual({ hello: 'world 2' });
272286
});
273287

274288
it('should persist previous data when a query is re-run', async () => {
@@ -286,7 +300,7 @@ describe('useLazyQuery Hook', () => {
286300
},
287301
];
288302

289-
const { result, waitForNextUpdate } = renderHook(
303+
const { result } = renderHook(
290304
() => useLazyQuery(query, {
291305
notifyOnNetworkStatusChange: true,
292306
}),
@@ -305,26 +319,30 @@ describe('useLazyQuery Hook', () => {
305319
const execute = result.current[0];
306320
setTimeout(() => execute());
307321

308-
await waitForNextUpdate();
309-
expect(result.current[1].loading).toBe(true);
322+
await waitFor(() => {
323+
expect(result.current[1].loading).toBe(true);
324+
}, { interval: 10 });
310325
expect(result.current[1].data).toBe(undefined);
311326
expect(result.current[1].previousData).toBe(undefined);
312327

313-
await waitForNextUpdate();
314-
expect(result.current[1].loading).toBe(false);
328+
await waitFor(() => {
329+
expect(result.current[1].loading).toBe(false);
330+
});
315331
expect(result.current[1].data).toEqual({ hello: 'world 1' });
316332
expect(result.current[1].previousData).toBe(undefined);
317333

318334
const refetch = result.current[1].refetch;
319335
setTimeout(() => refetch!());
320336

321-
await waitForNextUpdate();
322-
expect(result.current[1].loading).toBe(true);
337+
await waitFor(() => {
338+
expect(result.current[1].loading).toBe(true);
339+
}, { interval: 10 });
323340
expect(result.current[1].data).toEqual({ hello: 'world 1' });
324341
expect(result.current[1].previousData).toEqual({ hello: 'world 1' });
325342

326-
await waitForNextUpdate();
327-
expect(result.current[1].loading).toBe(false);
343+
await waitFor(() => {
344+
expect(result.current[1].loading).toBe(false);
345+
});
328346
expect(result.current[1].data).toEqual({ hello: 'world 2' });
329347
expect(result.current[1].previousData).toEqual({ hello: 'world 1' });
330348
});
@@ -351,7 +369,7 @@ describe('useLazyQuery Hook', () => {
351369
<MockedProvider mocks={mocks}>{children}</MockedProvider>
352370
);
353371

354-
const { result, waitForNextUpdate } = renderHook(
372+
const { result } = renderHook(
355373
() => useLazyQuery(query),
356374
{ wrapper },
357375
);
@@ -363,24 +381,33 @@ describe('useLazyQuery Hook', () => {
363381
result.current[1].startPolling(10);
364382
});
365383

366-
await waitForNextUpdate();
367-
expect(result.current[1].loading).toBe(true);
384+
await waitFor(() => {
385+
expect(result.current[1].loading).toBe(true);
386+
}, { interval: 10 });
368387

369-
await waitForNextUpdate();
388+
await waitFor(() => {
389+
expect(result.current[1].data).toEqual({ hello: "world 1" });
390+
}, { interval: 10 });
370391
expect(result.current[1].loading).toBe(false);
371-
expect(result.current[1].data).toEqual({ hello: "world 1" });
372392

373-
await waitForNextUpdate();
393+
await waitFor(() => {
394+
expect(result.current[1].data).toEqual({ hello: "world 2" });
395+
}, { interval: 10 });
374396
expect(result.current[1].loading).toBe(false);
375-
expect(result.current[1].data).toEqual({ hello: "world 2" });
376397

377-
await waitForNextUpdate();
398+
await waitFor(() => {
399+
expect(result.current[1].data).toEqual({ hello: "world 3" });
400+
}, { interval: 10 });
378401

379402
expect(result.current[1].loading).toBe(false);
380-
expect(result.current[1].data).toEqual({ hello: "world 3" });
381403

404+
const previousResult = result.current
382405
result.current[1].stopPolling();
383-
await expect(waitForNextUpdate({ timeout: 20 })).rejects.toThrow('Timed out');
406+
await expect(waitFor(() => {
407+
if (previousResult === result.current) {
408+
throw new Error('data stayed the same. this is intended')
409+
}
410+
})).rejects.toThrow('data stayed the same. this is intended');
384411
});
385412

386413
it('should persist previous data when a query is re-run and variable changes', async () => {
@@ -422,7 +449,7 @@ describe('useLazyQuery Hook', () => {
422449
},
423450
];
424451

425-
const { result, waitForNextUpdate } = renderHook(
452+
const { result } = renderHook(
426453
() => useLazyQuery(CAR_QUERY_BY_ID),
427454
{
428455
wrapper: ({ children }) => (
@@ -439,24 +466,28 @@ describe('useLazyQuery Hook', () => {
439466
const execute = result.current[0];
440467
setTimeout(() => execute({ variables: { id: 1 }}));
441468

442-
await waitForNextUpdate();
443-
expect(result.current[1].loading).toBe(true);
469+
await waitFor(() => {
470+
expect(result.current[1].loading).toBe(true);
471+
}, { interval: 10 });
444472
expect(result.current[1].data).toBe(undefined);
445473
expect(result.current[1].previousData).toBe(undefined);
446474

447-
await waitForNextUpdate();
448-
expect(result.current[1].loading).toBe(false);
475+
await waitFor(() => {
476+
expect(result.current[1].loading).toBe(false);
477+
}, { interval: 10 });
449478
expect(result.current[1].data).toEqual(data1);
450479
expect(result.current[1].previousData).toBe(undefined);
451480

452481
setTimeout(() => execute({ variables: { id: 2 }}));
453-
await waitForNextUpdate();
454-
expect(result.current[1].loading).toBe(true);
482+
await waitFor(() => {
483+
expect(result.current[1].loading).toBe(true);
484+
}, { interval: 10 });
455485
expect(result.current[1].data).toBe(undefined);
456486
expect(result.current[1].previousData).toEqual(data1);
457487

458-
await waitForNextUpdate();
459-
expect(result.current[1].loading).toBe(false);
488+
await waitFor(() => {
489+
expect(result.current[1].loading).toBe(false);
490+
}, { interval: 10 });
460491
expect(result.current[1].data).toEqual(data2);
461492
expect(result.current[1].previousData).toEqual(data1);
462493
});
@@ -480,7 +511,7 @@ describe('useLazyQuery Hook', () => {
480511

481512
cache.writeQuery({ query, data: { hello: 'from cache' }});
482513

483-
const { result, waitForNextUpdate } = renderHook(
514+
const { result } = renderHook(
484515
() => useLazyQuery(query, { fetchPolicy: 'cache-and-network' }),
485516
{
486517
wrapper: ({ children }) => (
@@ -496,14 +527,16 @@ describe('useLazyQuery Hook', () => {
496527
const execute = result.current[0];
497528
setTimeout(() => execute());
498529

499-
await waitForNextUpdate();
530+
await waitFor(() => {
531+
// TODO: FIXME
532+
expect(result.current[1].loading).toBe(true);
533+
}, { interval: 10 });
500534

501-
// TODO: FIXME
502-
expect(result.current[1].loading).toBe(true);
503535
expect(result.current[1].data).toEqual({ hello: 'from cache' });
504536

505-
await waitForNextUpdate();
506-
expect(result.current[1].loading).toBe(false);
537+
await waitFor(() => {
538+
expect(result.current[1].loading).toBe(false);
539+
}, { interval: 10 });
507540
expect(result.current[1].data).toEqual({ hello: 'from link' });
508541
});
509542

@@ -516,7 +549,7 @@ describe('useLazyQuery Hook', () => {
516549
delay: 20,
517550
},
518551
];
519-
const { result, waitForNextUpdate } = renderHook(
552+
const { result } = renderHook(
520553
() => useLazyQuery(query),
521554
{
522555
wrapper: ({ children }) => (
@@ -533,11 +566,13 @@ describe('useLazyQuery Hook', () => {
533566
const mock = jest.fn();
534567
setTimeout(() => mock(execute()));
535568

536-
await waitForNextUpdate();
537-
expect(result.current[1].loading).toBe(true);
569+
await waitFor(() => {
570+
expect(result.current[1].loading).toBe(true);
571+
}, { interval: 10 });
538572

539-
await waitForNextUpdate();
540-
expect(result.current[1].loading).toBe(false);
573+
await waitFor(() => {
574+
expect(result.current[1].loading).toBe(false);
575+
}, { interval: 10 });
541576
expect(result.current[1].data).toEqual({ hello: 'world' });
542577

543578
expect(mock).toHaveBeenCalledTimes(1);

0 commit comments

Comments
 (0)