原因：undefined不是angular 2 karma test中的构造函数

我见过同样的问题，但对我没有帮助

我不熟悉角2业力测试。我试着测试一个简单的组件，它有一个标题、一个输入框和一个按钮

我从angular.io学习了karma测试的基础知识，并尝试测试输入框中包含的值是否正确。但是当我试图在测试中获取输入元素时，出现了错误“null不是对象”

为了解决这个错误，我在fixture.whenStable（）中给出了它，但现在出现了错误“undefined不是构造函数”。我不知道为什么会这样。下面是我的组件spec.ts的html文件

谢谢

在banner.component.html中

  <h1 id="titleId" class="titleClass">{{title}}</h1>
  <input id="inputId" type="text" *ngIf="name!==undefined" [(ngModel)]="name"/>
  <button id="btnId" type="button" >Click Me!</button>

在banner.component.spec.ts中

class AlternativeDetailsServiceSpy {
    getAlternativeDetails = jasmine.createSpy("getAlternativeDetails").and.callFake(() =>
        Promise.resolve(true).then(() => Object.assign({}, {})));
}

describe("BannerComponent", () => {

    let comp: BannerComponent;
    let fixture: ComponentFixture<BannerComponent>;
    let de;
    let el;
    let input;
    let inputEl;
    let spy: AlternativeDetailsServiceSpy;

    // async beforeEach
    beforeEach(async(() => {
        TestBed.configureTestingModule({
            imports: [FormsModule],
            declarations: [BannerComponent], // declare the test component
            providers: [{ provide: AbcService, useValue: {} }]
        }).overrideComponent(BannerComponent, {
            set: {
                providers: [
                    { provide: AbcService, useClass: AbcServiceSpy }
                ]
            }
        }).compileComponents();  // compile template and css
    }));


    // synchronous beforeEach
    beforeEach(() => {
        let hdsSpy: AbcServiceSpy ;

        fixture = TestBed.createComponent(BannerComponent);
        comp = fixture.componentInstance; // BannerComponent test instance
        hdsSpy = fixture.debugElement.injector.get(AbcService);
        // query for the title <h1> by CSS element selector
        de = fixture.debugElement.query(By.css("#btnId"));
        el = de.nativeElement;

        // input = fixture.debugElement.query(By.css("#inputId"));
        // inputEl = input.nativeElement;

    });

    it("should check the object of bannercomponent is created", () => {
        expect(comp instanceof BannerComponent).toBe(true);
    });

    it("should be having empty value", () => {
        fixture.detectChanges();
        comp.ngAfterViewInit();
        fixture.whenStable().then(() => {
            input = fixture.debugElement.query(By.css("#inputId"));
            inputEl = input.nativeElement;
        });
    });


});

class AlternativeDetails服务间谍{
getAlternativeDetails=jasmine.createSpy（“getAlternativeDetails”）。和.callFake（（）=>
Promise.resolve（true）.then（（）=>Object.assign（{}，{}））；
}
描述（“横幅组件”，（）=>{
让组件：横幅组件；
let夹具：组件夹具；
让德；
让el；
让输入；
让输入；
let spy:Alternative Details服务间谍；
//之前异步
beforeach（异步（（）=>{
TestBed.configureTestingModule({
导入：[FormsModule]，
声明：[BannerComponent]，//声明测试组件
提供者：[{provide:AbcService，useValue:{}]
}).覆盖组件（横幅组件{
设置：{
供应商：[
{provide:AbcService，useClass:AbcServiceSpy}
]
}
}).compileComponents（）；//编译模板和css
}));
//同步前置
在每个之前（（）=>{
让hdsSpy:AbcServiceSpy；
fixture=TestBed.createComponent（BannerComponent）；
comp=fixture.componentInstance；//BannerComponent测试实例
hdsSpy=fixture.debugElement.injector.get（AbcService）；
//按CSS元素选择器查询标题
de=fixture.debugElement.query（By.css（“#btnId”）；
el=自然元素；
//input=fixture.debugElement.query（By.css（“#inputId”）；
//inputEl=input.nativeElement；
});
它（“应该检查bannercomponent的对象是否已创建”，（）=>{
expect（BannerComponent的comp instanceof）.toBe（true）；
});
它（“应该有空值”，（）=>{
fixture.detectChanges（）；
comp.ngAfterViewInit（）；
fixture.whenStable（）然后（（）=>{
input=fixture.debugElement.query（By.css（“#inputId”）；
inputEl=input.nativeElement；
});
});
});

class AlternativeDetailsServiceSpy {
    getAlternativeDetails = jasmine.createSpy("getAlternativeDetails").and.callFake(() =>
        Promise.resolve(true).then(() => Object.assign({}, {})));
}

describe("BannerComponent", () => {

    let comp: BannerComponent;
    let fixture: ComponentFixture<BannerComponent>;
    let de;
    let el;
    let input;
    let inputEl;
    let spy: AlternativeDetailsServiceSpy;

    // async beforeEach
    beforeEach(async(() => {
        TestBed.configureTestingModule({
            imports: [FormsModule],
            declarations: [BannerComponent], // declare the test component
            providers: [{ provide: AbcService, useValue: {} }]
        }).overrideComponent(BannerComponent, {
            set: {
                providers: [
                    { provide: AbcService, useClass: AbcServiceSpy }
                ]
            }
        }).compileComponents();  // compile template and css
    }));


    // synchronous beforeEach
    beforeEach(() => {
        let hdsSpy: AbcServiceSpy ;

        fixture = TestBed.createComponent(BannerComponent);
        comp = fixture.componentInstance; // BannerComponent test instance
        hdsSpy = fixture.debugElement.injector.get(AbcService);
        // query for the title <h1> by CSS element selector
        de = fixture.debugElement.query(By.css("#btnId"));
        el = de.nativeElement;

        // input = fixture.debugElement.query(By.css("#inputId"));
        // inputEl = input.nativeElement;

    });

    it("should check the object of bannercomponent is created", () => {
        expect(comp instanceof BannerComponent).toBe(true);
    });

    it("should be having empty value", () => {
        fixture.detectChanges();
        comp.ngAfterViewInit();
        fixture.whenStable().then(() => {
            input = fixture.debugElement.query(By.css("#inputId"));
            inputEl = input.nativeElement;
        });
    });


});