自定义 Pipe 在运行单元测试时导致 ExpressionChangedAfterItHasBeenCheckedError

Question

In my template I have this:

...
<tbody>
  <ng-container *ngFor="let item of items">
    <tr *ngIf="item.isBoolean">
      <td><a href="#">{{item.description}}</a></td>
      <td>{{item | customPipe}}</td>
    </tr>
  </ng-container>
</tbody>
...

And this is my unit test:

it('should behave...', () => {
  const trs: DebugElement[] = fixture.debugElement.queryAll(By.css('tbody tr'));

  expect(trs.length).toBeGreaterThan(0);
});

When I execute the test, I get the following:

Error: NG0100: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'value'. Current value: 'undefined'.. Find more at https://angular.io/errors/NG0100
error properties: Object({ code: '100' })
Error: NG0100: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'value'. Current value: 'undefined'.. Find more at https://angular.io/errors/NG0100
    at throwErrorIfNoChangesMode (node_modules/@angular/core/fesm2015/core.js:6723:1)
    at bindingUpdated (node_modules/@angular/core/fesm2015/core.js:12854:1

That value is what the customPipe returns.

Answer 1

I faced this issue today during testing my Angular app through Jasmine . Please check the code snippet below which solved my problem (courtesy: https://www.codegrepper.com ).

import { ChangeDetectorRef, AfterContentChecked } from '@angular/core';
constructor(private ref: ChangeDetectorRef){}

  ngAfterContentChecked() {
    this.ref.detectChanges();
  }