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's testing guide开始，似乎应该在经过测试的组件上显式设置输入，然后调用detectChanges，所以我不确定为什么这不起作用。

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

Answer 1

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

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

Angular 6单元测试detectChange使用@input引发组件错误

1 个答案: