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

关键词：

【中文标题】使用 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'), 您可能需要分享更多详细信息（代码），因为对我来说它看起来有效。这可能是一个完全不同的领域。

使用 jasmine / karma 进行 Angular 4 单元测试和 http post mocking - 如何修复

】使用jasmine/karma进行Angular4单元测试和httppostmocking-如何修复【英文标题】：Angular4unittestingwithjasmine/karmawithhttppostmocking-howtofix【发布时间】：2018-03-0708:01:12【问题描述】：我有一项服务，我想在Angular4typescriptjasmine中进行单元测试... 查看详情

在我的 JSPM 包上使用 JSPM 404 进行 Karma/Jasmine 单元测试

】在我的JSPM包上使用JSPM404进行Karma/Jasmine单元测试【英文标题】：Karma/JasmineunittestwithJSPM404onmyJSPMpackages【发布时间】：2016-08-0800:49:42【问题描述】：我试图让JSPM/Karma/Babel/Jasmine一起工作。但是运行karmastart时出现错误1504201617:34:02.... 查看详情

使用jasmine和karma对传统js进行单元测试(代码片段)

当你拿到十五年前的一堆javascript的代码，你如何对这堆javascript代码写单元测试呢？于是就有了这篇文章。注意：不需要装任何现代化js框架，包括angular，react,vue之类的，都不需要装！！！先要... 查看详情

为啥使用 jasmine 对 Node typescript 项目进行 Karma 单元测试会显示包含依赖项的覆盖范围？

】为啥使用jasmine对Nodetypescript项目进行Karma单元测试会显示包含依赖项的覆盖范围？【英文标题】：WhyKarmaunittestswithjasmineforaNodetypescriptprojectshowscoverageincludingadependency?为什么使用jasmine对Nodetypescript项目进行Karma单元测试会显示包... 查看详情

使用 Karma Jasmine 的 Angular 1.5 组件模板单元测试

】使用KarmaJasmine的Angular1.5组件模板单元测试【英文标题】：Angular1.5ComponenttemplateunittestwithKarmaJasmine【发布时间】：2017-09-1522:06:34【问题描述】：我正在尝试使用KarmaJasmine对Angular组件和模板进行单元测试。我正在使用ng-html2js测试... 查看详情

使用 karma 和 jamis 进行 Angular 单元测试

】使用karma和jamis进行Angular单元测试【英文标题】：AngularUnitTestingwithkarmaandjamis【发布时间】：2019-07-0106:26:46【问题描述】：我已经设置了我的Angularjs应用程序，用于使用Karma和Jasmin进行单元测试。但是当我尝试使用karmastart运行... 查看详情

单元测试 typescript 指令模板 karma-jasmine，html 未定义

...【发布时间】：2016-06-2401:04:35【问题描述】：最近我开始使用karma-jasmine对我的typescript代码进行单元测试。在为服务和一个简单指令创建并运行测试用例后，我为自定义指令创建 查看详情

基于karma和jasmine的angularjs单元测试

Angularjs基于karma和jasmine的单元测试目录：1.单元测试的配置2.实例文件目录解释3.测试controller  3.1 测试controller中变量值是否正确  3.2 模拟http请求返回值，测试$http服务相关4. 从文件中读取json，来模拟http... 查看详情

markdown使用karma和jasmine进行测试-介绍(代码片段)

查看详情

如何对 DOM 操作进行单元测试（使用 jasmine）

】如何对DOM操作进行单元测试（使用jasmine）【英文标题】：howtounittestDOMmanipulation(withjasmine)【发布时间】：2013-04-1608:14:13【问题描述】：我需要用jasmine对一些DOM操作函数进行单元测试（目前我在浏览器和Karma中运行我的测试）我... 查看详情

使用 Angular 和 Jasmine/Karma 的私有方法进行测试和代码覆盖

】使用Angular和Jasmine/Karma的私有方法进行测试和代码覆盖【英文标题】：Testsandcode-coveragewithprivatemethodswithAngularandJasmine/Karma【发布时间】：2020-06-0219:06:18【问题描述】：所以，我在按钮组件上使用了这些方法。exportclassSidebarButtonC... 查看详情

angularjs基于karma和jasmine的单元测试

目录：1.单元测试的配置2.实例文件目录解释3.测试controller  3.1 测试controller中变量值是否正确  3.2 模拟http请求返回值，测试$http服务相关4. 从文件中读取json，来模拟http请求返回数据5. 测试返回promise... 查看详情

.karma+jasmine+karma-coverage

...成到CI(Continuousintegration)工具,也可和其他代码编辑器一起使用.。这个测试工具的一个强大特性就是,它可以监控(Watch)文件的变化,然后自行执行。jasmine是一个行为驱动开发(TDD)测试框架，一个js测试框架，它不依赖于浏览器、dom或... 查看详情

Ruby on Rails 5.1 和 Vue.js 2.4.x – 使用 Karma、Jasmine 进行测试 – 如何安装？

】RubyonRails5.1和Vue.js2.4.x–使用Karma、Jasmine进行测试–如何安装？【英文标题】：RubyonRails5.1&Vue.js2.4.x–TestingwithKarma,Jasmine– Howtoinstall?【发布时间】：2018-02-2123:35:28【问题描述】：我有Rails5.1.x和Vue.js2.4.x；我不会在前端混合... 查看详情

用 angularjs karma 和 jasmine 编写 TDD

...asmine【发布时间】：2017-04-2812:08:34【问题描述】：我正在使用karma和jasmine编写我的应用程序的测试用例。我是单元测试的新手。这是我的代码：$scope.$watch(\'filterParams.statusModel\',function()$scope.customFil 查看详情

karma和jasmine自动化单元测试——本质上还是在要开一个浏览器来做测试

1.Karma的介绍Karma是Testacular的新名字，在2012年google开源了Testacular，2013年Testacular改名为Karma。Karma是一个让人感到非常神秘的名字，表示佛教中的缘分，因果报应，比Cassandra这种名字更让人猜不透！Karma是一个基于Node.js的JavaScript... 查看详情

Karma + Jasmine + Durandal + KnockoutJS + RequireJS 单元测试中不匹配的匿名 define() 模块

...】：2020-05-0919:30:02【问题描述】：通过Karma为Asp.NetMVC项目使用D 查看详情

如何在 Angular 7 中使用 Karma/Jasmine 为 App_Initializer 编写单元测试用例

】如何在Angular7中使用Karma/Jasmine为App_Initializer编写单元测试用例【英文标题】：howtowriteunittestcasesforApp_InitializerusingKarma/Jasmineinangular7【发布时间】：2019-06-3002:41:22【问题描述】：我已经在我的app.module.ts文件中导入了APP_INITIALIZER... 查看详情