Skip to content

Commit f9df3b0

Browse files
markeriksonmarkerikson
committed
Separate out useInfiniteQuery tests
1 parent 9937291 commit f9df3b0

File tree

1 file changed

+118
-108
lines changed

1 file changed

+118
-108
lines changed

‎packages/toolkit/src/query/tests/buildHooks.test.tsx‎

Lines changed: 118 additions & 108 deletions
Original file line numberDiff line numberDiff line change
@@ -919,114 +919,6 @@ describe('hooks tests', () => {
919919
expect(res.data!.amount).toBeGreaterThan(originalAmount)
920920
})
921921

922-
test('Infinite Query Hook getNextPage Trigger', async () => {
923-
server.use(
924-
http.get('https://example.com/listItems', ({ request }) => {
925-
const url = new URL(request.url)
926-
const pageString = url.searchParams.get('page')
927-
const pageNum = parseInt(pageString || '0')
928-
929-
const results = { title: `page ${pageNum}`, info: 'more name' }
930-
return HttpResponse.json(results)
931-
}),
932-
)
933-
934-
type Pokemon = {
935-
id: string
936-
name: string
937-
}
938-
939-
const pokemonApi = createApi({
940-
baseQuery: fetchBaseQuery({ baseUrl: 'https://pokeapi.co/api/v2/' }),
941-
endpoints: (builder) => ({
942-
getInfinitePokemon: builder.infiniteQuery<Pokemon[], string, number>({
943-
infiniteQueryOptions: {
944-
initialPageParam: 0,
945-
getNextPageParam: (
946-
lastPage,
947-
allPages,
948-
lastPageParam,
949-
allPageParams,
950-
) => lastPageParam + 1,
951-
},
952-
query(pageParam) {
953-
return `https://example.com/listItems?page=${pageParam}`
954-
},
955-
}),
956-
}),
957-
})
958-
959-
const storeRef = setupApiStore(pokemonApi, undefined, {
960-
withoutTestLifecycles: true,
961-
})
962-
963-
const checkNumQueries = (count: number) => {
964-
const cacheEntries = Object.keys(storeRef.store.getState().api.queries)
965-
const queries = cacheEntries.length
966-
console.log('queries', queries, storeRef.store.getState().api.queries)
967-
968-
expect(queries).toBe(count)
969-
}
970-
971-
function PokemonList() {
972-
const { data, isFetching, isUninitialized, fetchNextPage } =
973-
pokemonApi.endpoints.getInfinitePokemon.useInfiniteQuery('a', {
974-
initialPageParam: 0,
975-
getNextPageParam: (
976-
lastPage,
977-
allPages,
978-
// Page param type should be `number`
979-
lastPageParam,
980-
allPageParams,
981-
) => lastPageParam + 1,
982-
})
983-
984-
const handleClick = async () => {
985-
const promise = fetchNextPage()
986-
const res = await promise
987-
}
988-
989-
return (
990-
<div>
991-
<div data-testid="isUninitialized">{String(isUninitialized)}</div>
992-
<div data-testid="isFetching">{String(isFetching)}</div>
993-
<div data-testid="data">
994-
{data?.pages.map((page: any, i: number | null | undefined) => (
995-
<div key={i}>{JSON.stringify(page)}</div>
996-
))}
997-
</div>
998-
<button data-testid="nextPage" onClick={() => handleClick()}>
999-
nextPage
1000-
</button>
1001-
</div>
1002-
)
1003-
}
1004-
1005-
render(<PokemonList />, { wrapper: storeRef.wrapper })
1006-
expect(screen.getByTestId('data').textContent).toBe('')
1007-
checkNumQueries(1)
1008-
1009-
await waitFor(() =>
1010-
expect(screen.getByTestId('isUninitialized').textContent).toBe('false'),
1011-
)
1012-
await waitFor(() =>
1013-
expect(screen.getByTestId('isFetching').textContent).toBe('false'),
1014-
)
1015-
act(() => {
1016-
fireEvent.click(screen.getByTestId('nextPage'))
1017-
})
1018-
await waitFor(() =>
1019-
expect(screen.getByTestId('isFetching').textContent).toBe('false'),
1020-
)
1021-
checkNumQueries(1)
1022-
await waitFor(() =>
1023-
expect(screen.getByTestId('isFetching').textContent).toBe('false'),
1024-
)
1025-
expect(screen.getByTestId('data').textContent).toBe(
1026-
'{"title":"page 0","info":"more name"}{"title":"page 1","info":"more name"}',
1027-
)
1028-
})
1029-
1030922
// See https://github.com/reduxjs/redux-toolkit/issues/4267 - Memory leak in useQuery rapid query arg changes
1031923
test('Hook subscriptions are properly cleaned up when query is fulfilled/rejected', async () => {
1032924
// This is imported already, but it seems to be causing issues with the test on certain matrixes
@@ -1783,6 +1675,124 @@ describe('hooks tests', () => {
17831675
})
17841676
})
17851677

