Не могу связать с formGroup, так как это не известное свойство 'form'

Question

Я новичок в модульном модульном тестировании. Я пытаюсь протестировать модальный компонент и получаю следующую ошибку: «Невозможно выполнить привязку к« formGroup », так как это не известное свойство« формы »."

Я попытался передать FormGroup, FormBuilder, Validators поставщикам тестов (поскольку они используются в тестируемом коде, я добавил их по одному и все вместе), ятакже попытался добавить ReactiveFormsModule к нему (с другими провайдерами и без них), но продолжаю получать ошибку.

Как я уже говорил, я новичок в этом, поэтому будьте нежны.

Компонент:

import { Component, OnInit, Input, OnChanges } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { Benefit } from '../../models/benefit';
import { PolicyBase } from '../../models/policy-base';
import { DatePipe } from '@angular/common';
import { DataService } from '../../services/data-service/data-service';
import { Strings } from '../../models/strings';

@Component({
  selector: 'app-benefit-edit-modal',
  templateUrl: './benefit-edit-modal.component.html',
  styleUrls: ['./benefit-edit-modal.component.css']
})
export class BenefitEditModalComponent implements OnInit, OnChanges {

  @Input() policy: PolicyBase;
  @Input() mainForm: FormGroup;
  @Input() selectedBenefitToChange: Benefit;
  @Input() selectedBenefitToChangeIndex: number;

  headerText: string;
  private isAmountEditAvailable: boolean;

  constructor(private fb: FormBuilder,
      private dataService: DataService) { }

  ngOnInit() {
    this.mainForm.addControl('changeBenefitModalForm', this.fb.group({
      benefitType: [''],
      amount: [''],
      issueDate: [''],
      ceaseAge: ['']
    })) ;
  }

Component.Spec.ts

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { HttpClientModule } from '@angular/common/http';
import { FormGroup, FormBuilder, Validators, FormsModule, ReactiveFormsModule, FormControl } from '@angular/forms';
import { RouterTestingModule } from '@angular/router/testing';
import { Ng4LoadingSpinnerModule } from 'ng4-loading-spinner';
import { AppRoutingModule } from 'src/app/app-routing.module';

import { BenefitMock } from '../../mock-components/mock-models.ts/benefit-mock';
import { Benefit } from '../../models/benefit';
import { PolicyBase } from '../../models/policy-base';
import { DataService } from '../../services/data-service/data-service';
import { Strings } from '../../models/strings';
import { BenefitEditModalComponent } from './benefit-edit-modal.component';
import { DataServiceHelper } from '../../services/data-service/data-service-helper';
import { AlertService } from '../../services/alert-service.service';
import {WindowRef} from '../../services/window-ref-service';
import { APP_BASE_HREF } from '@angular/common';

describe('BenefitEditModalComponent', () => {
  let component: BenefitEditModalComponent;
  let fixture: ComponentFixture<BenefitEditModalComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ 
        BenefitEditModalComponent
      ],
      imports: [
        HttpClientModule, 
        RouterTestingModule,
        Ng4LoadingSpinnerModule,
      ],
      providers: [
        DataService, 
        DataServiceHelper, 
        AlertService,
        FormGroup,
        FormBuilder,
        Validators,
        {provide: APP_BASE_HREF, useValue: '/inforceillustrations/'}, WindowRef
      ],
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(BenefitEditModalComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  })

  it('should create', () => {
    expect(component).toBeDefined();
  });
});

Вapp.module.ts мы импортируем FormsModule и ReactiveFormsModule и экспортируем ReactiveFormsModule ... если это имеет значение.

Приложение работает нормально, оно изолировано для модульного теста.

Answer 1

Вы должны импортировать ReactiveFormsModule в массиве импорта:

beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ 
        BenefitEditModalComponent
      ],
      imports: [
        HttpClientModule, 
        RouterTestingModule,
        Ng4LoadingSpinnerModule,
        ReactiveFormsModule       // <---- this line
      ],
      providers: [
        DataService, 
        DataServiceHelper, 
        AlertService,
        FormGroup,
        FormBuilder,
        Validators,
        {provide: APP_BASE_HREF, useValue: '/inforceillustrations/'}, WindowRef
      ],
    })
    .compileComponents();
  }));