Unit test Error: Unable to call Promise.then from synchronization test

Question

I started learning unit testing angular 2 applications, but got stuck in even the simplest examples. I just want to run a simple test to see if it works at all. In general, I want to compare the value from the title page with the one in the test.

This is the error I get, but I don’t see where the error comes from, because everything looks synchronous to me.

Error: Error: Unable to call Promise.then from the synchronization test.

Unit test:

import { ComponentFixture, TestBed } from '@angular/core/testing'; import { By } from '@angular/platform-browser'; import { DebugElement, Input} from '@angular/core'; import { ToDoComponent } from './todo.component'; import { FormsModule } from '@angular/forms'; describe(("test input "),() => { let comp: ToDoComponent; let fixture: ComponentFixture<ToDoComponent>; let de: DebugElement; let el: HTMLElement; beforeEach(() => { TestBed.configureTestingModule({ declarations: [ ToDoComponent ], imports: [ FormsModule ] }) .compileComponents(); }); fixture = TestBed.createComponent(ToDoComponent); comp = fixture.componentInstance; de = fixture.debugElement.query(By.css("h1")); el = de.nativeElement; it('should display a different test title', () => { comp.pageTitle = 'Test Title'; fixture.detectChanges(); expect(el.textContent).toBe('Test Title423'); }); }); 

My component:

 import {Component} from "@angular/core"; import {Note} from "app/note"; @Component({ selector : "toDoArea", templateUrl : "todo.component.html" }) export class ToDoComponent{ pageTitle : string = "Test"; noteText : string =""; noteArray : Note[] = []; counter : number = 1; removeCount : number = 1; addNote() : void { if (this.noteText.length > 0){ var a = this.noteText; var n1 : Note = new Note(); n1.noteText = a; n1.noteId = this.counter; this.counter = this.counter + 1; this.noteText = ""; this.noteArray.push(n1); } } removeNote(selectedNote : Note) :void{ this.noteArray.splice(this.noteArray.indexOf(selectedNote),this.removeCount); } } 

Answer 1

Move the initialization of your variable to beforeEach.

You should not get things from TestBed or control a fixture or component in the describe . You should only do this as part of a test run: inside beforeEach / beforeAll , afterEach / afterAll or inside it .

 describe(("test input "), () => { let comp: ToDoComponent; let fixture: ComponentFixture<ToDoComponent>; let de: DebugElement; let el: HTMLElement; beforeEach(async(() => { TestBed.configureTestingModule({ declarations: [ToDoComponent], imports: [FormsModule] }) .compileComponents(); })); beforeEach(() => { fixture = TestBed.createComponent(ToDoComponent); comp = fixture.componentInstance; de = fixture.debugElement.query(By.css("h1")); el = de.nativeElement; }) it('should display a different test title', () => { comp.pageTitle = 'Test Title'; fixture.detectChanges(); expect(el.textContent).toBe('Test Title423'); }); }); 

see also

• https://angular.io/docs/ts/latest/guide/testing.html#!#waiting-compile-components

Answer 2

I got the same error for another reason. I put TestBed.get(Dependency) in the describe block. The fix moved him to the it block.

Wrong:

 describe('someFunction', () => { const dependency = TestBed.get(Dependency); // this was causing the error it('should not fail', () => { someFunction(dependency); }); }); 

Fixed:

 describe('someFunction', () => { it('should not fail', () => { const dependency = TestBed.get(Dependency); // putting it here fixed the issue someFunction(dependency); }); });