Testing output

[jamespantalones]

What is the recommended way of testing functionality for this library using something like React Testing Library? It seems like the virtualized wrapper renders nothing, so hard to verify. trying to mock @tanstack/react-virtualized now, but that seems a bit hacky

[ronnieeeeee]

Hi James,
Try adding this line.

window.Element.prototype.getBoundingClientRect = vi.fn().mockReturnValue({ height: 1000, width: 1000 });

TanStack/virtual#641

This code works in my environment.

import { render,  screen } from "@testing-library/react";
import { expect, test, vi,  } from "vitest";
import {
  keyColumn,
  textColumn,
} from "react-datasheet-grid";
import { useState } from "react";
import {
  DataSheetGrid,
  checkboxColumn,
} from 'react-datasheet-grid'
import 'react-datasheet-grid/dist/style.css'

// Add this line!
window.Element.prototype.getBoundingClientRect = vi.fn().mockReturnValue({ height: 1000, width: 1000 });

const Example = () => {
  const [data, setData] = useState([
    { active: true, firstName: 'Elon', lastName: 'Musk' },
    { active: false, firstName: 'Jeff', lastName: 'Bezos' },
  ])

  const columns = [
    {
      ...keyColumn('active', checkboxColumn),
      title: 'Active',
    },
    {
      ...keyColumn('firstName', textColumn),
      title: 'First name',
    },
    {
      ...keyColumn('lastName', textColumn),
      title: 'Last name',
    },
  ]

  return (
    <DataSheetGrid
      value={data}
      onChange={(value: any[]) => setData(value)}
      columns={columns}
    />
  )
}

test("", async () => {
  render(<Example />)
  screen.debug()
  expect(screen.getByDisplayValue("Elon"))
});