单元测试错误:无法从同步测试中调用 Promise.then

Question

我开始研究单元测试 angular 2 应用程序，但即使是最简单的例子，我也陷入困境。我只想运行一个简单的测试，看看它是否有效，基本上我想要的是将标题页中的值与测试中的值进行比较。

这是我遇到的错误，但我看不出错误来自哪里，因为一切对我来说看起来都是同步的。

错误：错误：无法从同步测试中调用 Promise.then。

单元测试：

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

我的组件：

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

将变量初始化移动到 beforeEach 中。

您 不应该 将 东西 从 TestBed 中取出 或 在 describe 范围内 管理 夹具 或 组 件。您应该只在测试运行范围内执行这些操作：在beforeEach/beforeAll、afterEach/afterAll 或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');
  });
});

参见

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

Answer 2

由于不同的原因，我遇到了同样的错误。我在describe块内放置了一个TestBed.get(Dependency)呼叫。修复是将其移动到it块。

错：

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

固定：

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