Cypress测试父组件时如何触发子组件EventEmitter事件？

我在使用Cypress测试父组件时，尝试触发子组件的EventEmitter事件，但测试执行失败。相关代码如下：

子组件ToolbarComponent代码 #

@Component({
  selector: 'app-toolbar',
  templateUrl: './toolbar.component.html',
  styleUrls: ['./toolbar.component.scss']
})

export class ToolbarComponent {

  @Output() showSideNav = new EventEmitter();

  openSideNav() {
    this.showSideNav.emit();
  }
}

子组件HTML代码 #

<button
    data-cy="menu-button"
    (click)="openSideNav()"
    mat-icon-button
    aria-label="Application menu button">
    <mat-icon>menu</mat-icon>
</button>

父组件HTML代码 #

<app-toolbar data-cy="toolbar" [loggedOnUser$]="loggedOnUser$" (showSideNav)="drawer.toggle()"></app-toolbar>
<mat-sidenav-container class="sidenav-container">
    <mat-sidenav data-cy="sidenav-menu" #drawer mode="side">
      <p data-cy="first-menu-item" class="mx-5 mt-3 mb-4">Menu</p>
    </mat-sidenav>
    <mat-sidenav-content>
      <router-outlet></router-outlet>
    </mat-sidenav-content>
</mat-sidenav-container>

当前测试代码 #

describe('sidenav', () => {
      it('should open when drawer is toggled', () => {
          cy.get('[data-cy=toolbar]').trigger('showSideNav');
          cy.get('[data-cy=first-menu-item]').should('be.visible');
      });
  });

问题原因 #

Cypress的trigger()方法仅能触发原生DOM事件，而Angular的@Output EventEmitter是框架内部的自定义事件，不属于DOM事件范畴，因此直接调用trigger('showSideNav')无法触发对应的逻辑。

解决方法 #

1. 模拟用户真实交互（推荐） #

直接点击子组件中的菜单按钮，还原用户的真实操作流程，这样会自然触发组件内部的openSideNav()方法，进而触发EventEmitter：

describe('sidenav', () => {
  it('should open when drawer is toggled', () => {
    cy.get('[data-cy=menu-button]').click();
    cy.get('[data-cy=first-menu-item]').should('be.visible');
  });
});

这种方式更贴合端到端测试的核心思想，验证的是用户实际使用场景下的功能表现。

2. 直接操作Angular组件实例（特殊场景适用） #

如果需要跳过UI交互直接触发组件逻辑，可以通过Cypress获取Angular组件实例，调用内部方法或直接emit事件：

describe('sidenav', () => {
  it('should open when drawer is toggled', () => {
    cy.get('[data-cy=toolbar]').then($el => {
      // 获取Toolbar组件的Angular实例
      const toolbarComponent = ng.getComponent($el[0]);
      // 调用组件内部方法触发事件
      toolbarComponent.openSideNav();
      // 也可以直接emit事件：toolbarComponent.showSideNav.emit();
    });
    cy.get('[data-cy=first-menu-item]').should('be.visible');
  });
});

注意：使用ng.getComponent需要确保Cypress已配置Angular支持（默认生成的Cypress配置中已包含该支持）。

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