Mocking service in a component - mock ignored Mocking service in a component - mock ignored angular angular

Mocking service in a component - mock ignored


It's because of

@Component({  providers: [FundingPlanService] <===})

The @Component.providers takes precedence over any global providers, since using the @Component.providers makes the provider scoped only to the component. In the test, Angular creates the mocked service in the module scope and the original service in the component scope.

To solve this problem, Angular provides the TestBed.overrideComponent method, where we can override things like templates and providers at the component level.

TestBed.configureTestingModule({  declarations: [FundingPlanComponent]});TestBed.overrideComponent(FundingPlanComponent, {  set: {    providers: [      { provide: FundingPlanService, useClass: FundingPlanServiceMock },    ]  }})

See also: