|
1 |
| -import { act, render, screen } from '@testing-library/react' |
| 1 | +import { act, fireEvent, render, screen } from '@testing-library/react' |
2 | 2 | import React, { ReactNode, Suspense, useEffect, useState } from 'react'
|
3 | 3 | import useSWR, { mutate } from '../src'
|
4 |
| -import { sleep } from './utils' |
| 4 | +import { createResponse, sleep } from './utils' |
5 | 5 |
|
6 | 6 | class ErrorBoundary extends React.Component<{ fallback: ReactNode }> {
|
7 | 7 | state = { hasError: false }
|
@@ -192,6 +192,35 @@ describe('useSWR - suspense', () => {
|
192 | 192 | expect(renderedResults).toEqual(['suspense-7', 'suspense-8'])
|
193 | 193 | })
|
194 | 194 |
|
| 195 | + it('should render correctly when key changes (but with same response data)', async () => { |
| 196 | + // https://github.com/vercel/swr/issues/1056 |
| 197 | + const renderedResults = [] |
| 198 | + function Section() { |
| 199 | + const [key, setKey] = useState(1) |
| 200 | + const { data } = useSWR(`foo?a=${key}`, () => createResponse('123'), { |
| 201 | + suspense: true |
| 202 | + }) |
| 203 | + if (`${data},${key}` !== renderedResults[renderedResults.length - 1]) { |
| 204 | + renderedResults.push(`${data},${key}`) |
| 205 | + } |
| 206 | + return <div onClick={() => setKey(v => v + 1)}>{`${data},${key}`}</div> |
| 207 | + } |
| 208 | + |
| 209 | + render( |
| 210 | + <Suspense fallback={<div>fallback</div>}> |
| 211 | + <Section /> |
| 212 | + </Suspense> |
| 213 | + ) |
| 214 | + |
| 215 | + await screen.findByText('123,1') |
| 216 | + |
| 217 | + fireEvent.click(screen.getByText('123,1')) |
| 218 | + |
| 219 | + await screen.findByText('123,2') |
| 220 | + |
| 221 | + expect(renderedResults).toEqual(['123,1', '123,2']) |
| 222 | + }) |
| 223 | + |
195 | 224 | it('should render initial data if set', async () => {
|
196 | 225 | const fetcher = jest.fn(() => 'SWR')
|
197 | 226 |
|
|
0 commit comments