失败：parentContexts.onChildOutletCreated 不是函数

Question

我一直在对一个应用程序进行单元测试，但我运行遇到了一个我似乎无法在任何地方找到的失败。我目前正在使用 Iconic 5 和 Angular 9。茉莉花说：

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();
  });

所有的提供者都是按照 jasmine 的要求创建的，但是当它结束要求注入时，我运行进入了这个问题。我将其中大部分创建为空类并且我根据需要添加了方法

Answer 1

终于明白了！所以，在测试文件中，应该提供 "ChildrenOutletContexts"，但不要模拟！

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

一切都解决了！ :)

失败：parentContexts.onChildOutletCreated 不是函数

Failed: parentContexts.onChildOutletCreated is not a function

unit-testing

dependency-injection

jasmine

ionic-framework

angular