在Cypress中挂载Angular组件时遇NullInjectionError的解决求助

当组件依赖的服务需要HttpClient时，测试环境中必须正确配置HTTP相关的依赖注入，否则会抛出NullInjectionError。以下是具体的解决步骤：

1. 导入测试用HTTP模块 #

在测试文件中导入Angular提供的HttpClientTestingModule，这个模块专门用于测试场景，提供了HttpClient的模拟实现，避免发送真实HTTP请求：

import { SpInputComponent } from "[abriged]/sp-input.component";
import { HttpClientTestingModule } from '@angular/common/http/testing';
// 若组件依赖自定义服务，同时导入该服务
// import { SpInputService } from '[abriged]/sp-input.service';

2. 配置Cypress mount的依赖项 #

根据组件类型（传统组件/独立组件），修改cy.mount的配置：

情况1：传统组件（非standalone） #

需要在配置中声明组件，并添加imports数组引入HttpClientTestingModule，如果自定义服务不是全局提供的，还要在providers中注册：

describe('Sp-Input component', () => {
  it('mounts', () => {
    cy.mount('<app-sp-input></app-sp-input>', {
      declarations: [SpInputComponent],
      imports: [HttpClientTestingModule],
      // 若自定义服务未通过providedIn: root全局提供，添加以下配置
      // providers: [SpInputService]
    })
  })
})

情况2：独立组件（Angular 14+，standalone: true） #

独立组件无需在declarations中声明，直接挂载组件类即可，只需确保imports中包含HttpClientTestingModule：

describe('Sp-Input component', () => {
  it('mounts', () => {
    cy.mount(SpInputComponent, {
      imports: [HttpClientTestingModule],
      // 若组件依赖的服务需要额外提供，添加providers配置
      // providers: [SpInputService]
    })
  })
})

关键说明 #

• NullInjectionError的本质是依赖的服务（或其依赖的HttpClient）未被Angular的注入器找到，因此必须确保：
  • HttpClientTestingModule被正确加入imports数组，提供HTTP相关的依赖
  • 组件依赖的自定义服务已通过全局注册（providedIn: root）或测试配置中的providers数组注册
• 避免在测试环境中使用HttpClientModule，优先使用HttpClientTestingModule，它更适合测试场景，且能避免真实网络请求干扰测试结果

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