Cypress组件测试调用Angular Harness内嵌cy命令报错如何解决？

核心原因 #

你遇到的报错是因为原生Promise的回调不受Cypress命令调度队列管控，Cypress无法追踪回调内cy命令的执行时序，因此禁止在非Cypress管理的Promise回调中调用cy类命令。

修复方案 #

使用Cypress提供的cy.wrap()API包裹获取Harness的原生Promise，将其纳入Cypress的命令队列，此时链式调用的.then()属于Cypress管控的回调，内部可以正常调用cy命令。
同时注意Angular Material Harness的交互方法（如setPageSize）本身也是异步返回Promise的，建议也用cy.wrap()包裹等待执行完成，避免时序问题。

修改后可用代码 #

it('shows opens paginator', () => {
    const data: StudyStateModel[] = thirteenRows;
    const fixture = mount(DatatableComponent, {
        tableCols: TableColsConfig.STUDIES_COLS,
        tableData: data,
        activeEndpoint: apiEndpoints.STUDY
    });
    const loader = TestbedHarnessEnvironment.loader(fixture);
    
    // 用cy.wrap包裹Harness获取逻辑，纳入Cypress命令调度
    cy.wrap(loader.getHarness<MatPaginatorHarness>(MatPaginatorHarness))
      .then((paginator) => {
        // 等待setPageSize异步执行完成
        cy.wrap(paginator.setPageSize(10)).then(() => {
          fixture.detectChanges();
          cy.get('.mat-row').should('have.length', 10);
          cy.get('.mat-row').should('not.be.visible');
          
          cy.wrap(paginator.setPageSize(25)).then(() => {
            fixture.detectChanges();
            // 此处可补充页大小改为25后的对应断言
          });
        });
        console.log(paginator);
    });
});

其他可选写法 #

如果习惯用async/await语法，也可以将测试用例回调改为async函数，直接await Harness实例，注意所有cy命令放在await之后即可正常执行：

it('shows opens paginator', async () => {
    const data: StudyStateModel[] = thirteenRows;
    const fixture = mount(DatatableComponent, {
        tableCols: TableColsConfig.STUDIES_COLS,
        tableData: data,
        activeEndpoint: apiEndpoints.STUDY
    });
    const loader = TestbedHarnessEnvironment.loader(fixture);
    // 直接await获取Harness实例
    const paginator = await loader.getHarness<MatPaginatorHarness>(MatPaginatorHarness);
    await paginator.setPageSize(10);
    fixture.detectChanges();
    
    // 后续cy命令可正常调用
    cy.get('.mat-row').should('have.length', 10);
    cy.get('.mat-row').should('not.be.visible');
    
    await paginator.setPageSize(25);
    fixture.detectChanges();
});

这种写法下所有异步操作都用await显式等待，也不会触发Cypress的Promise冲突报错。

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