Angular 5模板驱动表单单元测试-无法读取未定义的属性“表单”

关键词：

【中文标题】Angular 5模板驱动表单单元测试-无法读取未定义的属性“表单”【英文标题】：Angular 5 template driven form unit Test - Cannot read property 'form' of undefined 【发布时间】：2019-02-23 20:14:54 【问题描述】：

您好，我是测试新手。 我尝试了很多来测试一个函数，但即使在阅读了所有关于此的 *** 主题之后也无法成功。 我希望你能找到一种方法来帮助我..

这是我的 html 的摘录：

<form #myForm="ngForm">

这是我的一张：

@ViewChild('myForm')myForm: NgForm;

我有一个验证功能：

public valider(): void 
    if (this.myForm.form.valid) 
        //doSomething
     else 
        console.log('your form is not valid.');
    

最后是我要运行的测试：

it('should send an error when the form is not valid', () => 
    fixture = TestBed.createComponent(myComponent);
    comp = fixture.componentInstance;
    fixture.detectChanges();
    fixture.whenStable().then(() => 
        fixture.detectChanges();
        expect(comp.myForm.form.invalid).toBeTruthy();
        comp.valider();
    );
);

我得到的错误是：

未处理的 Promise 拒绝：', 'Cannot read property 'form' of undefined'

非常感谢大家

【问题讨论】：

您是否在TestBed 中导入了FormsModule？ 是的，我会添加我的测试配置 【参考方案1】：

你应该在该行之后初始化你的表单

 fixture.detectChanges();

像这样：

   component.riskForm = new NgForm([],[]);

【讨论】：

【参考方案2】：

我已经稍微改变了你的组件。

import Component, ViewChild from '@angular/core';
import NgForm from '@angular/forms';

@Component(
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
)
export class AppComponent 
  @ViewChild('myForm') myForm: NgForm;

  valider = (): boolean => this.myForm.form.valid;

然后你的测试应该是这样的：

import TestBed, async, ComponentFixture from '@angular/core/testing';
import  AppComponent  from './app.component';
import FormsModule from '@angular/forms';

describe('AppComponent', () => 

  const initialFormValid = true;
  let fixture: ComponentFixture<AppComponent>;
  let component: AppComponent;

  beforeEach(async(() => 
    TestBed.configureTestingModule(
      imports: [
        FormsModule,
      ],
      declarations: [
        AppComponent
      ],
    ).compileComponents();
  ));

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

  it('should be defined', () => 
    expect(component).toBeDefined();
  );

  it('#valider should return forms valid state', () => 
    expect(component.valider()).toEqual(initialFormValid);
  );

);

【讨论】：

非常感谢您的帮助，我会尽快尝试的 =)

[karma-server]：TypeError：无法读取未定义的属性“范围”-CI 环境中的 Angular 单元测试

...er]：TypeError：无法读取未定义的属性“范围”-CI环境中的Angular单元测试【英文标题】：[karma-server]:TypeError:Cannotreadproperty\'range\'ofundefined-AngularUnitTestinginCIenvironment【发布时间】：2021-02-2110:25:22【问题描述】：我们的CI/CD管道停止... 查看详情

Karma 单元测试 EventEmitter 发射和订阅失败，无法读取未定义的属性“订阅”

...undefined【发布时间】：2020-08-1012:15:49【问题描述】：我是Angular/NodeUT的新手，目前，我添加了karma和jasmine来运行单元测试 查看详情

使用业力和 webpack 4 运行单元测试时无法读取未定义的属性“externalModuleIndicator”

...间】：2018-09-0305:59:09【问题描述】：使用webpack4升级我的angular项目后，我在使 查看详情

无法读取未定义单元测试酶的属性“contextTypes”

】无法读取未定义单元测试酶的属性“contextTypes”【英文标题】：Cannotreadproperty\'contextTypes\'ofundefinedUnitTestingenzyme【发布时间】：2017-06-1612:38:06【问题描述】：我正在使用redux应用程序在我的反应中尝试单元测试。所以我需要测... 查看详情

Angular 单元测试 - 组件中的服务模拟

】Angular单元测试-组件中的服务模拟【英文标题】：AngularUnitTesting-MockingofServiceincomponent【发布时间】：2020-04-1915:18:08【问题描述】：我是Angular测试的新手，正在尝试使用Angular实现模拟服务的基本测试。调用personalsettingmock.getPerso... 查看详情

