Skip to content

Commit bac7f18

Browse files
promer94promer94
committed
skip suspense related test for react canary
1 parent 3ca7c37 commit bac7f18

File tree

8 files changed

+527
-452
lines changed

8 files changed

+527
-452
lines changed

‎.github/workflows/test-canary.yml‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,8 @@ jobs:
1919
run: corepack pnpm upgrade react@canary react-dom@canary use-sync-external-store@canary
2020

2121
- name: Lint and test
22+
env:
23+
TEST_REACT_CANARY: 1
2224
run: |
2325
pnpm clean
2426
pnpm build

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

Lines changed: 43 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,12 @@
11
import { act, fireEvent, screen } from '@testing-library/react'
22
import { Suspense, useState } from 'react'
33
import useSWR from 'swr'
4-
import { createKey, renderWithConfig, nextTick } from './utils'
4+
import {
5+
createKey,
6+
renderWithConfig,
7+
nextTick,
8+
itShouldSkipForReactCanary
9+
} from './utils'
510

611
describe('useSWR - fetcher', () => {
712
// https://github.com/vercel/swr/issues/1131
@@ -67,43 +72,46 @@ describe('useSWR - fetcher', () => {
6772
await screen.findByText('data:bar')
6873
})
6974

70-
it('should use the latest fetcher reference with the suspense mode when the key has been changed', async () => {
71-
const key = createKey()
72-
let fetcher = () => 'foo'
73-
74-
function Page() {
75-
const [prefix, setPrefix] = useState('a')
76-
const { data } = useSWR(prefix + key, fetcher, { suspense: true })
77-
78-
return (
79-
<div>
80-
<p>data:{data}</p>
81-
<button
82-
onClick={() => {
83-
setPrefix('b')
84-
}}
85-
>
86-
mutate
87-
</button>
88-
</div>
75+
itShouldSkipForReactCanary(
76+
'should use the latest fetcher reference with the suspense mode when the key has been changed',
77+
async () => {
78+
const key = createKey()
79+
let fetcher = () => 'foo'
80+
81+
function Page() {
82+
const [prefix, setPrefix] = useState('a')
83+
const { data } = useSWR(prefix + key, fetcher, { suspense: true })
84+
85+
return (
86+
<div>
87+
<p>data:{data}</p>
88+
<button
89+
onClick={() => {
90+
setPrefix('b')
91+
}}
92+
>
93+
mutate
94+
</button>
95+
</div>
96+
)
97+
}
98+
99+
renderWithConfig(
100+
<Suspense fallback="loading">
101+
<Page />
102+
</Suspense>
89103
)
90-
}
91104

92-
renderWithConfig(
93-
<Suspense fallback="loading">
94-
<Page />
95-
</Suspense>
96-
)
97-
98-
await nextTick()
99-
await screen.findByText('data:foo')
105+
await nextTick()
106+
await screen.findByText('data:foo')
100107

101-
// Change the fetcher and make sure the ref is updated.
102-
fetcher = () => 'bar'
103-
fireEvent.click(screen.getByText('mutate'))
104-
// Should fetch with the new fetcher.
105-
await screen.findByText('data:bar')
106-
})
108+
// Change the fetcher and make sure the ref is updated.
109+
fetcher = () => 'bar'
110+
fireEvent.click(screen.getByText('mutate'))
111+
// Should fetch with the new fetcher.
112+
await screen.findByText('data:bar')
113+
}
114+
)
107115

108116
it('should be able to pass falsy values to the fetcher', () => {
109117
const key = createKey()

‎test/use-swr-infinite-preload.test.tsx‎

Lines changed: 37 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,13 @@ import { act, fireEvent, screen } from '@testing-library/react'
22
import { Suspense, useEffect, useState, Profiler } from 'react'
33
import { preload } from 'swr'
44
import useSWRInfinite from 'swr/infinite'
5-
import { createKey, createResponse, renderWithConfig, sleep } from './utils'
5+
import {
6+
createKey,
7+
createResponse,
8+
itShouldSkipForReactCanary,
9+
renderWithConfig,
10+
sleep
11+
} from './utils'
612

713
describe('useSWRInfinite - preload', () => {
814
const getKeyFunction = (key: string) => (index: number) =>
@@ -92,34 +98,37 @@ describe('useSWRInfinite - preload', () => {
9298
expect(fetcher).toHaveBeenCalledTimes(1)
9399
})
94100

95-
it('preload the fetcher function with the suspense mode', async () => {
96-
const key = createKey()
97-
const getKey = getKeyFunction(key)
98-
const fetcher = jest.fn(() => createResponse('foo'))
99-
const onRender = jest.fn()
100-
function Page() {
101-
const { data } = useSWRInfinite(getKey, fetcher, { suspense: true })
102-
return <div>data:{data}</div>
103-
}
104-
105-
preload(getKey(0), fetcher)
106-
expect(fetcher).toHaveBeenCalledTimes(1)
101+
itShouldSkipForReactCanary(
102+
'preload the fetcher function with the suspense mode',
103+
async () => {
104+
const key = createKey()
105+
const getKey = getKeyFunction(key)
106+
const fetcher = jest.fn(() => createResponse('foo'))
107+
const onRender = jest.fn()
108+
function Page() {
109+
const { data } = useSWRInfinite(getKey, fetcher, { suspense: true })
110+
return <div>data:{data}</div>
111+
}
107112

108-
renderWithConfig(
109-
<Suspense
110-
fallback={
111-
<Profiler id={key} onRender={onRender}>
112-
loading
113-
</Profiler>
114-
}
115-
>
116-
<Page />
117-
</Suspense>
118-
)
119-
await screen.findByText('data:foo')
120-
expect(onRender).toHaveBeenCalledTimes(1)
121-
expect(fetcher).toHaveBeenCalledTimes(1)
122-
})
113+
preload(getKey(0), fetcher)
114+
expect(fetcher).toHaveBeenCalledTimes(1)
115+
116+
renderWithConfig(
117+
<Suspense
118+
fallback={
119+
<Profiler id={key} onRender={onRender}>
120+
loading
121+
</Profiler>
122+
}
123+
>
124+
<Page />
125+
</Suspense>
126+
)
127+
await screen.findByText('data:foo')
128+
expect(onRender).toHaveBeenCalledTimes(1)
129+
expect(fetcher).toHaveBeenCalledTimes(1)
130+
}
131+
)
123132

124133
it.skip('avoid suspense waterfall by prefetching the resources', async () => {
125134
const key1 = createKey()

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

Lines changed: 42 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,8 @@ import {
99
nextTick,
1010
renderWithConfig,
1111
renderWithGlobalCache,
12-
executeWithoutBatching
12+
executeWithoutBatching,
13+
itShouldSkipForReactCanary
1314
} from './utils'
1415

1516
describe('useSWRInfinite', () => {
@@ -1159,46 +1160,49 @@ describe('useSWRInfinite', () => {
11591160
})
11601161

11611162
// https://github.com/vercel/swr/issues/1776
1162-
it('should update the getKey reference with the suspense mode', async () => {
1163-
const keyA = 'keyA' + createKey()
1164-
const keyB = 'keyB' + createKey()
1165-
1166-
const apiData = {
1167-
[keyA]: ['A1', 'A2', 'A3'],
1168-
[keyB]: ['B1', 'B2', 'B3']
1169-
}
1163+
itShouldSkipForReactCanary(
1164+
'should update the getKey reference with the suspense mode',
1165+
async () => {
1166+
const keyA = 'keyA' + createKey()
1167+
const keyB = 'keyB' + createKey()
1168+
1169+
const apiData = {
1170+
[keyA]: ['A1', 'A2', 'A3'],
1171+
[keyB]: ['B1', 'B2', 'B3']
1172+
}
11701173

1171-
function Page() {
1172-
const [status, setStatus] = useState('a')
1173-
const { data, setSize } = useSWRInfinite(
1174-
() => (status === 'a' ? keyA : keyB),
1175-
key => createResponse(apiData[key]),
1176-
{ suspense: true }
1177-
)
1178-
return (
1179-
<>
1180-
<div>data: {String(data)}</div>
1181-
<button
1182-
onClick={() => {
1183-
setStatus('b')
1184-
setSize(1)
1185-
}}
1186-
>
1187-
mutate
1188-
</button>
1189-
</>
1174+
function Page() {
1175+
const [status, setStatus] = useState('a')
1176+
const { data, setSize } = useSWRInfinite(
1177+
() => (status === 'a' ? keyA : keyB),
1178+
key => createResponse(apiData[key]),
1179+
{ suspense: true }
1180+
)
1181+
return (
1182+
<>
1183+
<div>data: {String(data)}</div>
1184+
<button
1185+
onClick={() => {
1186+
setStatus('b')
1187+
setSize(1)
1188+
}}
1189+
>
1190+
mutate
1191+
</button>
1192+
</>
1193+
)
1194+
}
1195+
renderWithConfig(
1196+
<Suspense fallback="loading">
1197+
<Page />
1198+
</Suspense>
11901199
)
1191-
}
1192-
renderWithConfig(
1193-
<Suspense fallback="loading">
1194-
<Page />
1195-
</Suspense>
1196-
)
1197-
await screen.findByText('data: A1,A2,A3')
1200+
await screen.findByText('data: A1,A2,A3')
11981201

1199-
fireEvent.click(screen.getByText('mutate'))
1200-
await screen.findByText('data: B1,B2,B3')
1201-
})
1202+
fireEvent.click(screen.getByText('mutate'))
1203+
await screen.findByText('data: B1,B2,B3')
1204+
}
1205+
)
12021206

12031207
it('should revalidate the resource with bound mutate when arguments are passed', async () => {
12041208
const key = createKey()

0 commit comments

Comments
 (0)