Angular Unit Test 应该创建 FAILED TypeError: Cannot read properties of undefined (reading 'preferences')

Posted 2023-03-16

【中文标题】Angular Unit Test 应该创建 FAILED TypeError: Cannot read properties of undefined (reading \'preferences\')

【英文标题】：Angular Unit Test should create FAILED TypeError: Cannot read properties of undefined (reading 'preferences')Angular Unit Test 应该创建 FAILED TypeError: Cannot read properties of undefined (reading 'preferences')

【发布时间】：2021-12-24 17:14:59

【问题描述】：

我正在尝试创建覆盖所有行（Jasmine / Karma），但我收到错误，因为 无法读取未定义的属性“首选项”

这是我的组件代码。

    export class PreferComponent implements OnInit 
  @Output() updatePreferences = new EventEmitter<any>();
  @ViewChild('settingModal',  static: true ) settingModal: any;
  private data: any;
  preferences = [];
  maxCols: number;
  selectedPref: number;
  constructor()  

  ngOnInit(): void 
    this.preferences = JSON.parse(JSON.stringify(this.data.preferences));
    this.maxCols = this.data.maxCols;
    this.selectedPref = this.data.selectedPref;
    this.checkPreferences();
  

  setPreferences(col, val) 
    if (val) 
      col.isPreferredColumn = true;
      this.selectedPref++;
     else 
      col.isPreferredColumn = false;
      this.selectedPref--;
    
    this.checkPreferences();
  

这是我尝试过的规范的以下代码：

   fdescribe('PreferComponent ', () => 
  let component: PreferComponent ;
  let fixture: ComponentFixture<PreferComponent >;

  beforeEach(async () => 
    await TestBed.configureTestingModule(
      declarations: [PreferencesComponent],
      schemas: [CUSTOM_ELEMENTS_SCHEMA]

    )
      .compileComponents();
  );

  beforeEach(() => 
    fixture = TestBed.createComponent(PreferComponent );
    fixture.detectChanges();

    component = fixture.componentInstance;
    const data1 = 
      preferences: [1, 2, 4],
      "maxCols": 5,
      "selectedPref": 7
    ;
    component.preferences = data1.preferences;
    component.maxCols = data1.maxCols;
    component.selectedPref = data1.selectedPref;
    expect(component.preferences).toEqual([1, 2, 4]);

    component.ngOnInit();
  );
);

我在这里做错了什么？

【参考方案1】：

在ngOnInit 方法中，您将使用从this.data 获得的值分配给this.preferences。

因此，在beforeEach 函数中，您应该进行以下更改：

而不是...

component.preferences = data1.preferences;

...写这个：

@ts-ignore
component.data = data1;

您还应该在component.ngOnInit(); 之后移动expect(component.preferences).toEqual([1, 2, 4]);，因为这会检查ngOnInit 是否符合您的预期。

【讨论】：

试过但没有运气。 data 是私有变量，所以我使用它 => component['data'] = data1; component.preferences = data1.preferences;

那么你应该首先以常规方式将data注入组件，如果你在ngOnInit中使用它，它需要以某种方式获取一个值。另一种选择是使用@ts-ignore，它允许您将数据分配给私有类成员。

我定期注入“数据”变量，但问题仍然存在