无法读取规范中未定义的属性“名称”

Question

我正在使用 jest 和 jasmine 作为测试配置进行 Angular8 项目。

.ts

// all imports are done correctly

@Component({
  selector: 'app-xyz',
  templateUrl: './xyz.component.html',
  styleUrls: ['./xyz.component.scss']
})
export class XYZComponent implements OnInit {

  public info;
  public number;

  constructor(private InfoService: infoService ) {
  }

  ngOnInit() {
    this.getInfo();
  }

  public getInfo() {    
   this.info =  this.infoService.getData();   
   this.number = this.info.list[0].number;
  }

}

.spec

// all imports are done 

describe('XYZComponent', () => {
  let component: XYZComponent;
  let fixture: ComponentFixture<XYZComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [ //imports done ],
      declarations: [ XYZComponent],
      schemas: [ NO_ERRORS_SCHEMA ]
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(XYZComponent);
    component = fixture.componentInstance;

    component.info = {
      'list':
      [
        {
       'fName':'Eddy',
       'lName':'He',
       'number: 123
     }
    ]
  }; 
   component.ngOnInIt(); 
  });

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

});

当在 .spec 文件中调用 ngOnInit() 时，它会抛出如下错误：

● XYZComponent › 应该创建

TypeError: Cannot read property 'list' of undefined

  43 |    this.info =  this.infoService.getData();
> 44 |    this.number = this.info.list[0].number;
     |                               ^
  46 |   }

Answer 1

即使你正在做：

component.info = {
  'list':
  [
    {
      'fName':'Eddy',
      'lName':'He',
      'number: 123
    }
  ]
};

在调用component.ngOnInit() 之前，这还不够，因为在您的ngOnInit() 方法中，您正在执行this.info = this.infoService.getData();，覆盖您的info 属性。

而且我相信在这个规范上下文中，这个方法返回undefined。

更好的方法是模拟服务，提供一个虚假的getData 方法，该方法返回您希望组件处理的数据。

或者您可以将this.info = this.infoService.getData() 移动到构造函数，因为它不依赖于输入数据，这将使您的覆盖正常工作。