如何在测试 Angular 2 反应形式中使用 setValue 和 patchValue

Posted 2023-03-13

【中文标题】如何在测试 Angular 2 反应形式中使用 setValue 和 patchValue

【英文标题】：How to use setValue and patchValue in testing angular 2 reactive forms

【发布时间】：2017-09-11 01:53:36

【问题描述】：

我似乎无法在我的规范文件中获得正确的依赖项来测试我创建的新表单。

我有 2 次通过测试，但是当我使用 setValue 或 patchValue 设置我的测试表单数据时，第 3 次就失败了。

浏览器中的 Karma 给出：TypeError: Cannot read property 'patchValue' of undefined

import  TestBed, async  from '@angular/core/testing';
import  Component, ViewChild  from '@angular/core';
import  MyComponent  from './my.component';
import  NgForm, ReactiveFormsModule, FormGroup, FormControl, FormArray  from '@angular/forms';


describe('My component test: ', () => 

    beforeEach(() => 
        TestBed.configureTestingModule(
            declarations: [MyComponent],
            imports: [ReactiveFormsModule],
            providers: [] // which provider for setValue/patchValue?
        );

        let fixture = TestBed.createComponent(MyComponent);
        let myComponent = fixture.debugElement.componentInstance;

    );


    it('sending form values to the service onSubmit method', () => 
        // TypeError: Cannot read property 'patchValue' of undefined
        this.jobForm.patchValue('title': 'a spec title'); 
    );

问题是：如何使用 setValue/patchValue 设置我的表单对象以提交测试表单？

【参考方案1】：

如果您使用的是响应式表单，那么您应该将FormGroup 作为组件的成员。这是您需要访问的内容

let component;
let fixture;

beforeEach(() => 
    TestBed.configureTestingModule(
        declarations: [MyComponent],
        imports: [ReactiveFormsModule],
        providers: [] // which provider for setValue/patchValue?
    );

    fixture = TestBed.createComponent(MyComponent);
    component = fixture.debugElement.componentInstance;
    fixture.detectChanges()
);


it('sending form values to the service onSubmit method', () => 
    // assuming the property on the component is named jobForm
    const form = component.jobForm;

    form.patchValue('title': 'a spec title'); 
);

【讨论】：

是的，我有，但你没有做我正在做的事情

看起来你已经添加了一个form const 但你没有使用它。这就是我看到的差异。我错过了什么？

有什么区别？您正在尝试访问this。 this 的什么？。此外，您已将变量范围限定为 beforeEach，因此您可以从中使用它们。我已将其移至更广泛的范围

如果在ngOnInit中初始化，需要调用fixture.detectChanges()才能调用ngOnInit

就是这样！哇非常感谢您的时间和耐心。请更新您的答案:) #Madprops