javascript - Karma 没有存储提供程序，但已添加

Question

我有以下 spec.ts 文件:

import {CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';
import {async, ComponentFixture, TestBed} from '@angular/core/testing';

import {OnboardingSliderComponent} from './onboarding-slider.component';
import {IconPipe} from "@shared/pipes/icon/icon.pipe";
import {ActivatedRoute, Router} from "@angular/router";
import {TextService} from "@core/services/text/text.service";
import {Platform} from "@ionic/angular";
import {Storage} from "@ionic/storage";

describe('OnboardingSliderComponent', () => {
    let component: OnboardingSliderComponent;
    let fixture: ComponentFixture<OnboardingSliderComponent>;

    beforeEach(async(() => {
        TestBed.configureTestingModule({
            providers: [{
                provide: TextService,
            }, {provide: Platform}, {provide: Router}, {provide: ActivatedRoute}, {provide: Storage}
            ],
            declarations: [OnboardingSliderComponent, IconPipe],

            schemas: [CUSTOM_ELEMENTS_SCHEMA],
        },)
            .compileComponents();
    }));

    beforeEach(() => {
        fixture = TestBed.createComponent(OnboardingSliderComponent);
        component = fixture.componentInstance;
        fixture.detectChanges();
    });

    it('should create', () => {
        expect(component).toBeTruthy();
    });
});

如您所见，应包含 Storage 提供程序，但我仍然收到错误消息:

    Error: StaticInjectorError(DynamicTestModule)[Storage]:
    StaticInjectorError(Platform: core)[Storage]:
    NullInjectorError: No provider for Storage!
    at NullInjector.push../node_modules/@angular/core/fesm5/core.js.NullInjector.get (node_modules/@angular/core/fesm5/core.js:8896:1)
    at resolveToken (node_modules/@angular/core/fesm5/core.js:9141:1)
    at tryResolveToken (node_modules/@angular/core/fesm5/core.js:9085:1)
    at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (node_modules/@angular/core/fesm5/core.js:8982:1)
    at resolveToken (node_modules/@angular/core/fesm5/core.js:9141:1)
    at tryResolveToken (node_modules/@angular/core/fesm5/core.js:9085:1)
    at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (node_modules/@angular/core/fesm5/core.js:8982:1)
    at resolveNgModuleDep (node_modules/@angular/core/fesm5/core.js:21218:1)
    at NgModuleRef_.push../node_modules/@angular/core/fesm5/core.js.NgModuleRef_.get (node_modules/@angular/core/fesm5/core.js:21907:1)
    at injectInjectorOnly (node_modules/@angular/core/fesm5/core.js:1774:1)
Expected undefined to be truthy.
    at UserContext.<anonymous> (src/app/shared/components/splash-screen/splashScreen.component.spec.ts:25:23)
    at ZoneDelegate../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (node_modules/zone.js/dist/zone.js:391:1)
    at ProxyZoneSpec.push../node_modules/zone.js/dist/zone-testing.js.ProxyZoneSpec.onInvoke (node_modules/zone.js/dist/zone-testing.js:289:1)
    at ZoneDelegate../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (node_modules/zone.js/dist/zone.js:390:1)

Answer 1

你不应该使用

providers: [ { provide: InjectableClass } ]

用途:

providers: [ InjectableClass ]

相反。

以下是完整示例:https://stackblitz.com/edit/angular-twq2h9 。您可以测试这两个选项。

例如，如果您想要模拟依赖项，则需要使用提供对象。