使用 jasmine 和 karma 进行单元测试时形成数组错误

Posted 2023-03-16

【中文标题】使用 jasmine 和 karma 进行单元测试时形成数组错误

【英文标题】：Forms array error while unit test using jasmine and karma

【发布时间】：2021-01-19 09:04:36

【问题描述】：

我正在为 Angular 应用程序版本 9 编写单元测试用例。但我遇到了错误。

TypeError: 无法读取未定义的属性“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);
  );

【参考方案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，否则，您将收到另一个未定义的错误。

【讨论】：

仍然出现相同的错误，我已将 relTemplateUpadteService 更改为如下所示的组件，因为 getFormControls 是组件内部的一种方法。 spyOnProperty(component, 'getFormControls').and.returnValue(new FormArray([ new FormGroup( rName: new FormControl('rName'), pEntity: new FormControl('pEntity'),

您可能需要分享更多详细信息（代码），因为对我来说它看起来有效。这可能是一个完全不同的领域。