在 Angular 单元测试中使用回车键提交表单

】在Angular单元测试中使用回车键提交表单【英文标题】：SubmittingformwithenterkeyinAngularunittest【发布时间】：2018-02-2714:32:19【问题描述】：我正在为作为登录表单的Angular4组件编写测试。可以通过单击“提交”按钮或在任何输入字... 查看详情

单元测试：TypeError：无法读取未定义的属性“管道”

】单元测试：TypeError：无法读取未定义的属性“管道”【英文标题】：Unittesting:TypeError:Cannotreadproperty\'pipe\'ofundefined【发布时间】：2020-01-1711:29:11【问题描述】：我正在尝试为我的组件中的一个功能编写单元测试，在本示例中，... 查看详情

Angular2：无法读取未定义的属性“名称”

】Angular2：无法读取未定义的属性“名称”【英文标题】：Angular2:Cannotreadproperty\'name\'ofundefined【发布时间】：2017-02-0621:30:21【问题描述】：我开始学习Angular2。我一直在关注angular.io提供的英雄教程。一切正常，直到我对使用模板... 查看详情

麻烦单元测试角度的反应性表单字段

...性表单字段【英文标题】：troubleunittestingreactiveformfieldsinangular【发布时间】：2017-06-2721:11:04【问题描述】：我正在学习Angular2和使用@angular/cli1.0.0-beta.30进行单元测试，并在测试表单字段有效性的一个方面取得了一些成功，但不是... 查看详情

Angular 5：错误类型错误：无法读取未定义的属性“偏移量”

】Angular5：错误类型错误：无法读取未定义的属性“偏移量”【英文标题】：Angular5:ERRORTypeError:Cannotreadproperty\'offset\'ofundefined【发布时间】：2018-09-1716:38:29【问题描述】：错误：ERRORTypeError:Cannotreadproperty\'offset\'ofundefined我有漫画... 查看详情

反应笑话单元测试用例TypeError：无法读取未定义的属性'then'

】反应笑话单元测试用例TypeError：无法读取未定义的属性\\\'then\\\'【英文标题】：reactjestunittestcaseTypeError:Cannotreadproperty\'then\'ofundefined反应笑话单元测试用例TypeError：无法读取未定义的属性\'then\'【发布时间】：2019-07-0507:18:29【... 查看详情

angular表单的使用实例

...单的创建//1、在根模块注入依赖模块import{FormsModule}from‘@angular/forms‘;//2、在模板中创建表单控 查看详情

TypeError：无法读取未定义的属性（读取“拆分”）

...'split\')【发布时间】：2022-01-1816:06:46【问题描述】：我是Angular单元测试（Jasminekarma）的新手。我收到TypeError:cannotreadpropertiesofundefined(reading\'split\') 查看详情

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

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

无法读取未定义的属性“getters” - 带有笑话的 VueJS 单元测试

】无法读取未定义的属性“getters”-带有笑话的VueJS单元测试【英文标题】：Cannotreadproperty\'getters\'ofundefined-VueJSunittestingwithjest【发布时间】：2018-12-3104:17:04【问题描述】：我正在为VueJS组件编写单元测试，并参考了VueTestUtilsCommonT... 查看详情

Angular给出TypeError：“无法读取未定义的属性'id'”

】Angular给出TypeError：“无法读取未定义的属性\\\'id\\\'”【英文标题】：AngulargivingTypeError:"Cannotreadproperty\'id\'ofundefined"Angular给出TypeError：“无法读取未定义的属性\'id\'”【发布时间】：2019-08-1114:11:22【问题描述】：我正... 查看详情

Angular 6：TypeError：无法读取未定义的属性“值”

】Angular6：TypeError：无法读取未定义的属性“值”【英文标题】：Angular6:TypeError:Cannotreadproperty\'value\'ofundefined【发布时间】：2018-12-1309:29:38【问题描述】：我正在创建一个简单的表单来提交数据、电子邮件、城市名称和酒店名称... 查看详情

Angular 单元测试表单验证

】Angular单元测试表单验证【英文标题】：Angularunittestingformvalidation【发布时间】：2019-12-1819:16:42【问题描述】：我正在学习Angular8，并且正在使用Karma进行单元测试。我创建了一个可以正常工作的基本注册表单，但我在测试中遇... 查看详情