how to fix Error: ASSERTION ERROR: Should be run in update mode [Expected=> false == true <=Actual]

Question

Im writing a code with in angular with ChangeDetectorRef

The function itself is working fine.

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();
      }
    })
  )
);

}

When i wrote the Unit Test code for it keeps on failing on the

        this.cd.detectChanges();

which gives me this error

Error: ASSERTION ERROR: Should be run in update mode [Expected=> false == true <=Actual]

and this is the spec code block

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();
  });

if i remove the code

        this.cd.detectChanges();

from the function it will pass the unit test

Do you call the `getVersionInfos` function inside the component's constructor? — Shalom Peles, Jan 14 '21 at 08:46
thank you, i changed the location of the function and placed it on ngOnInit @shalom — nhoyti, Jan 19 '21 at 01:53

score 59 · Accepted Answer · answered Jan 15 '21 at 06:26

59

I got it all working,

I have placed the function getVersionInfos in the ngOnInit instead of inside the constructor

answered Jan 15 '21 at 06:26

nhoyti

1,615
2
26
42

score 31 · Answer 2 · answered Mar 28 '21 at 16:56

31

I've this error too in Angular 11. The problem was that I was executing:

this.cdr.detectChanges();

Inside the constructor, that is wrong. I moved It to ngOnInit()

answered Mar 28 '21 at 16:56

Martin Muñoz

436
4
6

score 18 · Answer 3 · answered Aug 19 '21 at 14:00

18

Avoid keeping this._changeDetectorRef.detectChanges() method call in the constructor or in the method which will get called from the constructor. Angular will throw this error in both cases.

answered Aug 19 '21 at 14:00

Sumit Tawal

379
1
4
9

any explanation why? – Waleed Ahmad Apr 05 '23 at 06:02

score 0 · Answer 4 · answered Dec 09 '22 at 21:27

0

Make sure to include any custom components used in your component. Just include the child component name in declarations in your .spec.ts (along with an import of course).

answered Dec 09 '22 at 21:27

Vahe Aslanyan

76
1
4

score 0 · Answer 5 · edited Aug 24 '23 at 10:37

I Noticed this issue too, this issue is mostly because of conflict in angular cli version, i had the angular cli version of 11.1.2, i have downgraded to 11.0.7 and it worked for me.

In my case, this issue was causing the UI to not to load properly.

As i saw other answers, moving the functions or code from Constructor to ngOnInit is not the good option, it just the matter of cli version compatibility.

how to fix Error: ASSERTION ERROR: Should be run in update mode [Expected=> false == true <=Actual]

5 Answers5