Angular Unit Tests Fail with NullInjectorError: No Provider for Store and HttpClient

I have app.module.ts

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { FontAwesomeModule } from "@fortawesome/angular-fontawesome";
import { SharedModule } from "@shared/shared.module";
import { AppComponent } from "@app/app.component";
import { CourseInfoComponent } from "@features/course-info/course-info.component";
import { NotAuthorizedGuard } from "@app/auth/guards/not-authorized.guard";
import { AuthorizedGuard } from "@app/auth/guards/authorized.guard";
import { CoursesStoreService } from "@app/services/courses-store.service";
import { CoursesService } from "@app/services/courses.service";
import { CoursesComponent } from "./features/courses/courses.component";
import { CoursesListComponent } from "./features/courses/courses-list/courses-list.component";
import { AppRoutingModule } from "./app-routing.module";
import { HTTP_INTERCEPTORS, HttpClientModule } from "@angular/common/http";
import { WindowRefService } from "./shared/provides/window.provider";
import { TokenInterceptor } from "./auth/interceptors/token.interceptor";
import { StoreModule } from "@ngrx/store";
import { EffectsModule } from "@ngrx/effects";
import { effects, reducers } from "./store/courses";
import { CoursesFacade } from "./store/courses/courses.facade";
import { CoursesEffects } from "./store/courses/courses.effects";

@NgModule({
declarations: [
AppComponent,
CourseInfoComponent,
CoursesComponent,
CoursesListComponent,
],
imports: [
BrowserModule,
SharedModule,
FontAwesomeModule,
AppRoutingModule,
HttpClientModule,
StoreModule.forRoot(reducers),
EffectsModule.forRoot(effects),
],
providers: [
AuthorizedGuard,
NotAuthorizedGuard,
CoursesService,
CoursesStoreService,
WindowRefService,
HttpClientModule,
CoursesFacade,
CoursesEffects,
{
provide: HTTP_INTERCEPTORS,
useClass: TokenInterceptor,
multi: true,
},
],
bootstrap: [AppComponent],
})
export class AppModule {}


and shared module

import { NgModule } from "@angular/core";
import { CommonModule } from "@angular/common";
import { FontAwesomeModule } from "@fortawesome/angular-fontawesome";
import { ModalComponent } from "./components/modal/modal.component";
import {
HeaderComponent,
ButtonComponent,
InfoComponent,
SearchComponent,
CourseCardComponent,
LoginFormComponent,
RegistrationFormComponent,
CourseFormComponent,
} from "./components";
import { FormsModule, ReactiveFormsModule } from "@angular/forms";
import { DurationPipe } from "./pipes/duration.pipe";
import { CustomDatePipe } from "./pipes/custom-date.pipe";
import { EmailValidatorDirective } from "@shared/directives/email.directive";

const components = [
HeaderComponent,
ButtonComponent,
InfoComponent,
SearchComponent,
ModalComponent,
CourseCardComponent,
LoginFormComponent,
RegistrationFormComponent,
CourseFormComponent,
DurationPipe,
CustomDatePipe,
EmailValidatorDirective,
];

@NgModule({
declarations: [components],
imports: [CommonModule, FontAwesomeModule, FormsModule, ReactiveFormsModule],
exports: [components],
})
export class SharedModule {}


The app is working fine, but when i run the tests, i got 0 score and error messages:

Details:NullInjectorError: R3InjectorError(DynamicTestModule)[CoursesFacade -> Store -> Store]: NullInjectorError: No provider for Store! at NullInjector.get (/autocode/5ce10ff9-8a91-4e7a-bec5-464985f1b430/repository/node_modules/@angular/core/fesm2020/core.mjs:7493:27) at R3Injector.get (/autocode/5ce10ff9-8a91-4e7a-bec5-


and

NullInjectorError: R3InjectorError(DynamicTestModule)[CoursesService -> HttpClient -> HttpClient]: NullInjectorError: No provider for HttpClient! at NullInjector.get (/autocode/5ce10ff9-8a91-4e7a-bec5-464985f1b430/repository/node_modules/@angular/core/fesm2020/core.mjs:7493:27) at


Since this is autocode check, i dont have access to the code of these test. I cant change the tests. But i dont really understand, where do these errors come from and how to fix it, since the app is working fine.

Continue reading...