Angular测试：如何验证alert是否被调用？

问题出在spy创建的时机不对——你先执行了按钮点击触发alert，之后才给window.alert创建spy，这时候alert已经执行完毕，spy根本没捕获到这次调用，所以测试报错。

修正后的代码应该把spyOn放在按钮点击之前：

it('should display alert when clicking on icon', () => {
  // 先创建spy，监听window.alert
  spyOn(window, 'alert').and.callThrough();
  const button = fixture.nativeElement.querySelector('.pi-trash');
  button.click();
  expect(window.alert).toHaveBeenCalledWith('delete');
})

补充说明： #

• spy的核心作用是拦截并记录目标函数的调用，所以必须在触发目标行为（这里是按钮点击）之前完成创建，才能捕获到后续的调用。
• 如果不需要实际弹出alert（只是验证调用逻辑），可以把and.callThrough()换成and.stub()，这样不会触发真实的alert弹窗，只记录调用信息。

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