时间戳

首页 > 解决方案 > 失败：parentContexts.onChildOutletCreated 不是函数

angular - 失败：parentContexts.onChildOutletCreated 不是函数

问题描述

我一直在对应用程序进行单元测试，但遇到了似乎在任何地方都找不到的故障。我目前正在使用带有 Angular 9 的 Iconic 5。Jasmine 说：

StatisticsPage > should create
Failed: parentContexts.onChildOutletCreated is not a function
    at <Jasmine>
    at new IonRouterOutlet (http://localhost:9876/_karma_webpack_/node_modules/@ionic/angular/__ivy_ngcc__/fesm2015/ionic-angular.js:2723:1)
    at NodeInjectorFactory.IonRouterOutlet_Factory [as factory] (http://localhost:9876/_karma_webpack_/node_modules/@ionic/angular/__ivy_ngcc__/fesm2015/ionic-angular.js:2948:61)
    at getNodeInjectable (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:5993:1)
    at instantiateAllDirectives (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:12984:1)
    at createDirectivesInstances (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:12196:1)
    at Module.ɵɵelementStart (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:21289:1)
    at IonTabs_Template (http://localhost:9876/_karma_webpack_/node_modules/@ionic/angular/__ivy_ngcc__/fesm2015/ionic-angular.js:3081:30)
    at executeTemplate (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:12156:1)
    at renderView (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:11926:1)
    at renderComponent (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:13505:1)
Expected undefined to be truthy.
Error: Expected undefined to be truthy.
    at <Jasmine>
    at UserContext.<anonymous> (http://localhost:9876/_karma_webpack_/src/app/statistics/statistics/statistics.page.spec.ts:39:23)
    at ZoneDelegate.invoke (http://localhost:9876/_karma_webpack_/node_modules/zone.js/dist/zone-evergreen.js:364:1)
    at ProxyZoneSpec.onInvoke (http://localhost:9876/_karma_webpack_/node_modules/zone.js/dist/zone-testing.js:292:1)

这是 HTML 页面（如果我消除页脚的选项卡，问题就不会出现，所以这些都是罪魁祸首）

<ion-content>
<!-- HTML things happening here -->
<ion-content>

<ion-footer>

<ion-toolbar>
  <ion-tabs id='tabs'>
    <ion-tab-bar slot="bottom">
      <ion-tab-button (click)= "selectChart('personal')">
        <ion-icon name="person"></ion-icon>
        <ion-label>Personal statistics</ion-label>
      </ion-tab-button>
      <ion-tab-button>
        <ion-icon name="globe" (click)= "selectChart('national')"></ion-icon>
        <ion-label>National rates</ion-label>
      </ion-tab-button>
    </ion-tab-bar>
  </ion-tabs>
</ion-toolbar>
  
</ion-footer>

这是测试文件：

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

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ StatisticsPage ],
      imports: [IonicModule.forRoot(), RouterTestingModule],
      providers: [
        { provide: Storage, useClass: MockStorage },
        { provide: NavController, useClass: MockNavController },
        { provide: ChildrenOutletContexts, useClass: MockChildrenOutletContexts },
        { provide: ActivatedRoute, useClass: MockActivatedRoute },
        { provide: Router, useClass: MockRouter },
      ]
    }).compileComponents();

    fixture = TestBed.createComponent(StatisticsPage);
    component = fixture.componentInstance;
    fixture.detectChanges();
  }));

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

所有提供者都是按照茉莉花的要求创建的，但是当它结束要求注入时，我遇到了这个问题。我已经将它们中的大多数创建为空类，并根据需要添加了方法

标签： angularunit-testingionic-frameworkdependency-injectionjasmine

解决方案

终于想通了！所以，在测试文件中，应该提供“ChildrenOutletContexts”，但不要模拟！

providers: [
  { provide: Storage, useClass: MockStorage },
  { provide: NavController, useClass: MockNavController },
  { provide: ChildrenOutletContexts },
  { provide: ActivatedRoute, useClass: MockActivatedRoute },
  { provide: Router, useClass: MockRouter },
]

解决了一切！:)

推荐阅读