@@ -3,6 +3,7 @@ import { addToast } from '@heroui/toast'
33import { fireEvent , screen , waitFor , within } from '@testing-library/react'
44import { mockAboutData } from '@unit/data/mockAboutData'
55import { useRouter } from 'next/navigation'
6+ import { act } from 'react'
67import { render } from 'wrappers/testUtil'
78import About from 'app/about/page'
89import { GET_PROJECT_METADATA , GET_TOP_CONTRIBUTORS } from 'server/queries/projectQueries'
@@ -138,7 +139,9 @@ describe('About Component', () => {
138139 } )
139140
140141 test ( 'renders project history correctly' , async ( ) => {
141- render ( < About /> )
142+ await act ( async ( ) => {
143+ render ( < About /> )
144+ } )
142145
143146 const historySection = screen . getByText ( 'History' ) . closest ( 'div' )
144147 expect ( historySection ) . toBeInTheDocument ( )
@@ -152,7 +155,9 @@ describe('About Component', () => {
152155 } )
153156
154157 test ( 'renders leaders section with three leaders' , async ( ) => {
155- render ( < About /> )
158+ await act ( async ( ) => {
159+ render ( < About /> )
160+ } )
156161
157162 const leadersSection = screen . getByText ( 'Leaders' ) . closest ( 'div' )
158163 expect ( leadersSection ) . toBeInTheDocument ( )
@@ -178,7 +183,9 @@ describe('About Component', () => {
178183 return { loading : true }
179184 } )
180185
181- render ( < About /> )
186+ await act ( async ( ) => {
187+ render ( < About /> )
188+ } )
182189
183190 await waitFor ( ( ) => {
184191 expect ( screen . getByText ( "Error loading arkid15r's data" ) ) . toBeInTheDocument ( )
@@ -188,7 +195,9 @@ describe('About Component', () => {
188195 } )
189196
190197 test ( 'renders top contributors section correctly' , async ( ) => {
191- render ( < About /> )
198+ await act ( async ( ) => {
199+ render ( < About /> )
200+ } )
192201
193202 await waitFor ( ( ) => {
194203 expect ( screen . getByText ( 'Top Contributors' ) ) . toBeInTheDocument ( )
@@ -199,7 +208,9 @@ describe('About Component', () => {
199208 } )
200209
201210 test ( 'toggles contributors list when show more/less is clicked' , async ( ) => {
202- render ( < About /> )
211+ await act ( async ( ) => {
212+ render ( < About /> )
213+ } )
203214 await waitFor ( ( ) => {
204215 expect ( screen . getByText ( 'Contributor 6' ) ) . toBeInTheDocument ( )
205216 expect ( screen . queryByText ( 'Contributor 10' ) ) . not . toBeInTheDocument ( )
@@ -222,7 +233,9 @@ describe('About Component', () => {
222233 } )
223234
224235 test ( 'renders technologies section correctly' , async ( ) => {
225- render ( < About /> )
236+ await act ( async ( ) => {
237+ render ( < About /> )
238+ } )
226239
227240 const technologiesSection = screen . getByText ( 'Technologies & Tools' ) . closest ( 'div' )
228241 expect ( technologiesSection ) . toBeInTheDocument ( )
@@ -256,7 +269,9 @@ describe('About Component', () => {
256269 } )
257270
258271 test ( 'renders roadmap correctly' , async ( ) => {
259- render ( < About /> )
272+ await act ( async ( ) => {
273+ render ( < About /> )
274+ } )
260275
261276 const roadmapSection = screen . getByRole ( 'heading' , { name : 'Roadmap' } ) . closest ( 'div' )
262277 expect ( roadmapSection ) . toBeInTheDocument ( )
@@ -266,15 +281,17 @@ describe('About Component', () => {
266281 . filter ( ( link ) => link . getAttribute ( 'href' ) !== '#roadmap' )
267282
268283 for ( let i = 0 ; i < roadmapData . length ; i ++ ) {
269- const milestone = roadmapData [ i ]
284+ const milestone = [ ... roadmapData ] . sort ( ( a , b ) => ( a . title > b . title ? 1 : - 1 ) ) [ i ]
270285 expect ( screen . getByText ( milestone . title ) ) . toBeInTheDocument ( )
271286 expect ( screen . getByText ( milestone . body ) ) . toBeInTheDocument ( )
272287 expect ( links [ i ] . getAttribute ( 'href' ) ) . toBe ( milestone . url )
273288 }
274289 } )
275290
276291 test ( 'renders project stats cards correctly' , async ( ) => {
277- render ( < About /> )
292+ await act ( async ( ) => {
293+ render ( < About /> )
294+ } )
278295
279296 await waitFor ( ( ) => {
280297 expect ( screen . getByText ( 'Contributors' ) ) . toBeInTheDocument ( )
@@ -298,7 +315,9 @@ describe('About Component', () => {
298315 return { loading : true }
299316 } )
300317
301- render ( < About /> )
318+ await act ( async ( ) => {
319+ render ( < About /> )
320+ } )
302321
303322 await waitFor ( ( ) => {
304323 expect ( screen . getByText ( 'Loading arkid15r...' ) ) . toBeInTheDocument ( )
@@ -327,7 +346,9 @@ describe('About Component', () => {
327346 return { loading : true }
328347 } )
329348
330- render ( < About /> )
349+ await act ( async ( ) => {
350+ render ( < About /> )
351+ } )
331352
332353 await waitFor ( ( ) => {
333354 expect ( screen . getByText ( 'No data available for arkid15r' ) ) . toBeInTheDocument ( )
@@ -352,7 +373,9 @@ describe('About Component', () => {
352373 return { loading : true }
353374 } )
354375
355- render ( < About /> )
376+ await act ( async ( ) => {
377+ render ( < About /> )
378+ } )
356379
357380 await waitFor ( ( ) => {
358381 expect ( screen . getByText ( 'Data not found' ) ) . toBeInTheDocument ( )
@@ -374,7 +397,9 @@ describe('About Component', () => {
374397 return { loading : true }
375398 } )
376399
377- render ( < About /> )
400+ await act ( async ( ) => {
401+ render ( < About /> )
402+ } )
378403
379404 await waitFor ( ( ) => {
380405 expect ( screen . getByText ( 'No data available for arkid15r' ) ) . toBeInTheDocument ( )
@@ -384,7 +409,9 @@ describe('About Component', () => {
384409 } )
385410
386411 test ( 'navigates to user details on View Profile button click' , async ( ) => {
387- render ( < About /> )
412+ await act ( async ( ) => {
413+ render ( < About /> )
414+ } )
388415
389416 await waitFor ( ( ) => {
390417 const viewDetailsButtons = screen . getAllByText ( 'View Profile' )
@@ -420,7 +447,9 @@ describe('About Component', () => {
420447 return { loading : true }
421448 } )
422449
423- render ( < About /> )
450+ await act ( async ( ) => {
451+ render ( < About /> )
452+ } )
424453
425454 await waitFor ( ( ) => {
426455 expect ( screen . getByText ( 'arkid15r' ) ) . toBeInTheDocument ( )
@@ -443,7 +472,9 @@ describe('About Component', () => {
443472 return { loading : true }
444473 } )
445474
446- render ( < About /> )
475+ await act ( async ( ) => {
476+ render ( < About /> )
477+ } )
447478
448479 await waitFor ( ( ) => {
449480 expect ( screen . getByText ( / N o d a t a a v a i l a b l e f o r a r k i d 1 5 r / i) ) . toBeInTheDocument ( )
@@ -462,7 +493,9 @@ describe('About Component', () => {
462493 }
463494 } )
464495
465- render ( < About /> )
496+ await act ( async ( ) => {
497+ render ( < About /> )
498+ } )
466499 await waitFor ( ( ) => {
467500 // Look for the element with alt text "Loading indicator"
468501 const spinner = screen . getAllByAltText ( 'Loading indicator' )
@@ -481,7 +514,9 @@ describe('About Component', () => {
481514 error : null ,
482515 }
483516 } )
484- render ( < About /> )
517+ await act ( async ( ) => {
518+ render ( < About /> )
519+ } )
485520 await waitFor ( ( ) => {
486521 expect ( screen . getByText ( / D a t a n o t f o u n d / ) ) . toBeInTheDocument ( )
487522 expect (
@@ -501,7 +536,9 @@ describe('About Component', () => {
501536 error : null ,
502537 }
503538 } )
504- render ( < About /> )
539+ await act ( async ( ) => {
540+ render ( < About /> )
541+ } )
505542 await waitFor ( ( ) => {
506543 expect ( addToast ) . toHaveBeenCalledWith ( {
507544 color : 'danger' ,
@@ -525,7 +562,9 @@ describe('About Component', () => {
525562 error : null ,
526563 }
527564 } )
528- render ( < About /> )
565+ await act ( async ( ) => {
566+ render ( < About /> )
567+ } )
529568 await waitFor ( ( ) => {
530569 expect ( addToast ) . toHaveBeenCalledWith ( {
531570 color : 'danger' ,
0 commit comments