TypeError{ngDebugContext in Angular tests

7
votes

This unit test 

 it('should invoke copy method', fakeAsync(() => {
    spyOn(testClipboardService, 'copy');
    linkEl = fixture.debugElement.query(By.css('.mat-raised-button')).nativeElement;
    linkEl.click();
    expect(testClipboardService.copy).toHaveBeenCalled();
  }));

it successfully passed but in console I have an error which provoked this line:

linkEl.click();

I don't understand why

'ERROR', TypeError{ngDebugContext: DebugContext_{view: Object{def: ..., parent: ..., viewContainerParent: ..., parentNodeDef: ..., context: ..., component: ..., nodes: ..., state: ..., root: ..., renderer: ..., oldValues: ..., disposables: ..., initIndex: ...}, nodeIndex: 0, nodeDef: Object{nodeIndex: ..., parent: ..., renderParent: ..., bindingIndex: ..., outputIndex: ..., checkIndex: ..., flags: ..., childFlags: ..., directChildFlags: ... etc

Thanks in advance

4
angularunit-testingjasmine
@Jacques Can you provide more information? – yurzui
Please update the question with the exception details and stack trace. Also some code that you used would be best – Tarun Lalwani
@yurzui Actually, I'm not really sure what causes this at all. I just know that I see it in the logs while my tests are running, and they annoy me. I found this, and a couple other questions on other sites with the same error, but there are no answers. That's why I put a bounty on it. – Jacques ジャック
You can find the whole description of your error in chrome console – yurzui
@Jacques How can we reproduce your issue? Do you have prepared minimal example? – yurzui

4 Answers

3
votes

In my case, I was able to get rid of the error by adding the NoopAnimationsModule to my imports when configuring testbed. Based on what I found, you are probably missing an import when running your tests.

Example:

beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ MyAwesomeComponent ],
      imports: [
        NoopAnimationsModule, // I had to add this
        FormsModule,
        RouterTestingModule
      ]
    })
    .compileComponents();
  }));
1
votes

Possible problem is in spyOn(testClipboardService, 'copy') which is set after first fixtures.detectChanges(). Can you check if you are doing first detectChanges in beforeEach? If yes, you should 'take out' all spies before first detectChanges.

0
votes

For me the error also had to do with imports it seems. I used matSort in the function that was called when the button was clicked. When I added: 

import { MatSort } from '@angular/material';

to my spec.ts file the error went away.

0
votes

I also had this error because I forgot to return an observable from a mocked out function that was subscribed to by my code.

e.g. I had

identityService = {authenticate: jasmine.createSpy()};
// ... 
// call function that includes code like this identityService.authenticate().subscribe( ...
// ... The error is logged

I replaced it with

identityService = {authenticate: jasmine.createSpy()};
identityService.authenticate.and.returnValue(
  of({})
);
//... 
// call function that includes code like this identityService.authenticate().subscribe( ...