Skip to content

Commit

Permalink
fix(query-core): Add react-query test
Browse files Browse the repository at this point in the history
  • Loading branch information
ardeora committed Apr 18, 2023
1 parent a5ed15f commit 24ed7f9
Showing 1 changed file with 84 additions and 0 deletions.
84 changes: 84 additions & 0 deletions packages/react-query/src/__tests__/useQuery.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -1797,6 +1797,90 @@ describe('useQuery', () => {
})
})

it('should show placeholderData between multiple pending queries when select fn transform is used', async () => {
const key = queryKey()
const states: UseQueryResult<number>[] = []

function Page() {
const [count, setCount] = React.useState(0)

const state = useQuery({
queryKey: [key, count],
queryFn: async () => {
await sleep(10)
return {
count,
}
},
select(data) {
return data.count
},
placeholderData: keepPreviousData,
})

states.push(state)

return (
<div>
<div>data: {state.data}</div>
<button onClick={() => setCount((prev) => prev + 1)}>setCount</button>
</div>
)
}

const rendered = renderWithClient(queryClient, <Page />)

await waitFor(() => rendered.getByText('data: 0'))

fireEvent.click(rendered.getByRole('button', { name: 'setCount' }))
fireEvent.click(rendered.getByRole('button', { name: 'setCount' }))
fireEvent.click(rendered.getByRole('button', { name: 'setCount' }))

await waitFor(() => rendered.getByText('data: 3'))
// Initial
expect(states[0]).toMatchObject({
data: undefined,
isFetching: true,
isSuccess: false,
isPlaceholderData: false,
})
// Fetched
expect(states[1]).toMatchObject({
data: 0,
isFetching: false,
isSuccess: true,
isPlaceholderData: false,
})
// Set state -> count = 1
expect(states[2]).toMatchObject({
data: 0,
isFetching: true,
isSuccess: true,
isPlaceholderData: true,
})
// Set state -> count = 2
expect(states[3]).toMatchObject({
data: 0,
isFetching: true,
isSuccess: true,
isPlaceholderData: true,
})
// Set state -> count = 3
expect(states[4]).toMatchObject({
data: 0,
isFetching: true,
isSuccess: true,
isPlaceholderData: true,
})
// New data
expect(states[5]).toMatchObject({
data: 3,
isFetching: false,
isSuccess: true,
isPlaceholderData: false,
})
})

it('should transition to error state when placeholderData is set', async () => {
const key = queryKey()
const states: UseQueryResult<number>[] = []
Expand Down

0 comments on commit 24ed7f9

Please sign in to comment.