Jasmine测试Angular mat-menu组件getter无覆盖率如何解决

问题根因 #

你在测试中使用spyOnProperty直接mock了menuTriggerData getter的返回值，完全替换了组件内的原生getter实现，原生代码从未实际执行，因此覆盖率工具不会统计这部分代码的执行记录。

修复方案 #

不要spy你需要统计覆盖率的目标函数本身，改为mock它的依赖项，让原生getter逻辑可以正常执行，再断言返回结果符合预期即可。

正确的测试用例示例：

it('get menuTriggerData should return correct width from menu element', () => {
  // Mock getter依赖的ElementRef的clientWidth属性
  component.menuElementRef = {
    nativeElement: {
      clientWidth: 150
    }
  } as ElementRef<HTMLElement>;

  // 直接触发原生getter执行
  expect(component.menuTriggerData).toEqual({menuListWidth: 150});
});

如果你的测试环境中menuElementRef是只读属性，也可以用Object.defineProperty修改：

it('get menuTriggerData should return correct width from menu element', () => {
  Object.defineProperty(component, 'menuElementRef', {
    value: {
      nativeElement: { clientWidth: 150 }
    }
  });

  expect(component.menuTriggerData).toEqual({menuListWidth: 150});
});

修改后原生getter逻辑会被真实执行，覆盖率工具即可正常统计到这部分代码的执行记录。

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