Angular Testing 无法读取未定义的属性 'name'

Question

我有一个 ModalComponent，它通过@Input 接受来自父级的一些属性。

这会导致测试出现问题

TypeError: Cannot read property 'name' of undefined

名称正在 ngOnInit 中使用，应该来自 @Input displayeddata。

如何在单元测试中通过它？

目前我的测试看起来是这样

beforeEach(async(() => {
        TestBed.configureTestingModule({
            declarations: [ModalComponent, FilterComponent],
            imports: [ReactiveFormsModule, TranslateModule]
        })
            .compileComponents();
    }));

    beforeEach(async () => {
    fixture = TestBed.createComponent(ModalComponent);
    component = fixture.componentInstance;
    component.displayeddata = {
        name: 'One component',
        caption: 'Caption',
        componentName: 'TextareaComponent'
    };
    fixture.detectChanges();
});

it('should create', async () => {
    fixture.detectChanges();
    fixture.whenStable().then(() => {
        expect(component).toBeTruthy();
    });
});

这是对我的组件的一次测试，但失败了。

更新#1

这是我在 console.log(this.displayeddata);

上得到的

Object
caption: "Caption"
component: "TextareaComponent"
name: "One component"

我也稍微更改了我的代码(更新代码)，现在收到一个新错误 TypeError: Cannot read property 'caption' of undefined

更新#2

modal.component.ts

export class ModalComponent implements OnInit {
@Input() showenpunctsnow;
@Input() displayeddata;
@Output() ComponentParametrsInputs: FormGroup = this.fb.group({
        name: ['', Validators.required],
        caption: ['', Validators.required],
        component: ['']
    });
constructor(private fb: FormBuilder) {}
ngOnInit() {

        console.log(this.displayeddata);

        this.ComponentParametrsInputs = this.fb.group({
            name: [this.displayeddata.name, Validators.required],
            caption: [this.displayeddata.caption, Validators.required],
            component: [this.displayeddata.componentName]
        });
    }

Answer 1

尽管这已经解决了，但还是要在这里发表评论，以防其他人遇到同样的问题。

问题很可能来自 html 文件，而不是单元测试或组件本身。

在您的 html 文件中:

• 转到您使用{variable}.name的地方
• 在相应的部分、div 或以其他方式添加 *ngIf="{variable}"

这应该先检查这个变量是否存在。 然后在您的单元测试中，只需执行以下操作:

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

如果你想检查组件是否会加载指定的 name:

it('should create with specified name', () => {
   component.{variable}.name = 'Foo'

   fixture.detectChanges();
   expect(fixture.debugElement.nativeElement.innerHTML)
    .toContain(component.{variable}.name)
}