Skip to content

Commit 56abacc

Browse files
trojanowskitrojanowski
authored
chore: update React peer dependency to ^16.8.0 (#78)
BREAKING CHANGE: minimum supported (and tested) version of React is now 16.8.0
1 parent 39f59eb commit 56abacc

File tree

11 files changed

+96
-76
lines changed

11 files changed

+96
-76
lines changed

‎package.json

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,7 @@
7070
"peerDependencies": {
7171
"apollo-client": "*",
7272
"graphql": "*",
73-
"react": "^16.8.0-alpha.1"
73+
"react": "^16.8.0"
7474
},
7575
"dependencies": {
7676
"lodash": "^4.17.11"
@@ -84,8 +84,8 @@
8484
"@types/graphql": "^14.0.3",
8585
"@types/jest": "^23.3.10",
8686
"@types/lodash": "^4.14.119",
87-
"@types/react": "^16.7.17",
88-
"@types/react-dom": "^16.0.11",
87+
"@types/react": "^16.8.2",
88+
"@types/react-dom": "^16.8.0",
8989
"apollo-cache-inmemory": "^1.3.11",
9090
"apollo-client": "^2.4.7",
9191
"apollo-link": "^1.2.4",
@@ -101,9 +101,9 @@
101101
"jest-react-profiler": "^0.1.3",
102102
"lint-staged": "^8.1.0",
103103
"prettier": "^1.15.2",
104-
"react": "16.8.0-alpha.1",
105-
"react-dom": "16.8.0-alpha.1",
106-
"react-testing-library": "^5.3.1",
104+
"react": "16.8.1",
105+
"react-dom": "16.8.1",
106+
"react-testing-library": "^5.5.3",
107107
"rimraf": "^2.6.2",
108108
"standard-version": "^4.4.0",
109109
"tslint": "^5.12.0",

‎src/__tests__/SuspenseSSR-test.tsx

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,12 @@ import { render } from 'react-testing-library';
99
import { ApolloProvider } from '../ApolloContext';
1010
import { unstable_SuspenseSSR as SuspenseSSR } from '../SuspenseSSR';
1111
import createClient from '../__testutils__/createClient';
12-
import flushEffectsAndWait from '../__testutils__/flushEffectsAndWait';
12+
import wait from '../__testutils__/wait';
1313
import { getMarkupFromTree } from '../getMarkupFromTree';
1414
import { QueryHookOptions, useQuery } from '../useQuery';
1515

16+
jest.mock('../internal/actHack');
17+
1618
const USER_QUERY = gql`
1719
{
1820
currentUser {
@@ -88,7 +90,7 @@ describe.each([[true], [false]])('SuspenseSSR with "suspend: %s"', suspend => {
8890
`);
8991
}
9092

91-
await flushEffectsAndWait();
93+
await wait();
9294

