在角度组件单元测试时向组件提供/注入第三方服务答案

【问题标题】：Providing/Injecting third party service to component while angular component unit testing在角度组件单元测试时向组件提供/注入第三方服务
【发布时间】：2019-12-22 19:03:28
【问题描述】：

我刚刚开始进行 Angular 单元测试，LoginComponent 依赖于第三方模块的 (Fuse) 服务 FuseConfigService。

这是FuseConfigService 的样子

@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
    )
    {

这就是LoginComponent constructor 的样子

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: {},
        };
    }

我不知道如何使用 TestBed 配置测试模块，因为它会抛出类似的错误

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

这就是我正在尝试的

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

任何帮助将不胜感激。

【问题讨论】：

你为什么使用 real FuseConfigService 来测试你的组件？如果您要使用它，正如消息告诉您的那样，您还需要提供 its 依赖项。

标签： angular unit-testing dependency-injection karma-jasmine

【解决方案1】：

问题是你使用的是原来的 FuseService。
而且那个 FuseService 有依赖关系。这意味着您也必须提供它们。以及它们的依赖关系。还有他们的。以此类推。

因此，模拟该服务是一个好习惯。

对于“providedIn:root”的服务，可以这样做：

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

只需在配置 TestBed 之前添加即可。

“MockService”需要您在组件中使用的所有公共方法/变量。

【讨论】：