Angular单元测试如何覆盖数组内定义的回调方法

你遇到的两个问题分别对应两个原因：

1. 类型报错Cannot invoke an object which is possibly 'undefined'：因为表单项配置里的change属性不是必填字段，TS静态检查时无法确认你链式取值拿到的对象上一定存在change方法，不允许直接调用。
2. 覆盖率未识别：你全程用可选链?.链式取值后直接调用的写法，会让覆盖率统计工具（Istanbul）无法正确映射到源码中定义的闭包函数位置，自然统计不到执行记录。

调整测试用例写法，先取出目标配置项做存在性校验，再手动触发change回调即可，参考代码如下：

describe('#defineTestForm', () => {
  it('should execute dropdown change logic correctly', () => {
    spyOn(component, 'somemethod');
    component.defineTestForm();

    // 取出目标下拉框的配置项
    const dropdownConfig = component.dynamicFormParams.mainFilters[0].filters[0];
    // 先断言change回调存在，从根源避免undefined调用问题
    expect(dropdownConfig.change).toBeDefined();

    // 传入模拟参数手动触发回调
    const mockChangeEvent = { value: 111 };
    dropdownConfig.change(mockChangeEvent, null);

    // 验证内部逻辑执行
    expect(component.somemethod).toHaveBeenCalledWith(111);
  })
})

如果TS还是报类型错误，可以在调用change的时候加非空断言：dropdownConfig.change!(mockChangeEvent, null)，因为前面已经做了toBeDefined断言，这里的非空断言是安全的。

如果改完之后覆盖率还是没有统计到，检查测试配置文件tsconfig.spec.json里的sourceMap选项是否开启，覆盖率工具需要sourceMap才能正确关联到源码里定义的闭包函数。
不建议在测试里全程用可选链点到底直接调用方法，这种写法除了会让覆盖率工具识别失败，一旦配置结构写错，测试会静默失败不会抛出明确错误。

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