使用 jasmine 和 karma 進行單元測試時形成數組錯誤

Question

我正在為 Angular 應用程序版本 9 編寫單元測試用例。但我遇到了以下錯誤。

類型錯誤：無法讀取未定義的屬性“get”

如何監視 getFormControls 方法，否則我必須使用 spyonproperty，我嘗試設置 spyonproperty 但得到不同的錯誤。

我是 jasmine 單元測試的新手，在大多數地方都受到了打擊，

ts：

  get getFormControls() {
    const control = this.relTable.get('tableRows') as FormArray;
    return control;
  }

submit() {
    this.messageService.clear();

/*     const formGroup = this.getFormControls.controls[this.isEdit.length - 1] as FormGroup;
    const rNameValue = formGroup.controls['rName'].value;
    const pEntityValue = formGroup.controls['pEntity'].value;
    const cEntityValue = formGroup.controls['cEntity'].value;


    this.new_rel_Data.push({
      'rName': rNameValue,
      'pEntity': pEntityValue,
      'cEntity': cEntityValue
    });  */



     this.new_rel_Data.push({
      'rName': this.getFormControls.controls[this.isEdit.length - 1].get('rName').value,
      'pEntity': this.getFormControls.controls[this.isEdit.length - 1].get('pEntity').value,
      'cEntity': this.getFormControls.controls[this.isEdit.length - 1].get('cEntity').value
    }); 

    this.relTemp.addReldata(this.new_rel_Data).subscribe(
      (res) => {
        console.log(res);
        this.loadRelTemp();
        this.messageService.add({ severity: 'success', summary: 'New value inserted successfully', sticky: true });
      },
      (err) => {
        this.messageService.add({ severity: 'error', summary: err.message, detail: 'Please contact Admin', sticky: true });
      },
      () => {
        const control = this.relTable.get('tableRows') as FormArray;
        control.clear();
        this.enableSubmit = false;
      }
    );

  }

規格：

 // submit for insert new value
  fit('Submit() Relational data', () => {

    let data = [ 'foo' ];
    component.new_rel_Data = data;

  fixture.detectChanges();
    spyOn(component, 'submit').and.callThrough();
    

    spyOn(relTemplateUpdateService, 'addReldata').and.returnValue(
      of({ result: { status: 200 } })
    );
    component.submit();
    fixture.detectChanges();
    expect(component.submit).toHaveBeenCalled();
    expect(relTemplateUpdateService.addReldata).toHaveBeenCalledWith(data);
  });

Answer 1

當您遇到以下錯誤時： TypeError: Cannot read property 'get' of undefined ，通常這意味着您忘記在測試中添加/模擬某些內容（盡管這也可能發生在實際代碼中的任何地方）。

在這種特殊情況下，您錯過了模擬relTable或getFormControls getter 的結果。

無論如何，我可能會像這樣嘲笑 getter：

spyOnProperty(relTemplateUpdateService, 'getFormControls').and.returnValue(new FormArray([
    new FormGroup({
      rName: new FormControl('rName'),
      pEntity: new FormControl('pEntity'),
      cEntity: new FormControl('cEntity'),
    }),
  ]));

由於 TypeScript 不允許分配給 getter，因此您可能需要使用spyOnProperty方法而不是relTemplateUpdateService.getFormControls = ... 。 如果它不是一個 getter，那么你也可以用相同的返回值this.relTable ，但我個人沒有發現它與 getter 一起工作。

此外，您應該檢查（在實際代碼中可能更好；除非您確定不需要） this.isEdit始終大於 0，否則，您將收到另一個未定義錯誤。