如何在不激活链接的情况下测试<a>标签内按钮的点击事件？

现有代码如下：

模板代码：

<a [href]="some-url" target="_blank">
  <button (click)="onClick()">Press me</button>
</a>

组件逻辑：

function onClick(){
  this.service.doSomething();
}

需求是用Jasmine/Karma验证doSomething方法已被调用，同时不打开新链接或产生其他不必要的浏览器行为。之前尝试的几种方法都存在问题：

• 将href设为空字符串、target设为_self：导致浏览器窗口持续刷新

  const anchor = fixture.debugElement.query(By.css('a'))?.nativeElement as HTMLAnchorElement;
  anchor.href = '';
  anchor.target = '_self';
  

• 将href设为#、target设为_self：浏览器中打开内嵌的Karma实例

  const anchor = fixture.debugElement.query(By.css('a'))?.nativeElement as HTMLAnchorElement;
  anchor.href = '#';
  anchor.target = '_self';
  

• 在点击处理函数中返回false：测试成功但破坏应用逻辑

  function onClick(){
    this.service.doSomething();
    return false;
  }
  

可行解决方案 #

1. 在测试中阻止锚点的默认点击行为 #

直接监听锚点的点击事件并阻止默认行为，既不会触发跳转，也能正常执行按钮的点击逻辑：

it('should call doSomething when button is clicked', () => {
  spyOn(component.service, 'doSomething');
  // 获取锚点元素
  const anchor = fixture.debugElement.query(By.css('a')).nativeElement;
  // 拦截点击事件，阻止默认跳转行为
  anchor.addEventListener('click', (e: Event) => e.preventDefault());
  // 获取按钮并模拟点击
  const button = fixture.debugElement.query(By.css('button')).nativeElement;
  button.click();
  fixture.detectChanges();
  // 验证方法调用
  expect(component.service.doSomething).toHaveBeenCalled();
});

2. 直接触发按钮的点击事件（绕过锚点） #

按钮本身绑定了onClick方法，直接获取按钮元素模拟点击，完全不触发锚点的跳转逻辑：

it('should call doSomething when button is clicked', () => {
  spyOn(component.service, 'doSomething');
  // 直接获取按钮元素
  const button = fixture.debugElement.query(By.css('button')).nativeElement;
  // 模拟按钮点击
  button.click();
  fixture.detectChanges();
  // 验证方法调用
  expect(component.service.doSomething).toHaveBeenCalled();
});

3. 拦截window.open方法（适配target="_blank"场景） #

因为target="_blank"会调用window.open打开新标签，用Jasmine Spy拦截该方法即可阻止跳转：

it('should call doSomething and prevent new tab', () => {
  spyOn(component.service, 'doSomething');
  // 拦截window.open，阻止打开新标签页
  spyOn(window, 'open').and.stub();
  // 点击锚点元素
  const anchor = fixture.debugElement.query(By.css('a')).nativeElement;
  anchor.click();
  fixture.detectChanges();
  // 验证方法调用
  expect(component.service.doSomething).toHaveBeenCalled();
  // 可选：验证window.open的调用参数是否符合预期
  expect(window.open).toHaveBeenCalledWith('some-url', '_blank');
});

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