test: resolving virtual list test issues for ReleasesOverview table

packages/sanity/src/core/releases/tool/detail/__tests__/ReleaseSummary.test.tsx

@@ -1,10 +1,10 @@
 import {act, fireEvent, render, screen, within} from '@testing-library/react'
-import React, {type PropsWithChildren, useState} from 'react'
+import {cloneElement, type FC, type PropsWithChildren, type ReactElement, useState} from 'react'
 import {route, RouterProvider} from 'sanity/router'
 import {beforeEach, describe, expect, it, vi} from 'vitest'
 
 import {getByDataUi} from '../../../../../../test/setup/customQueries'
-import {setupVirtualisedEnvironment} from '../../../../../../test/testUtils/setupVirtualisedEnvironment'
+import {setupVirtualListEnv} from '../../../../../../test/testUtils/setupVirtualListEnv'
 import {createTestProvider} from '../../../../../../test/testUtils/TestProvider'
 import {DefaultPreview} from '../../../../components/previews/general/DefaultPreview'
 import {
@@ -80,12 +80,12 @@ const releaseDocuments: DocumentInRelease[] = [
   },
 ]
 
-const ScrollContainer: React.FC<PropsWithChildren> = ({children}) => {
+const ScrollContainer: FC<PropsWithChildren> = ({children}) => {
   const [ref, setRef] = useState<HTMLDivElement | null>(null)
 
   return (
     <div style={{height: '400px'}} ref={setRef}>
-      {React.cloneElement(children as React.ReactElement, {scrollContainerRef: {current: ref}})}
+      {cloneElement(children as ReactElement, {scrollContainerRef: {current: ref}})}
     </div>
   )
 }
@@ -195,7 +195,7 @@ const renderTest = async (props: Partial<ReleaseSummaryProps>) => {
 }
 
 describe('ReleaseSummary', () => {
-  setupVirtualisedEnvironment()
+  setupVirtualListEnv()
 
   describe('for an active release', () => {
     beforeEach(async () => {

packages/sanity/src/core/releases/tool/overview/__tests__/ReleasesOverview.test.tsx

@@ -1,9 +1,12 @@
 import {act, fireEvent, render, screen, waitFor, within} from '@testing-library/react'
 import {format, set} from 'date-fns'
+import {useState} from 'react'
+// import {usePerspective} from 'sanity'
 import {useRouter} from 'sanity/router'
 import {beforeEach, describe, expect, it, vi} from 'vitest'
 
 import {getByDataUi, queryByDataUi} from '../../../../../../test/setup/customQueries'
+import {setupVirtualListEnv} from '../../../../../../test/testUtils/setupVirtualListEnv'
 import {createTestProvider} from '../../../../../../test/testUtils/TestProvider'
 import {
   getLocalTimeZoneMockReturn,
@@ -77,11 +80,34 @@ vi.mock('../../../../scheduledPublishing/hooks/useTimeZone', async (importOrigin
   default: vi.fn(() => useTimeZoneMockReturn),
 }))
 
+const getWrapper = () =>
+  createTestProvider({
+    resources: [releasesUsEnglishLocaleBundle],
+  })
+
+/**
+ * To resolve issues with size render with Virtual list (as described
+ * here: https://github.com/TanStack/virtual/issues/641), must rerender
+ * ReleasesOverview once the exact height wrapper has mounted
+ */
+const TestComponent = () => {
+  const [hasWrapperRendered, setHasWrapperRendered] = useState<boolean>(false)
+  const updateWrapperRendered = () => setHasWrapperRendered(true)
+
+  return (
+    <div style={{height: '400px'}} ref={updateWrapperRendered}>
+      <ReleasesOverview data-wrapperRendered={hasWrapperRendered?.toString()} />
+    </div>
+  )
+}
+
 describe('ReleasesOverview', () => {
   beforeEach(() => {
     mockUseReleases.mockRestore()
   })
 
+  setupVirtualListEnv()
+
   describe('when loading releases', () => {
     beforeEach(async () => {
       mockUseReleases.mockReturnValue({...useReleasesMockReturn, loading: true})
@@ -90,7 +116,7 @@ describe('ReleasesOverview', () => {
         resources: [releasesUsEnglishLocaleBundle],
       })
 
-      return render(<ReleasesOverview />, {wrapper})
+      return render(<TestComponent />, {wrapper})
     })
 
     it('does not show releases table but shows loader', () => {
@@ -124,7 +150,7 @@ describe('ReleasesOverview', () => {
         resources: [releasesUsEnglishLocaleBundle],
       })
 
-      return render(<ReleasesOverview />, {wrapper})
+      return render(<TestComponent />, {wrapper})
     })
 
     it('shows a message about releases', () => {
@@ -165,8 +191,18 @@ describe('ReleasesOverview', () => {
 
     let activeRender: ReturnType<typeof render>
 
+    const rerender = async () => {
+      activeRender.unmount()
+
+      const wrapper = await getWrapper()
+
+      return render(<TestComponent />, {wrapper})
+    }
+
     beforeEach(async () => {
       mockUseTimeZone.mockRestore()
+      mockGetLocaleTimeZone.mockRestore()
+      mockUsePerspective.mockRestore()
       mockUseReleases.mockReturnValue({
         ...useReleasesMockReturn,
         archivedReleases: [archivedScheduledRelease, publishedASAPRelease],
@@ -184,12 +220,10 @@ describe('ReleasesOverview', () => {
         ),
       })
 
-      const wrapper = await createTestProvider({
-        resources: [releasesUsEnglishLocaleBundle],
-      })
+      const wrapper = await getWrapper()
 
       return act(() => {
-        activeRender = render(<ReleasesOverview />, {wrapper})
+        activeRender = render(<TestComponent />, {wrapper})
       })
     })
 
@@ -249,15 +283,15 @@ describe('ReleasesOverview', () => {
       expect(usePerspectiveMockReturn.setPerspective).toHaveBeenCalledWith('rASAP')
     })
 
-    it('will show pinned release in release list', () => {
+    it('will show pinned release in release list', async () => {
       mockUsePerspective.mockReturnValue({
         ...usePerspectiveMockReturn,
         selectedPerspective: activeASAPRelease,
         selectedReleaseId: 'rASAP',
       })
 
       // re-render to apply the update to global bundle id
-      activeRender.rerender(<ReleasesOverview />)
+      await rerender()
 
       const releaseRows = screen.getAllByTestId('table-row')
       const pinnedReleaseRow = releaseRows[0]
@@ -329,7 +363,7 @@ describe('ReleasesOverview', () => {
         within(getByDataUi(document.body, 'DialogCard')).getByText('Select time zone')
       })
 
-      it('shows dates with timezone abbreviation when it is not the locale', () => {
+      it('shows dates with timezone abbreviation when it is not the locale', async () => {
         mockGetLocaleTimeZone.mockReturnValue({
           abbreviation: 'NST', // Not Sanity Time
           namePretty: 'Not Sanity Time',
@@ -340,7 +374,7 @@ describe('ReleasesOverview', () => {
           value: 'Not Sanity Time',
         })
 
-        activeRender.rerender(<ReleasesOverview />)
+        await rerender()
 
         const scheduledReleaseRow = screen.getAllByTestId('table-row')[2]
 
@@ -355,8 +389,6 @@ describe('ReleasesOverview', () => {
             // spoof a timezone that is 8 hours ahead of UTC
             zoneDateToUtc: vi.fn((date) => set(date, {hours: new Date(date).getHours() - 8})),
           })
-
-          activeRender.rerender(<ReleasesOverview />)
         })
 
         it('shows today as having no releases', () => {

packages/sanity/test/testUtils/setupVirtualisedEnvironment.ts → packages/sanity/test/testUtils/setupVirtualListEnv.ts

@@ -1,6 +1,6 @@
 import {afterEach, beforeEach, vi} from 'vitest'
 
-export const setupVirtualisedEnvironment = (
+export const setupVirtualListEnv = (
   dataTestId?: string,
   rectWidth: number = 350,
   rectHeight: number = 800,