Angular+Jest环境下如何测试带cellRenderer的Ag Grid列值？

核心思路：确保Grid完全初始化 + 正确等待/捕获CellRenderer渲染 #

1. 解决gridApi/api为undefined的问题 #

测试时别依赖组件内部的gridOptions.api，直接在测试里捕获Grid实例：

• 先确保组件模板里的Ag Grid绑定了gridReady输出：<ag-grid-angular (gridReady)="onGridReady($event)" ...>
• 测试代码里定义变量存Grid API，替换组件的onGridReady方法来捕获：

  let gridApi: GridApi;
  // 覆盖组件的onGridReady，直接拿API
  component.onGridReady = (params: GridReadyEvent) => {
    gridApi = params.api;
  };
  

• 用Angular测试的waitFor方法（Angular 12+推荐）等待API就绪，别用模糊的whenStable：

  await waitFor(() => {
    expect(gridApi).not.toBeUndefined();
  });
  

2. 获取CellRenderer实例验证内容 #

Grid API就绪后，精准指定行和列来获取Renderer实例，别直接调用空参数的getCellRendererInstances()：

// 拿第一行、amount列的Renderer实例
const rendererInstances = gridApi.getCellRendererInstances({
  rowNodes: [gridApi.getDisplayedRowAtIndex(0)],
  columns: [gridApi.getColumn('amount')]
});

if (rendererInstances.length > 0) {
  const renderer = rendererInstances[0];
  // 如果是自定义Angular Renderer，直接拿组件实例查值
  const rendererComp = renderer.getFrameworkComponentInstance();
  expect(rendererComp.formattedValue).toBe('$1,234.56');
  
  // 或者直接查渲染后的DOM元素
  const cellDom = renderer.getGui();
  expect(cellDom.textContent.trim()).toBe('$1,234.56');
}

3. 修复CSS选择器查不到元素的问题 #

CellRenderer是异步渲染的，直接queryAll会提前执行，必须等元素出现：

• 用waitFor包裹查询逻辑，等待目标元素加载完成：

  const amountCells = await waitFor(() => {
    return fixture.debugElement.queryAll(By.css('[col-id="amount"] .currencyFormat'));
  });
  expect(amountCells.length).toBeGreaterThan(0);
  expect(amountCells[0].nativeElement.textContent.trim()).toBe('$1,234.56');
  

• 另外要注意：测试模块里必须声明/导入你的自定义CellRenderer组件，不然Angular不会渲染它，自然查不到元素。

4. 避免真实代码报错的Mock技巧 #

CellRenderer里的依赖（比如格式化服务）直接Mock，别让它跑真实逻辑：

// 在TestBed配置里Mock服务
beforeEach(async () => {
  await TestBed.configureTestingModule({
    declarations: [YourGridComponent, YourCellRendererComponent],
    providers: [
      { provide: CurrencyFormatService, useValue: { format: jest.fn(() => '$1,234.56') } }
    ]
  }).compileComponents();
});

这样既能避免真实代码的各种错误，还能精准控制返回值，方便验证。

内容的提问来源于stack exchange，提问作者Neil89