9395
expect(container).toMatchInlineSnapshot(`
9496
<div>

‎src/__tests__/getMarkupFromTree-test.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,8 @@ import createClient from '../__testutils__/createClient';
1616
import { getMarkupFromTree } from '../getMarkupFromTree';
1717
import { QueryHookOptions, useQuery } from '../useQuery';
1818

19+
jest.mock('../internal/actHack');
20+
1921
const AUTH_QUERY = gql`
2022
{
2123
isAuthorized

‎src/__tests__/useMutation-test.tsx

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,10 @@ import { cleanup, fireEvent, render } from 'react-testing-library';
55
import { ApolloProvider, useMutation, useQuery } from '..';
66
import createClient from '../__testutils__/createClient';
77
import { SAMPLE_TASKS } from '../__testutils__/data';
8-
import flushEffectsAndWait from '../__testutils__/flushEffectsAndWait';
98
import noop from '../__testutils__/noop';
9+
import wait from '../__testutils__/wait';
10+
11+
jest.mock('../internal/actHack');
1012

1113
const TASKS_MOCKS = [
1214
{
@@ -182,15 +184,15 @@ it('should create a function to perform mutations', async () => {
182184
</ApolloProvider>
183185
);
184186

185-
await flushEffectsAndWait();
187+
await wait();
186188

187189
const firstCheckbox = container.querySelector<HTMLInputElement>(
188190
'input:checked'
189191
)!;
190192
expect(firstCheckbox.checked).toBeTruthy();
191193

192194
fireEvent.click(firstCheckbox);
193-
await flushEffectsAndWait();
195+
await wait();
194196

195197
expect(container.querySelector('input')!.checked).toBeFalsy();
196198
});
@@ -239,11 +241,11 @@ it('should allow to pass options forwarded to the mutation', async () => {
239241
</ApolloProvider>
240242
);
241243

242-
await flushEffectsAndWait();
244+
await wait();
243245

244246
const addTaskButton = getByTestId('add-task-button');
245247
fireEvent.click(addTaskButton);
246-
await flushEffectsAndWait();
248+
await wait();
247249

248250
expect(container.querySelectorAll('li')).toHaveLength(4);
249251
expect(container.querySelectorAll('li')[3].textContent).toBe('Learn Jest');

‎src/__tests__/useQuery-test.tsx

Lines changed: 25 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,10 @@ import { GraphQLError } from 'graphql';
1010
import { ApolloProvider, QueryHookOptions, useQuery } from '..';
1111
import createClient from '../__testutils__/createClient';
1212
import { SAMPLE_TASKS } from '../__testutils__/data';
13-
import flushEffectsAndWait from '../__testutils__/flushEffectsAndWait';
1413
import noop from '../__testutils__/noop';
14+
import wait from '../__testutils__/wait';
15+
16+
jest.mock('../internal/actHack');
1517

1618
const TASKS_QUERY = gql`
1719
query TasksQuery {
@@ -159,7 +161,7 @@ it('should return the query data', async () => {
159161
</div>
160162
`);
161163

162-
await flushEffectsAndWait();
164+
await wait();
163165

164166
expect(container).toMatchInlineSnapshot(`
165167
<div>
@@ -190,7 +192,7 @@ it('should work with suspense disabled', async () => {
190192
</div>
191193
`);
192194

193-
await flushEffectsAndWait();
195+
await wait();
194196

195197
expect(container).toMatchInlineSnapshot(`
196198
<div>
@@ -225,7 +227,7 @@ it('should support query variables', async () => {
225227
</div>
226228
`);
227229

228-
await flushEffectsAndWait();
230+
await wait();
229231

230232
expect(container).toMatchInlineSnapshot(`
231233
<div>
@@ -254,7 +256,7 @@ it('should support updating query variables', async () => {
254256
</div>
255257
`);
256258

257-
await flushEffectsAndWait();
259+
await wait();
258260

259261
expect(container).toMatchInlineSnapshot(`
260262
<div>
@@ -288,8 +290,8 @@ it('should support updating query variables', async () => {
288290
`);
289291

290292
// TODO: It doesn't pass if not invoked twice
291-
await flushEffectsAndWait();
292-
await flushEffectsAndWait();
293+
await wait();
294+
await wait();
293295

294296
expect(container).toMatchInlineSnapshot(`
295297
<div>
@@ -337,7 +339,7 @@ it("shouldn't suspend if the data is already cached", async () => {
337339
/>
338340
);
339341

340-
await flushEffectsAndWait();
342+
await wait();
341343

342344
rerender(
343345
<TasksWrapper
@@ -347,7 +349,7 @@ it("shouldn't suspend if the data is already cached", async () => {
347349
/>
348350
);
349351

350-
await flushEffectsAndWait();
352+
await wait();
351353

352354
rerender(
353355
<TasksWrapper
@@ -410,7 +412,7 @@ it('should allow a query with non-standard fetch policy without suspense', async
410412
</div>
411413
`);
412414

413-
await flushEffectsAndWait();
415+
await wait();
414416

415417
expect(container).toMatchInlineSnapshot(`
416418
<div>
@@ -449,7 +451,7 @@ it("shouldn't make obsolete renders in suspense mode", async () => {
449451

450452
expect(TasksWrapperWithProfiler).toHaveCommittedTimes(1);
451453

452-
await flushEffectsAndWait();
454+
await wait();
453455

454456
expect(container).toMatchInlineSnapshot(`
455457
<div>
@@ -485,7 +487,7 @@ it("shouldn't make obsolete renders in suspense mode", async () => {
485487
</div>
486488
`);
487489

488-
await flushEffectsAndWait();
490+
await wait();
489491

490492
expect(container).toMatchInlineSnapshot(`
491493
<div>
@@ -528,7 +530,7 @@ it("shouldn't make obsolete renders in suspense mode", async () => {
528530
</div>
529531
`);
530532

531-
await flushEffectsAndWait();
533+
await wait();
532534

533535
expect(TasksWrapperWithProfiler).toHaveCommittedTimes(1);
534536
});
@@ -545,7 +547,7 @@ it('skips query in suspense mode', async () => {
545547
</div>
546548
`);
547549

548-
await flushEffectsAndWait();
550+
await wait();
549551

550552
expect(container).toMatchInlineSnapshot(`
551553
<div>
@@ -566,7 +568,7 @@ it('skips query in non-suspense mode', async () => {
566568
</div>
567569
`);
568570

569-
await flushEffectsAndWait();
571+
await wait();
570572

571573
expect(container).toMatchInlineSnapshot(`
572574
<div>
@@ -587,7 +589,7 @@ it('starts skipped query in suspense mode', async () => {
587589
</div>
588590
`);
589591

590-
await flushEffectsAndWait();
592+
await wait();
591593

592594
expect(container).toMatchInlineSnapshot(`
593595
<div>
@@ -604,7 +606,7 @@ it('starts skipped query in suspense mode', async () => {
604606
</div>
605607
`);
606608

607-
await flushEffectsAndWait();
609+
await wait();
608610

609611
expect(container).toMatchInlineSnapshot(`
610612
<div>
@@ -635,7 +637,7 @@ it('starts skipped query in non-suspense mode', async () => {
635637
</div>
636638
`);
637639

638-
await flushEffectsAndWait();
640+
await wait();
639641

640642
expect(container).toMatchInlineSnapshot(`
641643
<div>
@@ -658,7 +660,7 @@ it('starts skipped query in non-suspense mode', async () => {
658660
</div>
659661
`);
660662

661-
await flushEffectsAndWait();
663+
await wait();
662664

663665
expect(container).toMatchInlineSnapshot(`
664666
<div>
@@ -689,7 +691,7 @@ it('handles network error in suspense mode', async () => {
689691
</div>
690692
`);
691693

692-
await flushEffectsAndWait();
694+
await wait();
693695

694696
expect(container).toMatchInlineSnapshot(`
695697
<div>
@@ -709,7 +711,7 @@ it('handles network error in non-suspense mode', async () => {
709711
Loading without suspense
710712
</div>
711713
`);
712-
await flushEffectsAndWait();
714+
await wait();
713715

714716
expect(container).toMatchInlineSnapshot(`
715717
<div>
@@ -730,7 +732,7 @@ it('handles GraphQL error in suspense mode', async () => {
730732
</div>
731733
`);
732734

733-
await flushEffectsAndWait();
735+
await wait();
734736

735737
expect(container).toMatchInlineSnapshot(`
736738
<div>
@@ -751,7 +753,7 @@ it('handles GraphQL error in non-suspense mode', async () => {
751753
</div>
752754
`);
753755

754-
await flushEffectsAndWait();
756+
await wait();
755757

756758
expect(container).toMatchInlineSnapshot(`
757759
<div>

‎src/__testutils__/flushEffectsAndWait.ts

Lines changed: 0 additions & 9 deletions
This file was deleted.

‎src/__testutils__/wait.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
export default function wait(): Promise<void> {
2+
return new Promise(resolve => {
3+
return setTimeout(resolve, 10);
4+
});
5+
}

‎src/internal/__mocks__/actHack.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import { act } from 'react-testing-library';
2+
3+
export default act;

‎src/internal/actHack.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
export default function actHack(callback: (() => void)) {
2+
callback();
3+
}

‎src/useQuery.ts

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import { DocumentNode } from 'graphql';
1414
import { useContext, useEffect, useMemo, useState } from 'react';
1515
import { useApolloClient } from './ApolloContext';
1616
import { SSRContext } from './internal/SSRContext';
17+
import actHack from './internal/actHack';
1718
import {
1819
getCachedObservableQuery,
1920
invalidateCachedObservableQuery,
@@ -145,7 +146,15 @@ export function useQuery<TData = any, TVariables = OperationVariables>(
145146
return;
146147
}
147148

148-
const invalidateCurrentResult = () => setResponseId(x => x + 1);
149+
const invalidateCurrentResult = () => {
150+
// A hack to get rid React warnings during tests. The default
151+
// implementation of `actHack` just invokes the callback immediately.
152+
// In tests, it's replaced with `act` from react-testing-library.
153+
// A better solution welcome.
154+
actHack(() => {
155+
setResponseId(x => x + 1);
156+
});
157+
};
149158
const subscription = observableQuery.subscribe(
150159
invalidateCurrentResult,
151160
invalidateCurrentResult

0 commit comments

Comments
 (0)