嘗試模擬 angular 中的服務以獲取測試用例，但仍然出現“沒有 HTTPClient 提供程序”

Question

我正在嘗試在我的主組件中為 Angular 中的項目運行測試用例。 該組件使用 ApiCallService，我正在嘗試模擬它以進行測試。 但是，我不斷收到相同的錯誤。 “創建”測試用例運行，但用於查看頁面上是否寫入“測試”的測試用例給出了“沒有 HTTPClient 提供程序”錯誤。 HttpClient 和 HttpClientModule 也被導入到 app.module.ts 中。

    import { HttpClient, HttpClientModule } from '@angular/common/http';
    import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
    import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
    import { HomeComponent } from './home.component';
    import { ApiCallService } from 'src/app/core/service/api-call.service';
    
    describe('HomeComponent', () => {
      let component: HomeComponent;
      let fixture: ComponentFixture<HomeComponent>;
      let service: ApiCallService;
      let httpMock: HttpTestingController;
      let httpClient: HttpClient;
    
     
    
      beforeEach(() => {
        TestBed.configureTestingModule({
        imports: [HttpClientTestingModule],
        providers: [ApiCallService, HomeComponent]
        });
        service = TestBed.inject(ApiCallService);
        httpMock = TestBed.get(HttpTestingController);
        httpClient = TestBed.inject(HttpClient);
      });
    
      it('should create', () => {
        expect(ApiCallService).toBeTruthy();
      });
    });
    
    
    
    it('TEST123', () => {
      const fixture = TestBed.createComponent(HomeComponent);
      fixture.detectChanges();
      const compiled = fixture.nativeElement as HTMLElement;
      expect(compiled.querySelector('p')?.textContent).toContain('Test');
    });

Answer 1

如果您正在對 HomeComponent 進行單元測試，那您就做錯了。 你應該做的是：

• 從 TestBed“providers”中刪除 HomeComponent 並將其添加到“declarations”下
• 如果 HomeComponent 沒有直接使用（在構造函數中注入）HttpClient 服務，則無需使用 HttpClientTestingModule，相反，您必須創建一個間諜來模擬 ApiCallService，如Angular 文檔中所述。
• 如果 HomeComponent 直接使用 HttpClient 服務，您將不得不測試 HTTP 次請求。 這是文檔。 而且您仍然必須模擬 ApiCallService。