1678+
describe('useInfiniteQuery', () => {
1679+
type Pokemon = {
1680+
id: string
1681+
name: string
1682+
}
1683+
1684+
const pokemonApi = createApi({
1685+
baseQuery: fetchBaseQuery({ baseUrl: 'https://pokeapi.co/api/v2/' }),
1686+
endpoints: (builder) => ({
1687+
getInfinitePokemon: builder.infiniteQuery<Pokemon, string, number>({
1688+
infiniteQueryOptions: {
1689+
initialPageParam: 0,
1690+
getNextPageParam: (
1691+
lastPage,
1692+
allPages,
1693+
lastPageParam,
1694+
allPageParams,
1695+
) => lastPageParam + 1,
1696+
},
1697+
query(pageParam) {
1698+
return `https://example.com/listItems?page=${pageParam}`
1699+
},
1700+
}),
1701+
}),
1702+
})
1703+
1704+
function PokemonList({
1705+
initialPageParam = 0,
1706+
}: {
1707+
initialPageParam?: number
1708+
}) {
1709+
const { data, isFetching, isUninitialized, fetchNextPage } =
1710+
pokemonApi.endpoints.getInfinitePokemon.useInfiniteQuery('a', {
1711+
initialPageParam,
1712+
getNextPageParam: (
1713+
lastPage,
1714+
allPages,
1715+
// Page param type should be `number`
1716+
lastPageParam,
1717+
allPageParams,
1718+
) => lastPageParam + 1,
1719+
})
1720+
1721+
const handleClick = async () => {
1722+
const promise = fetchNextPage()
1723+
const res = await promise
1724+
}
1725+
1726+
return (
1727+
<div>
1728+
<div data-testid="isUninitialized">{String(isUninitialized)}</div>
1729+
<div data-testid="isFetching">{String(isFetching)}</div>
1730+
<div data-testid="data">
1731+
{data?.pages.map((page: any, i: number | null | undefined) => (
1732+
<div key={i}>{JSON.stringify(page)}</div>
1733+
))}
1734+
</div>
1735+
<button data-testid="nextPage" onClick={() => handleClick()}>
1736+
nextPage
1737+
</button>
1738+
</div>
1739+
)
1740+
}
1741+
1742+
server.use(
1743+
http.get('https://example.com/listItems', ({ request }) => {
1744+
const url = new URL(request.url)
1745+
const pageString = url.searchParams.get('page')
1746+
const pageNum = parseInt(pageString || '0')
1747+
1748+
const results: Pokemon = {
1749+
id: `${pageNum}`,
1750+
name: `Pokemon ${pageNum}`,
1751+
}
1752+
1753+
return HttpResponse.json(results)
1754+
}),
1755+
)
1756+
1757+
test('useInfiniteQuery fetchNextPage Trigger', async () => {
1758+
const storeRef = setupApiStore(pokemonApi, undefined, {
1759+
withoutTestLifecycles: true,
1760+
})
1761+
1762+
const checkNumQueries = (count: number) => {
1763+
const cacheEntries = Object.keys(storeRef.store.getState().api.queries)
1764+
const queries = cacheEntries.length
1765+
console.log('queries', queries, storeRef.store.getState().api.queries)
1766+
1767+
expect(queries).toBe(count)
1768+
}
1769+
1770+
render(<PokemonList />, { wrapper: storeRef.wrapper })
1771+
expect(screen.getByTestId('data').textContent).toBe('')
1772+
checkNumQueries(1)
1773+
1774+
await waitFor(() =>
1775+
expect(screen.getByTestId('isUninitialized').textContent).toBe('false'),
1776+
)
1777+
await waitFor(() =>
1778+
expect(screen.getByTestId('isFetching').textContent).toBe('false'),
1779+
)
1780+
act(() => {
1781+
fireEvent.click(screen.getByTestId('nextPage'))
1782+
})
1783+
await waitFor(() =>
1784+
expect(screen.getByTestId('isFetching').textContent).toBe('false'),
1785+
)
1786+
checkNumQueries(1)
1787+
await waitFor(() =>
1788+
expect(screen.getByTestId('isFetching').textContent).toBe('false'),
1789+
)
1790+
expect(screen.getByTestId('data').textContent).toBe(
1791+
'{"id":"0","name":"Pokemon 0"}{"id":"1","name":"Pokemon 1"}',
1792+
)
1793+
})
1794+
})
1795+
17861796
describe('useMutation', () => {
17871797
test('useMutation hook sets and unsets the isLoading flag when running', async () => {
17881798
function User() {

0 commit comments

Comments
 (0)