Angular 14组件Cypress E2E测试：如何Mock InternalService的getUserData方法

我用Angular 14构建了一个组件，它依赖内部服务获取用户数据（名和姓），而内部服务又通过npm引入的外部UserService获取数据。内部服务会调用外部服务的方法获取客户数据并存储在变量中，供多个组件使用。

内部服务代码如下：

import { UserData, UserService } from 'externalService'
import { Injectable } from '@angular/core';
import { firstValueFrom } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class InternalService {
  
  private userData?: UserData;
  
  constructor(private userService: UserService) {}
  
  public async getUserData(): Promise<UserData> {
    this.userData = await firstValueFrom(this.userService.getProfileData());
    
    return this.userData;
  }
}

现在我需要在Cypress中对组件进行E2E测试，已经创建了包含不同用户数据的fixtures来覆盖多测试场景。但getUserData()方法没有调用任何可拦截的API接口或网络请求，未来计划从Redux Store获取数据（目前开发中）。请问如何mock这个方法，使其返回我的fixtures数据？

解决方法 #

由于getUserData()没有发起网络请求，无法通过cy.intercept拦截，我们需要直接Mock Angular的InternalService实例。以下是具体实现步骤：

1. 准备Fixture数据 #

在cypress/fixtures目录下创建用户数据文件，比如user1.json和user2.json：

// cypress/fixtures/user1.json
{
  "firstName": "John",
  "lastName": "Doe"
}

// cypress/fixtures/user2.json
{
  "firstName": "Jane",
  "lastName": "Smith"
}

2. 在Cypress测试中Mock服务 #

利用Angular的ng.probe（仅在开发模式可用，E2E测试建议使用开发环境）获取应用的注入器，然后替换InternalService的getUserData方法：

describe('用户组件E2E测试', () => {
  // 测试场景1：显示第一个用户数据
  it('应显示Fixture中的第一个用户信息', () => {
    cy.fixture('user1.json').then((userFixture) => {
      cy.visit('/your-component-path', {
        onBeforeLoad(win) {
          // 获取Angular组件的注入器
          const rootElement = win.document.body;
          const injector = win.ng.probe(rootElement).injector;
          
          // 获取InternalService实例
          const internalService = injector.get(InternalService);
          
          // Mock getUserData方法，返回Fixture数据
          cy.stub(internalService, 'getUserData').resolves(userFixture);
        }
      });
      
      // 断言组件正确渲染用户姓名
      cy.get('.user-firstname').should('have.text', userFixture.firstName);
      cy.get('.user-lastname').should('have.text', userFixture.lastName);
    });
  });

  // 测试场景2：显示第二个用户数据
  it('应显示Fixture中的第二个用户信息', () => {
    cy.fixture('user2.json').then((userFixture) => {
      cy.visit('/your-component-path', {
        onBeforeLoad(win) {
          const rootElement = win.document.body;
          const injector = win.ng.probe(rootElement).injector;
          const internalService = injector.get(InternalService);
          
          cy.stub(internalService, 'getUserData').resolves(userFixture);
        }
      });
      
      cy.get('.user-firstname').should('have.text', userFixture.firstName);
      cy.get('.user-lastname').should('have.text', userFixture.lastName);
    });
  });
});

3. 注意事项 #

• 开发模式限制：ng.probe仅在Angular开发模式下可用，生产模式会被移除。如果需要在生产环境测试，可以在应用中添加测试专用的服务替换逻辑（比如通过环境变量控制）。
• 未来兼容Redux：当前Mock的是InternalService的方法签名，后续即使内部实现改为从Redux Store获取数据，只要getUserData()的返回类型不变，测试代码无需修改。
• 类型提示：如果使用TypeScript编写Cypress测试，需要确保InternalService的类型可以被正确识别，可通过导入服务类型或添加类型断言解决。

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