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: