Angular测试中导入HttpTestingController报错的解决方法

你遇到的错误是因为HttpTestingController不是NgModule，不能添加到TestBed.configureTestingModule的imports数组里。它是一个用于拦截HTTP请求的服务类，已经由HttpClientTestingModule提供，正确用法如下：

1. 确保测试模块的imports中只保留HttpClientTestingModule（你原代码这部分是正确的）
2. 在测试文件顶部导入HttpTestingController
3. 通过TestBed.inject()获取它的实例，不需要在imports或providers中额外配置

修正后的完整测试代码：

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing'; // 导入HttpTestingController
import { ComponentHttpRServiceComponent } from './component-http-r-service.component';
import { StudentService } from './student.service';

describe('ComponentHttpRServiceComponent', () => {
  let component: ComponentHttpRServiceComponent;
  let fixture: ComponentFixture<ComponentHttpRServiceComponent>;

  let service: StudentService;
  let httptestcontroller: HttpTestingController; // 声明变量

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [ComponentHttpRServiceComponent],
      imports: [HttpClientTestingModule], // 仅保留此模块
      providers: [StudentService],
    }).compileComponents();
  });

  beforeEach(() => {
    fixture = TestBed.createComponent(ComponentHttpRServiceComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
    service = TestBed.inject(StudentService);
    httptestcontroller = TestBed.inject(HttpTestingController); // 获取实例
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });

  it('httpclient get method', () => {
    // 示例HTTP请求测试逻辑
    service.getStudents().subscribe(students => {
      expect(students.length).toBe(2);
    });

    const req = httptestcontroller.expectOne('api/students');
    expect(req.request.method).toBe('GET');
    req.flush([{id:1, name:'张三'}, {id:2, name:'李四'}]);
    
    httptestcontroller.verify();
  });
});

关键点总结 #

• HttpClientTestingModule是Angular官方提供的HTTP测试专用NgModule，内部已经注册了HttpTestingController的提供者
• 你只需要导入这个模块，再通过依赖注入获取HttpTestingController实例即可
• 错误根源是把服务类当成NgModule去导入，违反了Angular的模块规则

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