ExpressionChangedAfterItHasBeenCheckedError when testing Angular Material Table

Question

Using Angular 7 I added material table to my application with ng generate @angular/material:table test-table

Inside the generated template there is a paginator:

<mat-paginator #paginator
    [length]="dataSource.data.length"
    [pageIndex]="0"
    [pageSize]="50"
    [pageSizeOptions]="[25, 50, 100, 250]">
</mat-paginator> 

On init the datasource is changed:

ngOnInit() {
  this.dataSource = new ItemsTableDataSource(
    this.paginator,
    this.sort,
    this.route.paramMap,
    this.afs
 );
}

When trying to compile the component on Karma expect(component).toBeTruthy(); I'm getting the following error

Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has 
changed after it was checked. Previous value: 'length: 0'. Current 
value: 'length: 1'.

How can I solve this issue?

Answer 1

Not sure how kosher it is but in my case I simply removed the 'fixture.detectChanges()' call from the spec file. I am working with an A6 ReactiveForm, setting some initial dummy date range values in the test. The form works fine but the test failed with your error.