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

Unit test error: Cannot call Promise.then from within a sync test

提问by Proxy

I started looking into unit testing angular 2 applications, but I'm stuck even in the simplest examples. I just want to run a simple test to see if it even works, basically what I want is to compare a value from the title page to the one in the test.

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

This is the error I'm getting, but I don't see where the error is coming from since everything looks to be synchronous to me.

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

Error: Error: Cannot call Promise.then from within a sync test.

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

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

}

回答by yurzui

Move your variable initialization inside a beforeEach.

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

You shouldn't be getting things out of the TestBed or managing the fixture or component in the describescope. You should only do these things within the scope of a test run: inside a beforeEach/beforeAll, afterEach/afterAll, or inside an it.

您不应该从 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');
  });

});

See also

也可以看看

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

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

回答by Nathan Hanna

I got the same error for a different reason. I put a TestBed.get(Dependency)call within a describeblock. The fix was moving it to the itblock.

由于不同的原因，我遇到了同样的错误。我TestBed.get(Dependency)在一个describe块内打了一个电话。解决方法是将其移动到it块中。

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