如何在业力测试运行器中修复“TypeError：this.form.get 不是函数”

Question

我正在使用formbuilder.group 使用ngOnInit() 中的formcontrol name 创建反应式表单，并为名称创建了一个get 函数，当我运行ng test 时出现如下错误

• 我已经使用 Simon Test 扩展为我的组件创建了测试用例
• 我尝试在 spec.ts 中导入 ReactiveFormsModule, CommonModule
• 我尝试将form.get('name') 更改为form.controls.name

业力测试运行器出错

Test1Component ngOnInit makes expected calls
TypeError: this.form.get is not a function
TypeError: this.form.get is not a function
    at Test1Component.get [as name] (http://localhost:9877/_karma_webpack_/webpack:/src/app/test1/test1.component.ts:27:22)
    at Test1Component../src/app/test1/test1.component.ts.Test1Component.printVal (http://localhost:9877/_karma_webpack_/webpack:/src/app/test1/test1.component.ts:23:22)
    at Test1Component.SpyStrategy.exec (http://localhost:9877/absoluteC:/Users/ratnsing/Desktop/Ratnesh/Angular7/Xv1/node_modules/jasmine-core/lib/jasmine-core/jasmine.js?0b1eaf7a13cae32191eadea482cfc96ae41fc22b:5083:19)
    at Test1Component.spy (http://localhost:9877/absoluteC:/Users/ratnsing/Desktop/Ratnesh/Angular7/Xv1/node_modules/jasmine-core/lib/jasmine-core/jasmine.js?0b1eaf7a13cae32191eadea482cfc96ae41fc22b:4873:44)
    at Test1Component.<anonymous> (http://localhost:9877/absoluteC:/Users/ratnsing/Desktop/Ratnesh/Angular7/Xv1/node_modules/jasmine-core/lib/jasmine-core/jasmine.js?0b1eaf7a13cae32191eadea482cfc96ae41fc22b:4849:20)
    at Test1Component.printVal (http://localhost:9877/absoluteC:/Users/ratnsing/Desktop/Ratnesh/Angular7/Xv1/node_modules/jasmine-core/lib/jasmine-core/jasmine.js?0b1eaf7a13cae32191eadea482cfc96ae41fc22b:4890:50)
    at Test1Component../src/app/test1/test1.component.ts.Test1Component.ngOnInit (http://localhost:9877/_karma_webpack_/webpack:/src/app/test1/test1.component.ts:19:10)
    at UserContext.<anonymous> (http://localhost:9877/_karma_webpack_/webpack:/src/app/test1/test1.component.spec.ts:28:17)
    at ZoneDelegate../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (http://localhost:9877/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone.js:391:1)
    at ProxyZoneSpec.push../node_modules/zone.js/dist/zone-testing.js.ProxyZoneSpec.onInvoke (http://localhost:9877/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone-testing.js:289:1)

test1.component.ts

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder } from '@angular/forms';

@Component({
  selector: 'app-test1',
  templateUrl: './test1.component.html',
  styleUrls: ['./test1.component.css']
})
export class Test1Component implements OnInit {

  form: FormGroup;

  constructor(private formBuilder: FormBuilder) { }

  ngOnInit() {
    this.form = this.formBuilder.group({
      name: ['Init Value']
    });
    this.printval();
  }

  printVal() {
    console.log(this.name);
  }

  get name() {
    return this.form.get('name');
  }
}

test1.component.spec.ts

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { NO_ERRORS_SCHEMA } from '@angular/core';
import { FormBuilder } from '@angular/forms';
import { Test1Component } from './test1.component';
describe('Test1Component', () => {
  let component: Test1Component;
  let fixture: ComponentFixture<Test1Component>;
  beforeEach(() => {
    const formBuilderStub = { group: object1 => ({}) };
    TestBed.configureTestingModule({
      schemas: [NO_ERRORS_SCHEMA],
      declarations: [Test1Component],
      providers: [{ provide: FormBuilder, useValue: formBuilderStub }]
    });
    fixture = TestBed.createComponent(Test1Component);
    component = fixture.componentInstance;
  });
  it('can load instance', () => {
    expect(component).toBeTruthy();
  });
  describe('ngOnInit', () => {
    it('makes expected calls', () => {
      const formBuilderStub: FormBuilder = fixture.debugElement.injector.get(
        FormBuilder
      );
      spyOn(component, 'printVal').and.callThrough();
      spyOn(formBuilderStub, 'group').and.callThrough();
      component.ngOnInit();
      expect(component.printVal).toHaveBeenCalled();
      expect(formBuilderStub.group).toHaveBeenCalled();
    });
  });
});

我发现.get 是 AbstractControl 属性的一部分， 期待所有的测试用例通过...

Answer 1

你可以试试：

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { ReactiveFormsModule, FormBuilder, FormsModule } from '@angular/forms';
import { CommonModule } from '@angular/common';

beforeEach(async(() => {
    const formBuilderStub = { group: object1 => ({}) };
    TestBed.configureTestingModule({
      imports: [CommonModule,ReactiveFormsModule,FormsModule],
      schemas: [NO_ERRORS_SCHEMA],
      declarations: [Test1Component],
      providers: [FormBuilder]
    }).compileComponents();
    fixture = TestBed.createComponent(Test1Component);
    component = fixture.componentInstance;
}));

1. 删除FormBuilder服务的覆盖

   providers: [{ provide: FormBuilder, useValue: formBuilderStub }]

2. 在TestBed 中导入ReactiveFormsModule

3. 添加.compileComponents();

4. 放入async块