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

如果您不自行测试提供程序，则必须嘲笑提供程序。在您的导入的正下方，为存储创建了一个模拟类

class MockStorage {}

然后

{provide: Storage, useClass: MockStorage}

然后获取服务实例

let mockStorage = TestBed.get(Storage)

同样，您不需要在TestBed中导入实际的Router，而是使用angular提供的RouterTestingModule。

为避免模板错误而避免模板错误，请使用NO_ERRORS_SCHEMA

import { NO_ERRORS_SCHEMA } from '@angular/core'

并将其包含在TestBed的schemas数组中

Answer 2

您不应使用

providers: [ { provide: InjectableClass } ]

使用：

providers: [ InjectableClass ]

相反。

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

例如，如果要模拟依赖，则需要使用provide对象。

因果关系没有提供存储的提供商，但是已添加

2 个答案: