Angular Unit Test with ChangeDetectionStrategy.OnPush doesn't work

Question

I've got this simple component.

@Component({
  changeDetection: ChangeDetectionStrategy.OnPush,
  selector: 'app-spinner',
  template: `
    <ng-container *ngIf="loading; else valueTpl">
      <strong>loading....</strong>
    </ng-container>
    <ng-template #valueTpl>
      <span>{{ value }}</span>
    </ng-template>
  `
})
export class SpinnerComponent {
  @Input() loading = false;
  @Input() value!: string;
}

in the running up it works nice but when I go to test the test fails

it('should show spinner when loading true', () => {
    component.loading = true;
    fixture.detectChanges();
    const strong = debugElement.query(By.css('strong'));
    const el: HTMLElement = strong.nativeElement;
    expect(el).not.toBeNull();
  });

Whats the right way to test component with ChangeDetectionStrategy.OnPush?

UPDATE

Waiting in a better solution I worked it out with:

beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [SpinnerComponent]
    })
      .overrideComponent(SpinnerComponent, {
        set: { changeDetection: ChangeDetectionStrategy.Default }
      })
      .compileComponents();
  }));

Answer 1

What works is to override component's changeDetection to default AND provide ComponentFixtureAutoDetect as true.

beforeEach(async(() => {
  TestBed.configureTestingModule({
    declarations: [SpinnerComponent],
    providers: [
      {provide: ComponentFixtureAutoDetect, useValue: true}
    ]
  })
  .overrideComponent(SpinnerComponent, {
    set: { changeDetection: ChangeDetectionStrategy.Default }
  })
  .compileComponents();

  fixture = TestBed.createComponent(SpinnerComponent);
  component = fixture.componentInstance;
}));

Now fixture.detectChanges() should work in the tests.

Answer 2

The best way is to provide TestingHostComponent that wraps a component you want to test:

@Component({
  template: `<app-spinner [loading]="loading"></app-spinner>`
})
class TestHostComponent {
  @ViewChild(SpinnerComponent, { static: true }) spinnerComponent?: SpinnerComponent;

  loading?: boolean;
}

Answer 3

I've tried many ways (including @Tschonner's answer) but none of them worked well. Finally, I got this working with the followings, using runOnPushChangeDetection(fixture) instead of fixture.detectChanges():

export async function runOnPushChangeDetection<T>(cf: ComponentFixture<T>) {
  const cd = cf.debugElement.injector.get<ChangeDetectorRef>(
    // tslint:disable-next-line:no-any
    ChangeDetectorRef as any
  );
  cd.markForCheck();
  cd.detectChanges();
  await cf.whenStable();
  return;
}

...

beforeEach(async() => {
    await TestBed.configureTestingModule({
        imports: [
            IonicModule.forRoot()
        ],
        declarations: [ LoaderComponent ],
    })
    .overrideComponent(LoaderComponent, {
        set: { changeDetection: ChangeDetectionStrategy.Default }
    })
    .compileComponents();

    fixture = TestBed.createComponent(LoaderComponent);
    component = fixture.componentInstance;
});

it('should ...', async() => {
    component.prop = true;
    await runOnPushChangeDetection(fixture);

    const debugElement: DebugElement = fixture.debugElement;
    const compiled = debugElement.nativeElement;
    const img = debugElement.query(By.css('img'));
    expect(img).toBeDefined();
    ...
});