Hard Mode Virtualized List
Hard Mode
Hard Mode · Virtualized UIs

Virtualized List

The list below claims 10,000 employees; the DOM holds about fifteen at any moment. Windowed rendering is why getByText('Employee #9,999') times out even though the row "exists", and why count() lies about totals. Learn to scroll, jump, and assert what virtualization actually renders. Warm up on the basic scroll widget if scrolling itself is new.

10,000Rows claimed
~15Rows in the DOM
44pxFixed row height
200Feed cap

Windowed employee list

Only the visible slice is mounted. Scroll the viewport, or jump straight to a row.

DOM rows: 0 · total: 10000

Infinite-scroll feed

Twenty stories per batch, next batch loads when the sentinel becomes visible, hard end at 200.

Loaded: 0 of 200
Loading more...

Drills

  1. Prove the lie. Assert the visible total says 10000 while getByTestId('virtual-row') counts under 30. That gap is virtualization.
  2. The timeout lesson. Write getByText('Employee #9,999') with a 2s timeout and watch it fail without scrolling. Explain why in a comment.
  3. Jump and assert. Use the jump box to reach row 7777 and assert its salary cell. Then do it again without the jump box: set scrollTop via evaluate using the 44px row height.
  4. Scroll-until-found. Wrap "scroll down one page and look for the row" in expect(async () => ...).toPass() to land on row 500 from the top.
  5. Feed the feed. Scroll the feed until story 60 is visible and assert the counter reads at least 60. Then reach the end and assert the "You are all caught up" state replaces the sentinel.