Angular执行测试报错: NullInjectorError: No provider for HttpClient!

喜欢ヅ旅行 2022-04-11 13:18 561阅读 0赞

### 报错内容 ###

使用 `ng serve` 运行应用，通过访问 `http://localhost:4200`，运行正常，未见报错。 但是，执行 `ng test` 测试就报错，错误内容如下：

// HeroeSearchComponent
    Chrome 72.0.3622 (Mac OS X 10.13.6) HeroeSearchComponent should create FAILED
    	Error: StaticInjectorError(DynamicTestModule)[HttpClient]: 
    	  StaticInjectorError(Platform: core)[HttpClient]: 
            NullInjectorError: No provider for HttpClient!
    // HeroService
    Chrome 72.0.3622 (Mac OS X 10.13.6) HeroService should be created FAILED
    	Error: StaticInjectorError(DynamicTestModule)[HttpClient]: 
    	  StaticInjectorError(Platform: core)[HttpClient]: 
    	    NullInjectorError: No provider for HttpClient!

### 错误原因: ###

没有引入 HttpClientTestingModule 模块, 执行测试用例时找不到模块。

### 解决办法: ###

在测试代码中，引入 `HttpClientTestingModule` 模块

beforeEach(async(() => {
        
        TestBed.configureTestingModule({
        
            declarations: [ HeroSearchComponent ],
            imports:[ 
                RouterTestingModule, 
                HttpClientTestingModule, 
                FormsModule 
            ]
        }).compileComponents();
    }));

### 修复后完整代码如下: ###

HeroeSearchComponent 测试文件:

// heros-search-component.spec.ts
    import {
         async, ComponentFixture, TestBed } from '@angular/core/testing';
    import {
         HeroSearchComponent } from './hero-search.component';
    import {
         RouterTestingModule } from '@angular/router/testing';
    import {
         HttpClientTestingModule } from '@angular/common/http/testing';
    
    describe('HeroSearchComponent', () => {
        
      let component: HeroSearchComponent;
      let fixture: ComponentFixture<HeroSearchComponent>;
    
      beforeEach(async(() => {
        
        TestBed.configureTestingModule({
        
          declarations: [ HeroSearchComponent ],
          imports:[RouterTestingModule, HttpClientTestingModule]
        })
        .compileComponents();
      }));
    
      beforeEach(() => {
        
        fixture = TestBed.createComponent(HeroSearchComponent);
        component = fixture.componentInstance;
        fixture.detectChanges();
      });
    
      it('should create', () => {
        
        expect(component).toBeTruthy();
      });
    });

HeroService 测试文件:

// hero.service.spec.ts
    import {
         TestBed } from '@angular/core/testing';
    
    import {
         HeroService } from './hero.service';
    import {
         HttpClientTestingModule } from '@angular/common/http/testing';
    
    describe('HeroService', () => {
        
      beforeEach(() => TestBed.configureTestingModule({
        
        imports: [ HttpClientTestingModule ]
      }));
    
      it('should be created', () => {
        
        const service: HeroService = TestBed.get(HeroService);
        expect(service).toBeTruthy();
      });
    });