Skip to content

Commit 822f07d

Browse files
koba04koba04
authored
refactor: use TestSWRConfig for error-test (vercel#1404)
1 parent b819c25 commit 822f07d

File tree

2 files changed

+98
-34
lines changed

2 files changed

+98
-34
lines changed

‎test/use-swr-error.test.tsx‎

Lines changed: 83 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,23 @@
11
import { act, fireEvent, render, screen } from '@testing-library/react'
22
import React, { useEffect, useState } from 'react'
3-
import useSWR, { mutate } from 'swr'
4-
import { sleep, createResponse } from './utils'
3+
import useSWR from 'swr'
4+
import { sleep, createResponse, TestSWRConfig } from './utils'
55

66
describe('useSWR - error', () => {
77
it('should handle errors', async () => {
88
function Page() {
9-
const { data, error } = useSWR('error-1', () =>
9+
const { data, error } = useSWR('error-key', () =>
1010
createResponse(new Error('error!'))
1111
)
1212
if (error) return <div>{error.message}</div>
1313
return <div>hello, {data}</div>
1414
}
1515

16-
render(<Page />)
16+
render(
17+
<TestSWRConfig>
18+
<Page />
19+
</TestSWRConfig>
20+
)
1721
screen.getByText('hello,')
1822

1923
// mount
@@ -24,27 +28,31 @@ describe('useSWR - error', () => {
2428
let erroredSWR = null
2529
function Page() {
2630
const { data, error } = useSWR(
27-
'error-2',
31+
'error-key',
2832
() => createResponse(new Error('error!')),
2933
{ onError: (_, key) => (erroredSWR = key) }
3034
)
3135
if (error) return <div>{error.message}</div>
3236
return <div>hello, {data}</div>
3337
}
3438

35-
render(<Page />)
39+
render(
40+
<TestSWRConfig>
41+
<Page />
42+
</TestSWRConfig>
43+
)
3644
screen.getByText('hello,')
3745

3846
// mount
3947
await screen.findByText('error!')
40-
expect(erroredSWR).toEqual('error-2')
48+
expect(erroredSWR).toEqual('error-key')
4149
})
4250

4351
it('should trigger error retry', async () => {
4452
let count = 0
4553
function Page() {
4654
const { data, error } = useSWR(
47-
'error-3',
55+
'error-key',
4856
() => createResponse(new Error('error: ' + count++), { delay: 100 }),
4957
{
5058
onErrorRetry: (_, __, ___, revalidate, revalidateOpts) => {
@@ -57,7 +65,11 @@ describe('useSWR - error', () => {
5765
return <div>hello, {data}</div>
5866
}
5967

60-
render(<Page />)
68+
render(
69+
<TestSWRConfig>
70+
<Page />
71+
</TestSWRConfig>
72+
)
6173
screen.getByText('hello,')
6274

6375
// mount
@@ -75,7 +87,7 @@ describe('useSWR - error', () => {
7587
success = null
7688
function Page() {
7789
const { data } = useSWR(
78-
'error-4',
90+
'error-key',
7991
() => createResponse('SWR', { delay: 200 }),
8092
{
8193
onLoadingSlow: key => (loadingSlow = key),
@@ -86,23 +98,27 @@ describe('useSWR - error', () => {
8698
return <div>hello, {data}</div>
8799
}
88100

89-
render(<Page />)
101+
render(
102+
<TestSWRConfig>
103+
<Page />
104+
</TestSWRConfig>
105+
)
90106
screen.getByText('hello,')
91107
expect(loadingSlow).toEqual(null)
92108

93109
await act(() => sleep(150)) // trigger onLoadingSlow event
94-
expect(loadingSlow).toEqual('error-4')
110+
expect(loadingSlow).toEqual('error-key')
95111
expect(success).toEqual(null)
96112

97113
await act(() => sleep(150)) // finish the request
98-
expect(success).toEqual('error-4')
114+
expect(success).toEqual('error-key')
99115
screen.getByText('hello, SWR')
100116
})
101117
it('should trigger limited error retries if errorRetryCount exists', async () => {
102118
let count = 0
103119
function Page() {
104120
const { data, error } = useSWR(
105-
'error-5',
121+
'error-key',
106122
() => createResponse(new Error('error: ' + count++)),
107123
{
108124
errorRetryCount: 1,
@@ -114,7 +130,11 @@ describe('useSWR - error', () => {
114130
return <div>hello, {data}</div>
115131
}
116132

117-
render(<Page />)
133+
render(
134+
<TestSWRConfig>
135+
<Page />
136+
</TestSWRConfig>
137+
)
118138
screen.getByText('hello,')
119139

120140
// mount
@@ -130,7 +150,7 @@ describe('useSWR - error', () => {
130150
let loadingSlow = null,
131151
success = null
132152
function Page() {
133-
const { data } = useSWR('error-6', () => createResponse('SWR'), {
153+
const { data } = useSWR('error-key', () => createResponse('SWR'), {
134154
onLoadingSlow: key => {
135155
loadingSlow = key
136156
},
@@ -151,7 +171,11 @@ describe('useSWR - error', () => {
151171
)
152172
}
153173

154-
render(<App />)
174+
render(
175+
<TestSWRConfig>
176+
<App />
177+
</TestSWRConfig>
178+
)
155179
screen.getByText('hello,')
156180
expect(loadingSlow).toEqual(null)
157181
expect(success).toEqual(null)
@@ -167,7 +191,7 @@ describe('useSWR - error', () => {
167191
failed = null
168192
function Page() {
169193
const { data } = useSWR(
170-
'error-7',
194+
'error-key',
171195
() => createResponse(new Error('error!')),
172196
{
173197
onError: (_, key) => {
@@ -191,7 +215,11 @@ describe('useSWR - error', () => {
191215
)
192216
}
193217

194-
render(<App />)
218+
render(
219+
<TestSWRConfig>
220+
<App />
221+
</TestSWRConfig>
222+
)
195223
screen.getByText('hello,')
196224
expect(retry).toEqual(null)
197225
expect(failed).toEqual(null)
@@ -206,7 +234,7 @@ describe('useSWR - error', () => {
206234
let count = 0
207235
function Page() {
208236
const { data, error } = useSWR(
209-
'error-8',
237+
'error-key',
210238
() => createResponse(new Error('error: ' + count++)),
211239
{
212240
errorRetryCount: 0,
@@ -218,7 +246,11 @@ describe('useSWR - error', () => {
218246
return <div>hello, {data}</div>
219247
}
220248

221-
render(<Page />)
249+
render(
250+
<TestSWRConfig>
251+
<Page />
252+
</TestSWRConfig>
253+
)
222254
screen.getByText('hello,')
223255

224256
// mount
@@ -230,34 +262,44 @@ describe('useSWR - error', () => {
230262

231263
it('should not clear error during revalidating until fetcher is finished successfully', async () => {
232264
const errors = []
233-
const key = 'error-9'
265+
const key = 'error-key'
266+
let mutate
234267
function Page() {
235-
const { error } = useSWR(key, () => createResponse(new Error('error')), {
236-
errorRetryCount: 0,
237-
errorRetryInterval: 0,
238-
dedupingInterval: 0
239-
})
268+
const { error, mutate: _mutate } = useSWR(
269+
key,
270+
() => createResponse(new Error('error')),
271+
{
272+
errorRetryCount: 0,
273+
errorRetryInterval: 0,
274+
dedupingInterval: 0
275+
}
276+
)
277+
mutate = _mutate
240278
useEffect(() => {
241279
errors.push(error ? error.message : null)
242280
}, [error])
243281

244282
return <div>hello, {error ? error.message : null}</div>
245283
}
246284

247-
render(<Page />)
285+
render(
286+
<TestSWRConfig>
287+
<Page />
288+
</TestSWRConfig>
289+
)
248290

249291
// mount
250292
await screen.findByText('hello, error')
251293

252-
await act(() => mutate(key, undefined, true))
294+
await act(() => mutate(undefined, true))
253295
// initial -> first error -> mutate -> receive another error
254296
// error won't be cleared during revalidation
255297
expect(errors).toEqual([null, 'error', 'error'])
256298
})
257299

258300
it('should reset isValidating when an error occured synchronously', async () => {
259301
function Page() {
260-
const { error, isValidating } = useSWR('error-10', () => {
302+
const { error, isValidating } = useSWR('error-key', () => {
261303
throw new Error('error!')
262304
})
263305
if (error)
@@ -269,13 +311,17 @@ describe('useSWR - error', () => {
269311
return <div>hello,{isValidating.toString()}</div>
270312
}
271313

272-
render(<Page />)
314+
render(
315+
<TestSWRConfig>
316+
<Page />
317+
</TestSWRConfig>
318+
)
273319
screen.getByText('error!,false')
274320
})
275321

276322
it('should reset isValidating when an error occured asynchronously', async () => {
277323
function Page() {
278-
const { error, isValidating } = useSWR('error-11', () =>
324+
const { error, isValidating } = useSWR('error-key', () =>
279325
createResponse(new Error('error!'))
280326
)
281327
if (error)
@@ -287,7 +333,11 @@ describe('useSWR - error', () => {
287333
return <div>hello,{isValidating.toString()}</div>
288334
}
289335

290-
render(<Page />)
336+
render(
337+
<TestSWRConfig>
338+
<Page />
339+
</TestSWRConfig>
340+
)
291341
screen.getByText('hello,true')
292342

293343
await screen.findByText('error!,false')

test/utils.ts renamed to test/utils.tsx

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
11
import { act, fireEvent } from '@testing-library/react'
2+
import React from 'react'
3+
import { SWRConfiguration, SWRConfig } from 'swr'
24

35
export function sleep(time: number) {
46
return new Promise(resolve => setTimeout(resolve, time))
57
}
68

7-
export const createResponse = <T = any>(
9+
export const createResponse = <T extends any>(
810
response: T,
911
{ delay } = { delay: 10 }
1012
): Promise<T> =>
@@ -26,3 +28,15 @@ export const focusOn = (element: any) =>
2628
})
2729

2830
export const createKey = () => 'swr-key-' + ~~(Math.random() * 1e7)
31+
32+
export const TestSWRConfig = ({
33+
children,
34+
value
35+
}: {
36+
children: React.ReactNode
37+
value?: SWRConfiguration
38+
}) => (
39+
<SWRConfig value={{ provider: () => new Map(), ...value }}>
40+
{children}
41+
</SWRConfig>
42+
)

0 commit comments

Comments
 (0)