angular - Angular 6 で app/root コンポーネントをテストする方法

Question

最近、アプリ コンポーネントに関連するテスト ケースが 2 件失敗しました。fixture.detectChanges()テストケースを使用すると、エラーで失敗しました"ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'isValid: undefined'. Current value: 'isValid: true'"。

fixture.detectChanges()app コンポーネントでは正しく動作しないようです。

ここに私のスペックファイルがあります:

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

// Component
import { AppComponent } from './app.component';
import { HeaderComponent } from './components/header/header.component';
import { EmployerInfoComponent } from './components/employer-info/employer-info.component';
import { PayrollInfoComponent } from './components/payroll-info/payroll-info.component';
import { DashboardComponent } from './components/dashboard/dashboard.component';
import { FooterComponent } from './components/footer/footer.component';
import { ProgressJourneyContainerComponent } from './components/progress-journey-container/progress-journey-container.component';
import { StartReportComponent } from './components/start-report/start-report.component';
import { ReportInfoComponent } from './components/report-info/report-info.component';
import { ReportPayrollComponent } from './components/report-payroll/report-payroll.component';

// Module
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { ProgressJourneyModule } from './modules/progress-journey/progress-journey.module';
import { HttpClientModule } from '@angular/common/http';
import { Ng2Webstorage } from 'ngx-webstorage';

// Service
import { EmployerService } from './services/employer/employer.service';
import { PayrollInfoService } from './services/payroll-info/payroll-info.service';
import { DashboardService } from './services/dashboard/dashboard.service';
import { UiConfigService } from './services/ui-config/ui-config.service';
import { MockUiConfigService } from './services/ui-config/mock-uiconfig.service';
import { EmployerCuService } from './services/employer-cu/employer-cu.service';
import { LoggerService } from './services/logger.service';

// Service Mock
import { MockDashboardService } from './services/dashboard/mock-dashboard.service';
import { MockPayrollInfoService } from './services/payroll-info/mock-payrollinfo.service';
import { MockEmployerService, mockEmployer } from './services/employer/mock-employer.service';
import { AppModule } from './app.module';

describe('AppComponent', () => {
  let comp: AppComponent;
  let fixture: ComponentFixture<AppComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        AppModule
      ],
      providers: [
        {
          provide: UiConfigService,
          useClass: MockUiConfigService
        },
        {
          provide: EmployerService,
          useClass: MockEmployerService
        },
        {
          provide: DashboardService,
          useClass: MockDashboardService
        },
        {
          provide: PayrollInfoService,
          useClass: MockPayrollInfoService
        }
      ],
      declarations: []
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(AppComponent);
    comp = fixture.componentInstance;
  });

  it('should return employer data', () => {
    // fixture.detectChanges();
    comp.ngOnInit();
    expect(comp.empData).toEqual(mockEmployer);
  });

  it('should render header', () => {
    fixture.detectChanges();
    // expect(fixture.nativeElement.textContent).toContain('Exit');
  });
});

これが私のアプリコンポーネントです:

import { Component, OnInit } from '@angular/core';
import { UiConfigService } from './services/ui-config/ui-config.service';
import { EmployerService } from './services/employer/employer.service';
import { LoggerService } from './services/logger.service';
import { LocalStorageService } from 'ngx-webstorage';
import { LocalDataService } from './services/local-data/local-data.service';
import { EmployerModel } from './models/employer.model';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
  providers: [LocalDataService]
})

export class AppComponent implements OnInit {
  title = 'Reporting annual payroll';
  exitUrl: string;
  empData: EmployerModel = new EmployerModel;
  isStartReport: boolean;

  constructor(
    private uiConfigService: UiConfigService,
    private employerService: EmployerService,
    private loggerService: LoggerService,
    private localStorageService: LocalStorageService,
    private localDataService: LocalDataService
  ) {}

  ngOnInit() {
    this.loggerService.log('started calling getEmployer');

    this.uiConfigService.getUiConfig().subscribe(data => {
      this.exitUrl = data.exitUrl;
    });

    this.employerService.getEmployer().subscribe(data => {
      this.empData = data;
    });
    this.loggerService.log('finished calling getEmployer');

    this.localDataService.getJSON().subscribe(data => {
      this.localStorageService.store('staticData', data);
    });
  }

  startReportChanged(data: boolean) {
    this.isStartReport = data;
  }
}

失敗したメッセージは次のとおりです。

コードは非常に簡単です。現在、「ヘッダーをレンダリングする必要がある」というテスト ケース コールをデバッグしています。すべてのモック データと関数は明確に定義されています。なぜこのように失敗したのかわかりません。

助けてください。また、ルート コンポーネントをテストするための提案や修正を教えてください。

前もって感謝します！