Testing

VirtuosoDataTableTestingContext hands the table fixed itemHeight and viewportHeight values so virtualization decisions don’t depend on real layout. Use it in component tests that assert visible rows, loaded ranges, or loading/empty state.

In browser tests (Playwright, real layout), prefer the actual measurements — only reach for the testing context when layout is missing or timing-dependent.

Fixed-size test table

import { localModel, VirtuosoDataTableTestingContext } from '@virtuoso.dev/data-table'
import { DataTable, DataTableCell, DataTableColumn, DataTableColumnHeader } from '@/components/ui/data-table'

const rows = Array.from({ length: 20 }, (_, index) => ({
  id: `SKU-${String(index + 1).padStart(3, '0')}`,
  name: `Product ${index + 1}`,
}))

const model = localModel({ data: rows })

export default function App() {
  return (
    <VirtuosoDataTableTestingContext.Provider value={{ itemHeight: 40, viewportHeight: 240 }}>
      <DataTable className="rounded-xl" model={model} style={{ height: 240 }}>
        <DataTableColumn field="name">
          <DataTableColumnHeader>Product</DataTableColumnHeader>
          <DataTableCell>{({ cellValue }) => String(cellValue)}</DataTableCell>
        </DataTableColumn>
      </DataTable>
    </VirtuosoDataTableTestingContext.Provider>
  )
}

itemHeight is the row height the table assumes; viewportHeight is the visible vertical space. In this example, 240px ÷ 40px = six rows before overscan.

The table still needs a real height in its own layout. Match the provider dimensions and the table height unless the test specifically targets a mismatch.

What to assert

Assert behavior, not exact DOM node counts — overscan, sticky headers, and measurement buffers can render extra rows.

Good browser-test assertions:

• a row near the top is visible before scrolling
• a target row becomes visible after scrollToRow$ or user scrolling
• an empty placeholder is visible when the model has no rows
• a remote loading overlay appears while a request is pending

For component tests, wrap the table once in a shared helper:

function renderTestTable(children: React.ReactNode) {
  return render(
    <VirtuosoDataTableTestingContext.Provider value={{ itemHeight: 40, viewportHeight: 240 }}>
      {children}
    </VirtuosoDataTableTestingContext.Provider>
  )
}

Browser vs. component tests

• Sticky columns, resize handles, drag interactions, custom scroll parents — test in the browser with real layout.
• Visible-row and loading-state assertions — use VirtuosoDataTableTestingContext in component tests.
• Keep data generation simple. Behavior is what you’re validating, not visual polish.