11import { describe , expect , it , vi } from 'vitest'
22import { fireEvent , render , waitFor } from '@testing-library/react'
33import * as React from 'react'
4- import { QueryCache , keepPreviousData , useInfiniteQuery } from '..'
4+ import {
5+ createRenderStream ,
6+ useTrackRenders ,
7+ } from '@testing-library/react-render-stream'
8+ import {
9+ QueryCache ,
10+ QueryClientProvider ,
11+ keepPreviousData ,
12+ useInfiniteQuery ,
13+ } from '..'
514import {
615 createQueryClient ,
716 queryKey ,
@@ -1227,7 +1236,9 @@ describe('useInfiniteQuery', () => {
12271236
12281237 it ( 'should only refetch the first page when initialData is provided' , async ( ) => {
12291238 const key = queryKey ( )
1230- const states : Array < UseInfiniteQueryResult < InfiniteData < number > > > = [ ]
1239+
1240+ const renderStream =
1241+ createRenderStream < UseInfiniteQueryResult < InfiniteData < number > > > ( )
12311242
12321243 function Page ( ) {
12331244 const state = useInfiniteQuery ( {
@@ -1242,52 +1253,63 @@ describe('useInfiniteQuery', () => {
12421253 notifyOnChangeProps : 'all' ,
12431254 } )
12441255
1245- states . push ( state )
1256+ renderStream . replaceSnapshot ( state )
12461257
1247- const { fetchNextPage } = state
1258+ return (
1259+ < button onClick = { ( ) => state . fetchNextPage ( ) } > fetchNextPage</ button >
1260+ )
1261+ }
12481262
1249- React . useEffect ( ( ) => {
1250- setActTimeout ( ( ) => {
1251- fetchNextPage ( )
1252- } , 20 )
1253- } , [ fetchNextPage ] )
1263+ const rendered = await renderStream . render (
1264+ < QueryClientProvider client = { queryClient } >
1265+ < Page />
1266+ </ QueryClientProvider > ,
1267+ )
12541268
1255- return null
1269+ {
1270+ const { snapshot } = await renderStream . takeRender ( )
1271+ expect ( snapshot ) . toMatchObject ( {
1272+ data : { pages : [ 1 ] } ,
1273+ hasNextPage : true ,
1274+ isFetching : true ,
1275+ isFetchingNextPage : false ,
1276+ isSuccess : true ,
1277+ } )
12561278 }
12571279
1258- renderWithClient ( queryClient , < Page /> )
1280+ {
1281+ const { snapshot } = await renderStream . takeRender ( )
1282+ expect ( snapshot ) . toMatchObject ( {
1283+ data : { pages : [ 1 ] } ,
1284+ hasNextPage : true ,
1285+ isFetching : false ,
1286+ isFetchingNextPage : false ,
1287+ isSuccess : true ,
1288+ } )
1289+ }
12591290
1260- await sleep ( 100 )
1291+ rendered . getByText ( 'fetchNextPage' ) . click ( )
12611292
1262- expect ( states . length ) . toBe ( 4 )
1263- expect ( states [ 0 ] ) . toMatchObject ( {
1264- data : { pages : [ 1 ] } ,
1265- hasNextPage : true ,
1266- isFetching : true ,
1267- isFetchingNextPage : false ,
1268- isSuccess : true ,
1269- } )
1270- expect ( states [ 1 ] ) . toMatchObject ( {
1271- data : { pages : [ 1 ] } ,
1272- hasNextPage : true ,
1273- isFetching : false ,
1274- isFetchingNextPage : false ,
1275- isSuccess : true ,
1276- } )
1277- expect ( states [ 2 ] ) . toMatchObject ( {
1278- data : { pages : [ 1 ] } ,
1279- hasNextPage : true ,
1280- isFetching : true ,
1281- isFetchingNextPage : true ,
1282- isSuccess : true ,
1283- } )
1284- expect ( states [ 3 ] ) . toMatchObject ( {
1285- data : { pages : [ 1 , 2 ] } ,
1286- hasNextPage : true ,
1287- isFetching : false ,
1288- isFetchingNextPage : false ,
1289- isSuccess : true ,
1290- } )
1293+ {
1294+ const { snapshot } = await renderStream . takeRender ( )
1295+ expect ( snapshot ) . toMatchObject ( {
1296+ data : { pages : [ 1 ] } ,
1297+ hasNextPage : true ,
1298+ isFetching : true ,
1299+ isFetchingNextPage : true ,
1300+ isSuccess : true ,
1301+ } )
1302+ }
1303+ {
1304+ const { snapshot } = await renderStream . takeRender ( )
1305+ expect ( snapshot ) . toMatchObject ( {
1306+ data : { pages : [ 1 , 2 ] } ,
1307+ hasNextPage : true ,
1308+ isFetching : false ,
1309+ isFetchingNextPage : false ,
1310+ isSuccess : true ,
1311+ } )
1312+ }
12911313 } )
12921314
12931315 it ( 'should set hasNextPage to false if getNextPageParam returns undefined' , async ( ) => {
@@ -1791,14 +1813,14 @@ describe('useInfiniteQuery', () => {
17911813 it ( 'should work with React.use()' , async ( ) => {
17921814 const key = queryKey ( )
17931815
1794- let pageRenderCount = 0
1795- let suspenseRenderCount = 0
1816+ const renderStream = createRenderStream ( { snapshotDOM : true } )
17961817
17971818 function Loading ( ) {
1798- suspenseRenderCount ++
1819+ useTrackRenders ( )
17991820 return < > loading...</ >
18001821 }
18011822 function MyComponent ( ) {
1823+ useTrackRenders ( )
18021824 const fetchCountRef = React . useRef ( 0 )
18031825 const query = useInfiniteQuery ( {
18041826 queryFn : ( { pageParam } ) =>
@@ -1825,33 +1847,40 @@ describe('useInfiniteQuery', () => {
18251847 )
18261848 }
18271849 function Page ( ) {
1828- pageRenderCount ++
1850+ useTrackRenders ( )
18291851 return (
18301852 < React . Suspense fallback = { < Loading /> } >
18311853 < MyComponent />
18321854 </ React . Suspense >
18331855 )
18341856 }
18351857
1836- const rendered = renderWithClient ( queryClient , < Page /> )
1837- await waitFor ( ( ) => rendered . getByText ( 'loading...' ) )
1858+ const rendered = await renderStream . render (
1859+ < QueryClientProvider client = { queryClient } >
1860+ < Page />
1861+ </ QueryClientProvider > ,
1862+ )
18381863
1839- await waitFor ( ( ) => rendered . getByText ( 'Page: 1' ) )
1840- await waitFor ( ( ) => rendered . getByText ( 'Item: 1' ) )
1864+ {
1865+ const { renderedComponents, withinDOM } = await renderStream . takeRender ( )
1866+ withinDOM ( ) . getByText ( 'loading...' )
1867+ expect ( renderedComponents ) . toEqual ( [ Page , Loading ] )
1868+ }
18411869
1842- expect ( rendered . queryByText ( 'Page: 2' ) ) . toBeNull ( )
1843- expect ( pageRenderCount ) . toBe ( 1 )
1870+ {
1871+ const { renderedComponents, withinDOM } = await renderStream . takeRender ( )
1872+ withinDOM ( ) . getByText ( 'Page: 1' )
1873+ withinDOM ( ) . getByText ( 'Item: 1' )
1874+ expect ( renderedComponents ) . toEqual ( [ MyComponent ] )
1875+ }
18441876
18451877 // click button
1846- fireEvent . click ( rendered . getByRole ( 'button' , { name : 'fetchNextPage' } ) )
1878+ rendered . getByRole ( 'button' , { name : 'fetchNextPage' } ) . click ( )
18471879
1848- await waitFor ( ( ) => {
1849- expect ( rendered . queryByText ( 'Page: 2' ) ) . not . toBeNull ( )
1850- } )
1851-
1852- // Suspense doesn't trigger when fetching next page
1853- expect ( suspenseRenderCount ) . toBe ( 1 )
1854-
1855- expect ( pageRenderCount ) . toBe ( 1 )
1880+ {
1881+ const { renderedComponents, withinDOM } = await renderStream . takeRender ( )
1882+ withinDOM ( ) . getByText ( 'Page: 1' )
1883+ expect ( renderedComponents ) . toEqual ( [ MyComponent ] )
1884+ }
18561885 } )
18571886} )
0 commit comments