服务端模式下ag-grid用Jest/Enzyme测试时onGridReady不触发无法获取API

问题原因 #

• ag-grid的serverSide行模型要求完成初始服务端数据加载后才会触发onGridReady事件，测试环境未模拟对应数据源请求的情况下，事件会一直处于等待状态无法触发，导致grid API未初始化
• 现有测试逻辑里轮询组件ref的getApi()方法，前提也是grid已经完成初始化，未初始化时该方法一直返回空，轮询会超时失败

修复方案 #

1. 模拟服务端数据源触发初始化 #

服务端模式下只要给grid设置合法的serverSideDatasource，ag-grid触发数据加载流程后就会正常触发onGridReady，调整测试代码如下：

// 修改ensureGridApiHasBeenSet方法
const ensureGridApiHasBeenSet = async (agGridInstance) => {
  await act(async () => {
    // 传入模拟数据源触发初始化
    agGridInstance.api.setServerSideDatasource({
      getRows: (params) => {
        // 直接返回空数据完成加载流程
        params.success({
          rowData: [],
          rowCount: 0
        });
      }
    });
    // 等待微任务执行完成确保API初始化完毕
    await new Promise(resolve => setImmediate(resolve));
  });
};

// 调整beforeEach调用逻辑
beforeEach(async () => {
  component = mount(<SymbolMetadata />);
  agGridReact = component.find(AgGridReact).instance();
  await ensureGridApiHasBeenSet(agGridReact);
});

2. 轻量场景可选：直接mock AgGridReact #

如果不需要测试ag-grid本身的渲染逻辑，直接mock组件主动触发onGridReady即可，无需依赖ag-grid内部初始化流程：

// 测试文件顶部添加mock逻辑
jest.mock('ag-grid-react', () => ({
  AgGridReact: jest.fn((props) => {
    React.useEffect(() => {
      // 组件挂载时直接触发onGridReady，传入你需要的模拟API
      props.onGridReady({
        api: {
          getDisplayedRowCount: jest.fn(() => 0),
          // 所有测试用到的API方法都可以在这里自定义mock返回值
        },
        columnApi: {}
      });
    }, []);
    return <div data-testid="ag-grid-mock" />;
  })
}));

注意事项 #

你的测试用例中console.info('agGridReact.api.getDisplayedRowCount());存在语法错误，多写了一个左单引号，修正为console.info(agGridReact.api.getDisplayedRowCount());即可。

内容的提问来源于stack exchange，提问作者chris-paul