我正在用Jest测试我的Angular应用程序。下面是我的组件的简化模板：

<div *ngIf="viewInitialized">
  <button
    class="button"
    (click)="onLogoutClicked()"
  >
    {{ changeTokenText }}
  </button>
</div>

下面是该组件的简化代码：

@Component({
  selector: 'logout-qr-page',
  templateUrl: './logout.component.html',
  styleUrls: ['./logout.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class LogoutComponent implements OnInit, AfterViewInit {
  viewInitialized = false;

  constructor(
    ...
  ) {}

  ngOnInit(): void {
    ...
  }

  ngAfterViewInit(): void {
    ...
    this.viewInitialized = true;
  }

  onLogoutClicked(): void {
    ...
  }
}

我的测试是：

describe('TsdLogoutComponent', () => {
  let component: LogoutComponent;
  let fixture: ComponentFixture<LogoutComponent>;
  let debugElement: DebugElement;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [LogoutComponent],
      imports: [
       ...
      ],
      providers: [
       ...
      ],
    }).compileComponents();
  });

  beforeEach(() => {
    fixture = TestBed.createComponent(LogoutComponent);
    component = fixture.componentInstance;
    debugElement = fixture.debugElement;
    fixture.detectChanges();
  });

  it('should create the component', () => {
    expect(component).toBeTruthy();
  });

  it('should correctly render default state', () => {
    expect(component.viewInitialized).toBe(true); // PASS
    expect(debugElement.query(By.css('.button'))).not.toBeNull(); // FAIL
  });
});

所以你可以看到viewInitialized是true，但是没有类为button的元素。调用ViewInit后，它更改了值，但没有更新灯具。
我试过：

• 多次调用fixture.detectChanges()，只在测试内部调用（不在每次之前调用），在每次之前和测试中调用;
• 使用await fixture.whenStable()，与fixture.detectChanges()一起使用;
• 使用fixture.autoDetectChanges()。

什么起作用了：如果我手动执行component.viewInitialized = true（在测试中），如果我在组件中使用信号（viewInitialized = signal(false) => viewInitialized.set(true)），或者如果我在ngAfterViewInit中调用cdRef.detectChanges()，则测试开始通过。但我真的不想使用任何这些-在我的项目中，没有信号或cdRef，一切都能完美地工作，我希望它在测试中也能工作，或者至少我想了解这种行为的原因。