glideapps / glideapps/glide-data-grid
Render glide-data-grid in jsdom tests
- Dominant language
- TypeScript
- Stars
- 5.3k
- Forks
- 428
- PR merge metrics
- No merged PRs in 30d
Description
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}
);
};
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(
,
{ wrapper: Context },
);
};
describe('grid', () => {
it('should render', () => {
vi.useFakeTimers();
setup();
prep();
screen.getByTestId('data-grid-canvas');
});
});
```
Output:
```
TestingLibraryElementError: Unable to find an element by: [data-testid="data-grid-canvas"]
Ignored nodes: comments, script, style
```
Contributor guide
Assessment
This issue has not been assessed yet.