如何为AG Grid的Cell Renderer编写正确的单元测试用例

错误原因分析 #

你的单元测试报错有两个核心问题：

1. Array.find()方法在找不到匹配项时会返回undefined，直接链式访问.cellRenderer会触发TypeScript严格空值检查的错误。
2. 测试的预期值错误：自定义Cell Renderer返回的是包含<a>标签的HTML字符串，而非单纯的文本内容。

修正后的单元测试用例 #

it('should render SourceName as clickable link', fakeAsync(() => {
  // 先确认找到目标列定义，避免undefined风险
  const sourceNameColDef = component.columnDefs.find(c => c.field === 'SourceName');
  expect(sourceNameColDef).toBeTruthy('SourceName列定义未找到');

  // 断言cellRenderer存在并调用它
  const cellRenderer = sourceNameColDef.cellRenderer as (params: any) => string;
  expect(cellRenderer).toBeDefined();

  const testData = { data: { SourceName: 'OPCUA_Site1' } };
  const renderedOutput = cellRenderer(testData);
  
  // 验证返回的HTML字符串符合预期
  expect(renderedOutput).toEqual(
    '<a href="javascript: void(0)" class="noUnderline">OPCUA_Site1</a>'
  );
}));

关键改进点 #

• 避免undefined风险：先断言找到的列定义不为空，再访问其cellRenderer属性，通过toBeTruthy()确保后续代码安全执行。
• 修正预期值：匹配Cell Renderer实际返回的带<a>标签的HTML内容，而非纯文本。
• 类型更严谨：明确指定cellRenderer的类型为函数，提升测试的类型安全性。

如果需要测试Type列的Cell Renderer，逻辑完全一致，只需要替换对应的字段名和预期HTML即可：

it('should render Type as clickable link', fakeAsync(() => {
  const typeColDef = component.columnDefs.find(c => c.field === 'Type');
  expect(typeColDef).toBeTruthy('Type列定义未找到');

  const cellRenderer = typeColDef.cellRenderer as (params: any) => string;
  expect(cellRenderer).toBeDefined();

  const testData = { data: { Type: 'TestType' } };
  const renderedOutput = cellRenderer(testData);
  
  expect(renderedOutput).toEqual(
    '<a href="javascript: void(0)" class="noUnderline">TestType</a>'
  );
}));

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