如何修复错误：断言错误：应在更新模式下运行 [预期=> false == true <=Actual]

Question

我正在用 ChangeDetectorRef 编写一个带有角度的代码

功能本身运行良好。

getVersionInfos() {
concat(
  of(
    this.getApiSubs = this.aboutInfoService.getApiVersion().subscribe((data) => {
      if (data) {
        this.apiData = data;
        this.applicationCopyright = data.find(dt => dt.Name === "Web API Details").Value;          }
    })
  ),
  of(
    this.getEngineSubs = this.aboutInfoService.getEngineVersion().subscribe((data) => {
      if (data) {
        this.engineData = data;
        this.engineDetails = data.find(dt => dt.itemcode === "VER").versiontext;
        this.cd.detectChanges();
      }
    })
  )
);

}

当我为其编写单元测试代码时，它一直失败

        this.cd.detectChanges();

这给了我这个错误

错误：断言错误：应在更新模式下运行 [预期=> false == true <=Actual]

这是规范代码块

beforeEach(async(() => {
TestBed.configureTestingModule({
  declarations: [
    AboutComponent
  ],
  imports: [
    MatBottomSheetModule,
    HttpClientTestingModule
  ],
  providers: [
    {
      provide: AboutInfoService,
      useValue: jasmine.createSpyObj("AboutInfoService", [
        "getApiVersion",
        "getEngineVersion"
      ]),
    },
    {
      provide: ChangeDetectorRef,
      useValue: jasmine.createSpyObj("ChangeDetectorRef", ["detectChanges"])
    }
  ]
})
.compileComponents();

aboutInfoService = TestBed.get(AboutInfoService);
aboutInfoService.getApiVersion.and.returnValue(of(mockApiResponse));
aboutInfoService.getEngineVersion.and.returnValue(of(mockEngineResponse));



}));

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

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

如果我删除代码

        this.cd.detectChanges();

从函数来看它将通过单元测试

Answer 1

我一切顺利，

我已将函数 getVersionInfos 放在 ngOnInit 中，而不是放在构造函数中

Answer 2

我在 Angular 11 中也遇到了这个错误。问题是我正在执行：

this.cdr.detectChanges();

在构造函数内部，这是错误的。我把它移到了 ngOnInit()

Answer 3

避免在构造函数或将从构造函数调用的方法中保留

this._changeDetectorRef.detectChanges()

方法调用。在这两种情况下，Angular 都会抛出此错误。

Answer 4

确保包含您的组件中使用的任何自定义组件。 只需在 .spec.ts 的声明中包含子组件名称（当然还有导入）。

Answer 5

我也注意到了这个问题，这个问题主要是因为 Angular cli 版本冲突，我有

11.1.2

的 Angular cli 版本，我已经降级到

11.0.7

并且它对我有用。

就我而言，这个问题导致 UI 无法正确加载。

正如我看到其他答案，将函数或代码从

Constructor

移动到

ngOnInit

并不是一个好的选择，这只是 cli 版本兼容性的问题。