类型错误：无法读取未定义的属性'id' - Angular 8测试

Question

我在进行 Angular 8 应用程序的单元测试时，遇到了 TypeError: cannot read property 'id' of undefined 错误。

以下是我的模板：

<h4>{{student.id}}</h4>

这是我的组件。

import {Component, EventEmitter, Input, OnInit} from '@angular/core';
import { Student } from '@app/app-types';

@Component({
...... saved some typing
})

export class StudentComponent implements OnInit {
@Input() student: Student;
refreshForm: EventEmitter<any>;

constructor(){}

ngOnInit(){
  this.refreshForm = new EventEmitter();
  }
}

这里是单元测试

import {async, ComponentFixture, TestBed } from '@angular/core/testing';
import {StudentComponet} from './student-component';

describe('StudentComponet', () => {
  let component: StudentComponent;
  let fixture: ComponentFixture<StudentComponent>;
  
  beforeEach(async(() => {
  TestBed.configureTestingModule({
    declarations: [StudentComponent]
  }).compileComponents();
  }));
  
  beforeEach(() => {
    fixture = TestBed.createComponent(StudentComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });
  
  it('should create', () => {
  expect(component).toBeTruthy();
  })
  
  });

- sage poudel

---

学生是否被实例化一次？ - FrV

@FrV 是的。学生是通过 ngrx/store 从父组件接收的。 - sage poudel

Answer 1

使用

student?.id

在单元测试中，你必须为学生提供值。

beforeEach(() => {
  ...
  component.student = value;
  fixture.detectChanges();
);

- Damian Pioś

---

谢谢您的回复。您能否分享一下如何动态获取component.student = value，而不是硬编码值？ - sage poudel

从后端获取值？ - Damian Pioś

不是真的。我应该在 component.student = value 中给什么值？因为在组件中导入的 student 是一个接口。 - sage poudel

在这里你可以学习如何在TypeScript中实现匿名内联接口。 - Damian Pioś