时间戳

首页 > 解决方案 > 如何在服务器端使用 Jest/Enzyme 测试 ag-grid

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

问题描述

当 rowModelType 为服务器端时，不会调用 ag-grid onGridReady，因此当我运行测试代码时找不到 agGridReact api，错误是“TypeError：无法读取未定义的属性'getDisplayedRowCount'”

这是我的测试代码（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}
     />

标签： javascriptreactjsag-gridag-grid-react

解决方案

AG Grid 文档中介绍了使用酶进行的测试：

用 Enzyme 测试 React Hooks

使用 Jest & Enzyme 进行测试 - 查询 JSDOM 与 AG Grid API

推荐阅读