如何在Cypress组件测试中为Angular独立组件Mock服务？

问题原因 #

你的独立组件TestComponent导入了TestModule，该模块已在自身providers中注册TestService。Angular依赖注入的优先级规则是：组件自身注入器中的服务（包括测试阶段覆盖添加的）优先级高于导入模块提供的服务。你之前在cy.mount的providers中配置的Mock服务是注册在父注入器中，因此组件调用inject(TestService)时会优先获取TestModule提供的原始服务，而非Mock实现。

解决方案 #

方案1：通过TestBed覆盖组件Providers（推荐） #

在调用cy.mount前，使用Angular的TestBed.overrideComponent方法，将Mock服务添加到组件自身的providers中，直接覆盖模块提供的原始服务：

import { TestBed } from '@angular/core/testing';

// 定义你的Mock服务
const mockTestService = {
  // 这里添加Mock方法，比如：
  getData: () => cy.wrap({ mockData: 'test' })
};

function mount() {
  // 覆盖组件的providers配置
  TestBed.overrideComponent(TestComponent, {
    add: {
      providers: [{ provide: TestService, useValue: mockTestService }]
    }
  });

  cy.mount(TestComponent, {
    providers: [
      provideHttpClient(),
      provideHttpClientTesting(),
    ],
  });
}

方案2：调整mount配置的Providers顺序（限组件未直接导入TestModule场景） #

如果组件没有直接导入TestModule，可以在cy.mount的providers中先导入模块的服务，再注册Mock服务，利用"后注册的服务覆盖先注册的"规则替换TestService：

function mount() {
  cy.mount(TestComponent, {
    providers: [
      provideHttpClient(),
      provideHttpClientTesting(),
      importProvidersFrom(TestModule), // 先导入模块所有服务
      { provide: TestService, useValue: mockTestService }, // 覆盖TestService
    ],
  });
}

方案3：移除组件对TestModule的导入（允许修改组件代码时使用） #

如果组件仅依赖TestModule中的部分服务，可以移除组件的imports: [TestModule]，在测试中单独提供所需的其他服务和Mock的TestService：

// 组件代码修改
@Component({
  selector: 'app-test',
  standalone: true,
  // 移除TestModule导入
  templateUrl: './test.component.html',
  styleUrl: './test.component.scss',
})
export class TestComponent {
  testService = inject(TestService);
}

// 测试代码
function mount() {
  cy.mount(TestComponent, {
    providers: [
      provideHttpClient(),
      provideHttpClientTesting(),
      OtherService, // 提供TestModule中需要的其他服务
      { provide: TestService, useValue: mockTestService },
    ],
  });
}

验证Mock是否生效 #

可以在测试中添加断言，确认组件使用的是Mock服务：

cy.get('app-test').then($el => {
  const componentInstance = $el[0].componentInstance;
  expect(componentInstance.testService).to.equal(mockTestService);
});

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