I want to write tests for a component that uses glide-data-grid, in a project using vitest.
As a proof of concept, I'm creating a test that only renders a basic example grid, adapting the testing strategy I see in glide-data-grid/packages/core/test.
I'm running into an issue where the grid itself does not seem to be rendering, though the wrapper divs and another empty canvas element does.
I'm using vitest-mock-canvas for canvas support, which seems to work fine for other simple canvas tests (and the empty canvas element does seem to render without errors). I'm also using the wrapper option to render a "portal" div.
Just wondering if there are any suggestions for what I could try to make this work. Perhaps something I'm missing that made this strategy work for the internal library tests? Thanks.
Test code:
import {
DataEditor,
GridCell,
GridCellKind,
GridColumn,
Item,
} from '@glideapps/glide-data-grid';
import { act, render, screen } from '@testing-library/react';
function prep(resetTimers: boolean = true) {
const scroller = document.getElementsByClassName('dvn-scroller').item(0);
if (scroller !== null) {
vi.spyOn(scroller, 'clientWidth', 'get').mockImplementation(() => 1000);
vi.spyOn(scroller, 'offsetWidth' as any, 'get').mockImplementation(() => 1000);
vi.spyOn(scroller, 'clientHeight', 'get').mockImplementation(() => 1000);
vi.spyOn(scroller, 'offsetHeight' as any, 'get').mockImplementation(() => 1000);
}
act(() => {
vi.runAllTimers();
});
if (resetTimers) {
vi.useRealTimers();
}
return scroller;
}
const Context: React.FC = (p) => {
return (
<>
{p.children}
<div id="portal" />
</>
);
};
const setup = () => {
const data = [
{
firstName: 'John',
lastName: 'Doe',
},
{
firstName: 'Maria',
lastName: 'Garcia',
},
{
firstName: 'Nancy',
lastName: 'Jones',
},
{
firstName: 'James',
lastName: 'Smith',
},
];
// Grid columns may also provide icon, overlayIcon, menu, style, and theme overrides
const columns: GridColumn[] = [
{ title: 'First Name', width: 100 },
{ title: 'Last Name', width: 100 },
];
// If fetching data is slow you can use the DataEditor ref to send updates for cells
// once data is loaded.
function getData([col, row]: Item): GridCell {
const person = data[row];
if (col === 0) {
return {
allowOverlay: false,
data: person.firstName,
displayData: person.firstName,
kind: GridCellKind.Text,
};
} else if (col === 1) {
return {
allowOverlay: false,
data: person.lastName,
displayData: person.lastName,
kind: GridCellKind.Text,
};
} else {
throw new Error();
}
}
render(
<DataEditor columns={columns} getCellContent={getData} rows={data.length} />,
{ wrapper: Context },
);
};
describe('grid', () => {
it('should render', () => {
vi.useFakeTimers();
setup();
prep();
screen.getByTestId('data-grid-canvas');
});
});
I want to write tests for a component that uses glide-data-grid, in a project using vitest.
As a proof of concept, I'm creating a test that only renders a basic example grid, adapting the testing strategy I see in
glide-data-grid/packages/core/test.I'm running into an issue where the grid itself does not seem to be rendering, though the wrapper divs and another empty canvas element does.
I'm using
vitest-mock-canvasfor canvas support, which seems to work fine for other simple canvas tests (and the empty canvas element does seem to render without errors). I'm also using thewrapperoption to render a "portal" div.Just wondering if there are any suggestions for what I could try to make this work. Perhaps something I'm missing that made this strategy work for the internal library tests? Thanks.
Test code:
Output: