Angular组件挂载后，如何用Cypress覆写组件或服务属性？

我正在使用Cypress搭建Angular组件单元测试，想在测试准备阶段覆写组件属性或其依赖Service的属性，但尝试后未生效。

组件代码 #

export class ToolbarComponent {

  constructor(private accountService: AccountService) { }

  loggedOnUser$ = this.accountService.loggedOnUser$;
}

测试挂载代码 #

const accountService = getMockAccountService();

beforeEach(() => {    
  cy.mount(ToolbarComponent, setupCypressConfig<ToolbarComponent>({
    autoSpyOutputs: true,
    providers: [{
      provide: AccountService, 
      useValue: accountService
    }]
  }));
});

未生效的覆写尝试 #

describe('login button', () => {
  it('should be visible when user is not logged in', () => {
    cy.stub(accountService, 'loggedOnUser$').value(of(null)); // 未更新属性
    cy.wait(1000);
    cy.get(elementBindings.loginButton).should('be.visible');
  });
});

重新挂载组件可以通过测试，但希望找到无需重新挂载、直接覆写属性的方案，请问是否可行？有哪些其他解决方案？

1. 直接修改组件实例的属性 #

Cypress提供cy.getComponent()方法可获取已挂载的组件实例，直接修改组件上的loggedOnUser$属性即可：

describe('login button', () => {
  it('should be visible when user is not logged in', () => {
    cy.getComponent<ToolbarComponent>().then(component => {
      component.loggedOnUser$ = of(null);
    });
    cy.get(elementBindings.loginButton).should('be.visible');
  });
});

原理：组件初始化时loggedOnUser$是直接赋值为accountService.loggedOnUser$的引用，后续修改组件实例的该属性会直接覆盖原有Observable，组件视图会自动响应变更。

2. 改造Mock Service为可动态更新类型 #

更符合RxJS最佳实践的方式是让Mock Service的loggedOnUser$基于BehaviorSubject实现，随时推送新值即可，无需覆写属性：

// 改造getMockAccountService
function getMockAccountService() {
  const loggedOnUserSubject = new BehaviorSubject<any>(null); // 替换any为实际用户类型
  return {
    loggedOnUser$: loggedOnUserSubject.asObservable(),
    // 新增方法用于更新用户状态
    setLoggedOnUser: (user: any | null) => loggedOnUserSubject.next(user)
  };
}

// 测试中直接调用更新方法
describe('login button', () => {
  it('should be visible when user is not logged in', () => {
    accountService.setLoggedOnUser(null);
    cy.get(elementBindings.loginButton).should('be.visible');
  });
});

这种方式下，组件始终订阅同一个Observable，仅需推送新值就能触发视图更新，逻辑清晰且避免了侵入式修改组件实例。

3. 修正Stub属性的方式（不推荐） #

之前cy.stub无效的原因是：组件挂载时已获取accountService.loggedOnUser$的初始引用，后续Stub属性不会影响已存在的引用。若一定要用Stub，可通过Object.defineProperty重新定义Service属性：

describe('login button', () => {
  it('should be visible when user is not logged in', () => {
    Object.defineProperty(accountService, 'loggedOnUser$', {
      get: () => of(null),
      configurable: true
    });
    // 需手动更新组件的属性引用
    cy.getComponent().then(component => {
      component.loggedOnUser$ = accountService.loggedOnUser$;
    });
    cy.get(elementBindings.loginButton).should('be.visible');
  });
});

该方式较为繁琐，不如前两种方案简洁，一般不推荐使用。

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