Providing/Injecting third party service to component while angular component unit testing

问题

I have just started with Angular Unit testing, LoginComponent is dependent on third party module's (Fuse) service FuseConfigService.

Here is how FuseConfigService look like

@Injectable({
    providedIn: 'root'
})
export class FuseConfigService
{
    private _configSubject: BehaviorSubject<any>;
    private readonly _defaultConfig: any;

    /**
     * Constructor
     *
     * @param {Platform} _platform
     * @param {Router} _router
     * @param _config
     */
    constructor(
        private _platform: Platform,
        private _router: Router,
        @Inject(FUSE_CONFIG) private _config
    )
    {

And here is how LoginComponent constructor look like

constructor(
        private fuseConfig: FuseConfigService,
        private formBuilder: FormBuilder,
        private router: Router,
        private authenticationService: AuthService,
        private route: ActivatedRoute,
        private snackBar: MatSnackBar,
        private fuseNavigationService: FuseNavigationService,
        private pbiService: PbiService,
        private translateService: TranslateService
    ) {
        this.incorrectCredentials = false;
        this.loginFormErrors = {
            email: {},
            password: {},
        };
    }

I don't know how to configure testing module using TestBed, as it is throwing error like

Error: StaticInjectorError(DynamicTestModule)[FuseConfigService -> InjectionToken fuseCustomConfig]: 
  StaticInjectorError(Platform: core)[FuseConfigService -> InjectionToken fuseCustomConfig]: 
    NullInjectorError: No provider for InjectionToken fuseCustomConfig!

This is what I am trying

TestBed.configureTestingModule({
            declarations: [LoginComponent],
            imports: [FormsModule, ReactiveFormsModule, MatFormFieldModule,
                MatInputModule,
                MatCheckboxModule,
                MatSnackBarModule,
                MatButtonModule,
                MatRadioModule],
            providers: [
                FuseConfigService,
                { provide: Router, useClass: class { navigate = jasmine.createSpy("navigate"); } },
                FuseNavigationService
            ]
        });

Any help will be appreciated.

回答1:

The problem is that you use the original FuseService.
And that FuseService has dependencies. That means you would have to provide them also. And their dependencies. And theirs. And so on.

Therefor it would be a good practice to mock that service away.

For Services that are "providedIn: root", this could be done like that:

 TestBed.overrideProvider(OriginalService, {useValue: new MockService()});

Just add that before you configure your TestBed.

The "MockService" needs all public methods / variables that you are using in your component.

来源：https://stackoverflow.com/questions/57524902/providing-injecting-third-party-service-to-component-while-angular-component-uni