Angular 2单元测试错误无法获取属性'；防止违约'；指未定义的或空的引用

我为我拥有的组件创建了一系列单元测试。它最初失败是因为我得到了上面的错误，所以我在不知道它在做什么的情况下取出event.defaultPrevented内容

嗯，这修复了我的错误，但显然对UI行为有很坏的副作用，所以我不得不把这些东西放回代码中

所以，现在我又开始修复我的单元测试了。我如何能够模拟/注入事件内容到我的单元测试中

仅Angular CLI取消的默认“应创建”测试失败，代码如下：

let component: MemberAddComponent;
let fixture: ComponentFixture<MemberAddComponent>;
let contractsService: ContractsService;
let notesService: NotesService;
let saveButton: any;

beforeEach(async(() => {
    let router = { navigate: jasmine.createSpy('navigate') };

    TestBed.configureTestingModule({
        imports: [
            HttpModule,
            FormsModule,
            ReactiveFormsModule,
            RouterTestingModule
        ],
        declarations: [
            MemberAddComponent,
            // lots more here
        ],
        providers: [
            AppDataService,
            ErrorService,
            {
                provide: ContractsService,
                useClass: MockContractsService
            },
            {
                provide: NotesService,
                useClass: MockNotesService
            }
        ]
    })
    .compileComponents();
}));

beforeEach(() => {
    fixture = TestBed.createComponent(MemberAddComponent);
    component = fixture.componentInstance;
    contractsService = fixture.debugElement.injector.get(ContractsService);
    saveButton = fixture.nativeElement.querySelector('#saveButton');
    fixture.detectChanges();
});

it('should create', () => {
    expect(component).toBeTruthy();
});

编辑：请注意，正在测试的代码中没有

事件.preventDefault

或

事件.defaultPrevented

。这仅存在于该组件的post/submit过程的

onSubmit

函数中。但它仍然使单元测试失败

Edit2：这是html页面，以及onSave（）函数

Html:

---

如果要阻止事件，必须将事件添加到onSave函数中，因此替换

<form *ngIf="(!loadError)" novalidate (ngSubmit)="onSave()">

---

前一段时间我已经开始工作了，但是我忘记更新我的问题了

所有需要做的就是在我的组件上创建一个虚拟的“事件”对象，然后在运行所有东西之前在测试中显式地设置一些值。一旦完成，一切都很顺利

因此，这样做可能在组件中起作用：

if (event && event.preventDefault) { event.preventDefault(); }

或者这可以在测试中完成：

component.event = { preventDefault: function () {} };

---

你能提供一个plunker吗？html的形式和提交的代码，可以是helpful@valorkin我用html和onSave代码更新了这个问题。@yurzui我仍在试图弄清楚如何获得Plunkr设置。您可以从

<form *ngIf="(!loadError)" novalidate (ngSubmit)="onSave()">

<form #myForm="ngForm" *ngIf="(!loadError)" novalidate (ngSubmit)="onSave(myForm, $event)">

public onSave(myForm: any, event: Event) {
    event.preventDefault(); // or event.defaultPrevented to check
    .... rest of your code
}

if (event && event.preventDefault) { event.preventDefault(); }

component.event = { preventDefault: function () {} };