如何在服务器端使用Jest/Enzyme测试ag-grid

Question

当rowModelType是服务器端时，aggrid onGridReady不会被调用，所以当我运行测试代码时找不到agGridReact api，错误是"TypeError:无法读取属性'getDisplayedRowCount'的undefined">

这是我的测试代码(index.test.js)

let component = null;
let agGridReact = null;
const ensureGridApiHasBeenSet = async (componentRef) => {
await act(async () => {
await new Promise(function (resolve, reject) {
(function waitForGridReady() {
if (componentRef.current.getApi()) {
return resolve();
}
setTimeout(waitForGridReady, 10);
})();
});
});
};
beforeEach(async () => {
const ref = React.createRef();
component = mount(<SymbolMetadata ref={ref} />);
agGridReact = component.find(AgGridReact).instance();
await ensureGridApiHasBeenSet(ref);
});
afterEach(() => {
component.unmount();
agGridReact = null;
});
describe('metadata', () => {
it('metadata  should have correct columns', () => {
console.info('agGridReact.api.getDisplayedRowCount());
});
});

这是ag-grid (index.js)

const onGridReady = async (params: GridReadyEvent) => {
gridOptionsApi.current = params.api;
columnApiRef.current = params.columnApi;
};
<AgGridReact
animateRows
suppressColumnVirtualisation
serverSideFilteringAlwaysResets
rowModelType={'serverSide'}
rowHeight={32}
rowSelection={'single'}
defaultColDef={{
menuTabs: ['filterMenuTab'],
resizable: true,
filter: true,
}}
serverSideStoreType={ServerSideStoreType.Partial}
pagination
localeText={{
noRowsToShow: 'No Data',
}}
paginationPageSize={pageSize}
cacheBlockSize={pageSize}
headerHeight={24}
gridOptions={gridOptions}
onGridReady={onGridReady}
/>

Answer 1

酶的测试在AG网格文档中有介绍:

用酶测试React hook

用Jest测试;query JSDOM vs AG Grid API