Angular 6单元测试detectChange为带有@input的组件抛出错误

Question

我有一个简单的组件，它作为@input传递一个配置对象，并使用它在ngOnInit中设置一些值

export class MyComponent implements OnInit {
@input() config: ConfigObject;
min: number;
max: number;
ngOnInit() {
this.min = this.config.range.min;
this.max = this.config.range.max;
}
}

我测试如下：

describe('MyComponent', () => {
beforeEach(async(() => {
TestBed.configureTestingModule({...})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(MyComponent);
component = fixture.componentInstance;
component.config = <ConfigObject>mockConfig;
fixture.detectChanges();
})
})

这里的detectChanges将抛出一个错误[object ErrorEvent] thrown。如果我显式调用ngOnInit，我将收到TypeError: Cannot read property 'min' of undefined。根据Angular的测试指南，似乎应该在测试组件上显式设置输入，然后调用detectChanges，所以我不确定为什么这不起作用。

如果您想知道mockConfig对象是运行代码时传递给组件的对象的副本，在这种情况下组件不会出错。

Answer 1

您需要给出一些模拟值，请立即检查，它应该可以工作

beforeEach(() => {
fixture = TestBed.createComponent(MyComponent);
component = fixture.componentInstance;
component.config = range: {min:0, max:100};
fixture.detectChanges();
})
})