No provider for HttpClient! Angular test

Question

I imported the HTTP client in my ngmodel array but when I run my tests I still get the No provider for HttpClient. error? Am I maybe missing an import in the tests itself?

Every test from every component gives this error. Even if its just a simple check if the strings are the same. Not sure what I am doing wrong here

My code from app.module:

import { NgModule, isDevMode } from '@angular/core';
import { QuillModule } from 'ngx-quill';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NavComponent } from './shared/nav/nav.component';
import { ServiceWorkerModule } from '@angular/service-worker';
import { FooterComponent } from './shared/footer/footer.component';
import { FormsModule } from "@angular/forms";
import { LoginComponent } from './pages/account/login/login.component';
import { RegistrationComponent } from './pages/account/registration/registration.component';
import { NotificationsComponent } from './pages/notifications/notifications.component';
import { HomepageComponent } from './pages/homepage/homepage.component';
import { PostComponent } from './partial/post/post.component';
import { LandingComponent } from './pages/landing/landing.component';
import { CreatePostMenuComponent } from './partial/create-post-menu/create-post-menu.component';
import { SettingsComponent } from './pages/settings/settings.component';
import { HttpClientModule } from '@angular/common/http';
import Quill from "quill";
import { QuillHandlers } from "./handlers/quill.handlers";
import { CommunityListComponent } from './pages/community/community-list/community-list.component';
import { CommunityCardComponent } from './partial/community-card/community-card.component';
import { CreateCommunityMenuComponent } from './partial/create-community-menu/create-community-menu.component';
import { ImageCropperModule } from 'ngx-image-cropper';


import { CommunityBannerComponent } from './partial/community-banner/community-banner.component';
import { CommunityDetailComponent } from './pages/community/community-detail/community-detail.component';
import { AccountDetailComponent } from './pages/account/account-detail/account-detail.component';

const FontAttributor = Quill.import('attributors/class/font');
FontAttributor.whitelist = [
  'Gotham',
];
Quill.register(FontAttributor, true);

@NgModule({
  declarations: [
    AppComponent,
    NavComponent,
    FooterComponent,
    LoginComponent,
    NotificationsComponent,
    HomepageComponent,
    PostComponent,
    LandingComponent,
    CreatePostMenuComponent,
    SettingsComponent,
    RegistrationComponent,
    CommunityListComponent,
    CommunityCardComponent,
    CreateCommunityMenuComponent,
    CommunityDetailComponent,
    CommunityBannerComponent,
    AccountDetailComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    ServiceWorkerModule.register('ngsw-worker.js', {
      enabled: !isDevMode(),
      // Register the ServiceWorker as soon as the application is stable
      // or after 30 seconds (whichever comes first).
      registrationStrategy: 'registerWhenStable:30000'
    }),
    QuillModule.forRoot({
      modules: {
        syntax: true,
        toolbar: [],
      },
      customOptions: [{
        import: 'formats/font',
        whitelist: ['Gotham'],
      }],
      suppressGlobalRegisterWarning: true,
    }),
    FormsModule,
    ImageCropperModule,
    HttpClientModule,
  ],
  providers: [
    QuillHandlers,
  ],
  bootstrap: [AppComponent]
})
export class AppModule {
}

My test code:

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { GenericService } from 'src/app/services/API/generic.service';
import { CommunityDetailComponent } from './community-detail.component';
import { HttpClientTestingModule } from '@angular/common/http/testing';
import { HttpClientModule } from '@angular/common/http';
 
describe('CommunityDetailComponent', () => {
  let component: CommunityDetailComponent;
  let fixture: ComponentFixture<CommunityDetailComponent>;
  const testString = "test";
  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [HttpClientTestingModule, HttpClientTestingModule ],
      declarations: [ CommunityDetailComponent ]
    })
    .compileComponents();

    fixture = TestBed.createComponent(CommunityDetailComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

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

  it('tester', () => {
    expect("test").toBe(testString)
  });
});

Specific error: NullInjectorError: R3InjectorError(DynamicTestModule)[ActivatedRoute -> ActivatedRoute]: NullInjectorError: No provider for ActivatedRoute!

import { Component } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { Subscription } from 'rxjs';

import { EnrollmentService } from 'src/app/services/API/enrollment.service';
import { CommonService } from 'src/app/services/common.service';
import { SweetAlert } from '../../../helpers/sweetalert.service';
import { Community } from '../../../models/domain/Community';
import { CommunityService } from '../../../services/API/community.service';




@Component({
  selector: 'app-community-detail',
  templateUrl: './community-detail.component.html',
  styleUrls: ['./community-detail.component.scss']
})
export class CommunityDetailComponent {
  community!: Community;
  subscription!: Subscription;
  communityId!: string | null;
  dataLoaded: boolean = false;


  constructor(private communityService: CommunityService, private enrollmentService: EnrollmentService, private route: ActivatedRoute, private router: Router, private commonService : CommonService) {

  }
  ngOnInit(): void {
    this.route.paramMap.subscribe((params) => {
      this.communityId = params.get('id');
      if (this.communityId) {
        console.log("community detail got param community id:" + this.communityId)
        this.getCommunity();
      } else {
        SweetAlert.showErrorAlert("Kan geen community geven met het opgegeven id.")
        this.router.navigateByUrl('community');
      }
    });
    this.commonService.getUpdate().subscribe((data) => {
      this.getCommunity();
    });
  }


  //api cal to enroll the currently logged in user for the community
  //0 represents the role 'MEMBER'
  joinCommunity(): void {
    this.subscription = this.enrollmentService.enroll(this.communityId!, 2).subscribe({
      next: (v) => {
        SweetAlert.showSuccessAlert("Je bent nu lid van deze community!")
        console.log(v)
      },
      error: () => SweetAlert.showErrorAlert("Er is iets misgegaan, je bent mogelijk al lid van deze community."),
      complete: () => console.log('joining community complete (ui)'),
    });
  }


  //api call to get the community with the id from the route params.
  private getCommunity() {
    console.log("get community called")
    this.subscription = this.communityService.get(this.communityId!).subscribe({
      next: (v) => {
        console.log(v);
        this.community = v;
      },
      error: (e) => console.log("Error when Getting community"),
      complete: () => console.log('getting community complete (ui)'),
    });
  }
  
}

Answer 1

Adding the HttpClientTestingModule to your testsetup should fix the problem:

TestBed.configureTestingModule({
  imports: [HttpClientTestingModule, ...],
  ..
}).compileComponents();

Import from here:

import { HttpClientTestingModule } from '@angular/common/http/testing';