Как исправить 'TypeError: this.form.get не является функцией' в тестере кармы

Question

Я использую formbuilder.group для создания реактивной формы с помощью formcontrol name в ngOnInit() и сделал функцию get для имени, когда я запускаю ng test Я получаю ошибку, как показано ниже

• Я создал контрольный пример для моего компонента, используя расширение Simon Test
• Я попытался импортировать ReactiveFormsModule, CommonModule в spec.ts
• Я попытался изменить 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. Импорт ReactiveFormsModule в TestBed

3. Добавить .compileComponents();

4. Поместите его в async блок